docs: Tweaked the docs redesign so that it actually looks pretty

Author: taeuscherpferd

packages/react/xr/plugins/pretty-md.mjs

@@ -61,7 +61,21 @@ export const load = (app) => {
     // Replace types that return a promise and react component with a code block so that mdx will parse
     page.contents = page.contents.replace(/(Promise<.*>)/g, '`$1`')
     // Replace Parameters with props for components
-    page.contents = page.contents.replace(/## Parameters\n\n### props/g, '## props')
+    page.contents = page.contents.replace(/## Parameters\n\n### props/g, '## props\n---')
+    // Replace parameters with proper styling
+    page.contents = page.contents.replace(
+      /#### `(.*)` - (.*)/g,
+      '<span style={{fontSize: 24, color: "rgb(var(--color-primary))"}}>**$1**</span>\n\n$2\n',
+    )
+    // Shrink headers that should be smaller, and tweak the color
+    // page.contents = page.contents.replace(/####? (.*)\n/g, '**$1**\n')
+    // NOTE: This here is another option for the above, tweaks the param color and size
+    page.contents = page.contents.replace(
+      /####? (.*)\n/g,
+      '<span style={{fontSize: 24, color: "rgb(var(--color-primary))"}}>**$1**</span>\n',
+    )
+    // Add a divider after Returns
+    page.contents = page.contents.replace(/## Returns\n\n/g, '## Returns\n---\n')
   })
 
   // Happens after the markdown pages are generated
@@ -126,7 +140,7 @@ export const load = (app) => {
 
           // Update the nav number in the frontmatter
           const content = fs.readFileSync(targetFile, 'utf-8')
-          const updatedContent = content.replace(/nav:\s*\d+/, `nav: ${index + 1}`)
+          const updatedContent = content.replace(/nav:\s*\d+/, `nav: ${index + 25}`)
           fs.writeFileSync(targetFile, updatedContent)
         })
       }

packages/react/xr/src/anchor.tsx

@@ -11,7 +11,7 @@ export {
 } from '@pmndrs/xr'
 
 /**
- * hook that returns a function that allows to request a xr anchor
+ * Hook that returns a function that allows to request a xr anchor
  */
 export function useRequestXRAnchor() {
   const store = useXRStore()

packages/react/xr/src/controller-locomotion.ts

@@ -1,23 +1,27 @@
-import { RootState, useFrame } from '@react-three/fiber'
-import { RefObject, useMemo } from 'react'
-import { Vector3, Object3D } from 'three'
 import {
   type XRControllerLocomotionRotationOptions,
   type XRControllerLocomotionTranslationOptions,
   createXRControllerLocomotionUpdate,
 } from '@pmndrs/xr/internals'
+import { RootState, useFrame } from '@react-three/fiber'
+import { RefObject, useMemo } from 'react'
+import { Object3D, Vector3 } from 'three'
 import { useXRStore } from './xr.js'
 
 /**
  * A hook for handling basic locomotion in VR
  * @param target Either a `THREE.Group` ref, or a callback function. Recieves movement input (required).
  * @param translationOptions Options that control the translation of the user. Set to `false` to disable.
- * @param translationOptions.speed The speed at which the user moves.
+ *
+ * #### `translationOptions.speed` - The speed at which the user moves.
+ *
  * @param rotationOptions Options that control the rotation of the user. Set to `false` to disable.
- * @param rotationOptions.deadZone How far the joystick must be pushed to trigger a turn.
- * @param rotationOptions.type Controls how rotation using the controller functions. Can be either 'smooth' or 'snap'.
- * @param rotationOptions.degrees If `type` is 'snap', this specifies the number of degrees to snap the user's view by.
- * @param rotationOptions.speed If `type` is 'smooth', this specifies the speed at which the user's view rotates.
+ *
+ * #### `rotationOptions.deadZone` - How far the joystick must be pushed to trigger a turn.
+ * #### `rotationOptions.type` - Controls how rotation using the controller functions. Can be either 'smooth' or 'snap'.
+ * #### `rotationOptions.degrees` - If `type` is 'snap', this specifies the number of degrees to snap the user's view by.
+ * #### `rotationOptions.speed` - If `type` is 'smooth', this specifies the speed at which the user's view rotates.
+ *
  * @param translationControllerHand Specifies which hand will control the movement. Can be either 'left' or 'right'.
  */
 export function useXRControllerLocomotion(

packages/react/xr/src/controller.tsx

@@ -21,10 +21,10 @@ import { XRSpace } from './space.js'
  * Component for placing content in the controller anchored at a specific component such as the Thumbstick
  *
  * @param props
- * * `id`: `XRControllerGamepadComponentId` - Is the id of the component where content should be placed (e.g. `"a-button"`)
- * * `onPress?`: `Function` - Is an optional callback to receive when the component is pressed
- * * `onRelease?`: `Function` - Is an optional callback to receive when the component is released
- * * `children?`: `ReactNode` - Children to be placed inside the componenent (e.g. visualizing a tooltip over the button...)
+ * #### `id` - `XRControllerGamepadComponentId` Is the id of the component where content should be placed (e.g. `"a-button"`)
+ * #### `onPress?` - `Function` Is an optional callback to receive when the component is pressed
+ * #### `onRelease?` - `Function` Is an optional callback to receive when the component is released
+ * #### `children?` - `ReactNode` Children to be placed inside the componenent (e.g. visualizing a tooltip over the button...)
  *
  * @function
  */
@@ -49,7 +49,7 @@ export const XRControllerComponent = forwardRef<
 })
 
 /**
- * hook for subscribing to a button state change event on the controller
+ * Hook for subscribing to a button state change event on the controller
  * @param id of the button
  * @param onChange callback that gets executed when the state of the button changes
  * @param handedness of the controller
@@ -76,8 +76,8 @@ const LoadXRControllerModelSymbol = Symbol('loadXRControllerModel')
 /**
  * Component for rendering a 3D model for the XRController
  * @param props
- * * `colorWrite` Configures the colorWrite property of the model
- * * `renderOrder` Configures the render order model
+ * #### `colorWrite` - Configures the colorWrite property of the model
+ * #### `renderOrder` - Configures the render order model
  * @function
  */
 export const XRControllerModel = forwardRef<Object3D, XRControllerModelOptions>((options, ref) => {
@@ -104,6 +104,7 @@ const LoadXRControllerLayoutSymbol = Symbol('loadXRControllerLayout')
  * Hook for loading a controller layout, which contains info about the controller model and its buttons / controls.
  * For xr controllers provided through WebXR, the layout is loaded and provided through the controller state automatically.
  * Therefore, this hook's purpose is for building controller demos/tutorials.
+ *
  * @param profileIds
  * @param handedness
  * @param XRControllerLayoutLoaderOptions