Chore docs fixes (#196)

marklundin · web-flow · commit c37364688205 · 2025-07-11T14:24:24.000+01:00
* update install docs

* migrates to playcanvas Grid

* spacing

* Code editor layout fixes

* type fixes

* more type issue fixes
diff --git a/.changeset/easy-cars-beam.md b/.changeset/easy-cars-beam.md
@@ -0,0 +1,5 @@
+---
+"@playcanvas/blocks": patch
+---
+
+Type fixes
diff --git a/packages/blocks/src/splat-viewer/progress-indicator.tsx b/packages/blocks/src/splat-viewer/progress-indicator.tsx
@@ -14,7 +14,7 @@ export function Progress({ variant = "top", className, style }: ProgressProps) {
   const { subscribe } = useAssetViewer();
   const ref = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(true);
-  const timeoutRef = useRef<number>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const unsubscribe = subscribe((progress) => {
diff --git a/packages/blocks/src/splat-viewer/smart-camera.tsx b/packages/blocks/src/splat-viewer/smart-camera.tsx
@@ -75,7 +75,7 @@ export function SmartCamera({
   const entityRef = useRef<PcEntity>(null);
   const { subscribe, isPlaying } = useTimeline();
   const { mode, subscribeCameraReset } = useAssetViewer();
-  const timeoutRef = useRef(0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [shouldUseRenderOnCameraChange, setShouldUseRenderOnCameraChange] = useState(false);
   const app = useApp();
   const initialPoseRef = useRef<PoseType | null>(null);
@@ -85,7 +85,7 @@ export function SmartCamera({
       setShouldUseRenderOnCameraChange(true);
       app.renderNextFrame = true;
     }, 200);
-    return () => clearTimeout(timeoutRef.current);
+    return () => clearTimeout(timeoutRef.current!);
   });
 
   useRenderOnCameraChange(shouldUseRenderOnCameraChange ? entityRef.current : null);
diff --git a/packages/docs/app/[[...mdxPath]]/page.tsx b/packages/docs/app/[[...mdxPath]]/page.tsx
@@ -56,7 +56,7 @@ export default async function Page(props) {
 
       return (
           <div className='absolute top-0 left-0 w-screen h-screen pointer-events-none'>
-              <Playground name={`./${params.mdxPath}.tsx`} code={source} path={metadata.filePath}/>
+              <Playground name={`./${params.mdxPath.join('/')}.tsx`} code={source} path={metadata.filePath}/>
           </div>
       )
     }
diff --git a/packages/docs/app/layout.tsx b/packages/docs/app/layout.tsx
@@ -55,7 +55,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       </Head>
       <body>
         <Layout
-          banner={<Banner storageKey="0.4.2-release"><a href="https://github.com/playcanvas/react/releases/tag/v0.4.2" target="_blank" rel="noreferrer">
+          banner={<Banner storageKey="0.5.0-release"><a href="https://github.com/playcanvas/react/releases/tag/v0.4.2" target="_blank" rel="noreferrer">
             🎉 <b>@playcanvas/react 0.4.2</b> is here! ✨ 
           </a></Banner>}
           navbar={navbar}
diff --git a/packages/docs/components/Grid.tsx b/packages/docs/components/Grid.tsx
@@ -1,9 +1,14 @@
+"use client";
+
+import { Entity } from "@playcanvas/react";
 import { Script } from "@playcanvas/react/components";
-import { Grid as GridScript } from "@playcanvas/react/scripts";
+import { Grid as GridScript } from "playcanvas/scripts/esm/grid.mjs";
 import { FC } from "react";
 
 const Grid: FC = ({ ...props }) => {
-    return <Script script={GridScript} {...props} />
+    return <Entity scale={[1000, 1000, 1000]}>
+        <Script script={GridScript} {...props} />
+    </Entity>
 }
 
 export default Grid;
diff --git a/packages/docs/content/docs/index.mdx b/packages/docs/content/docs/index.mdx
@@ -116,19 +116,51 @@ const App = () => (
 
 ## Getting started
 
-**⚡ The quickest way to get started is to use our [playcanvas-react.app/new](https://playcanvas-react.vercel.app/new) starter template.**
+The quickest way to get started is to run the following
+ 
+<Tabs items={['pnpm', 'npm', 'yarn']}>
+  <Tabs.Tab>
+    ```bash copy
+    pnpm create playcanvas -t react-ts
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    npm create playcanvas@latest -t react-ts
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    yarn create playcanvas -t react-ts
+    ```
+  </Tabs.Tab>
+</Tabs>
 
-For a local npm setup run the following and follow the [Getting Started Guide](/docs/guide/getting-started).
+This will spin up a new project and dev environment and get you up and running in seconds.
 
-```bash copy
-npm install @playcanvas/react playcanvas
-```
+Alternatively try the [playcanvas-react.app/new](https://playcanvas-react.vercel.app/new) Stackblitz starter template.
 
-You can also clone the following starter template.
+### Installing manually
 
-```bash copy
-git clone https://github.com/marklundin/playcanvas-react-template.git
-```
+If you already have a project setup you can install the library via npm.
+
+<Tabs items={['pnpm', 'npm', 'yarn']}>
+  <Tabs.Tab>
+    ```bash copy
+    pnpm add @playcanvas/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    npm install @playcanvas/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    npm install @playcanvas/react
+    ```
+  </Tabs.Tab>
+</Tabs>
 
 ## Ready to build?
 
@@ -160,4 +192,5 @@ To get your IDE up to speed, run the following from the root of your project to
 Developers and studios are already using **@playcanvas/react** in production
 
 - ⚡ [Snap AI](https://ai.snapchat.com) uses **@playcanvas/react** to build real-time 3D interfaces inside their next-gen tools.
+- [GSplat Share](https://gsplat.org/) – Share your splats with optional time-limited and password-protected links.
 - ✨ Your project here? [Submit a PR](https://github.com/playcanvas/react/compare) and we’ll feature it below.
diff --git a/packages/docs/docs-components/Playground.tsx b/packages/docs/docs-components/Playground.tsx
@@ -76,10 +76,10 @@ const PlayGround: FC<PlaygroundProps> = ({
             </div>
             { showCodeEditor && <Suspense>
                 <div 
-                    className='absolute p-0 lg:p-12 pointer-events-auto top-[calc(var(--nextra-navbar-height)+var(--nextra-banner-height))] h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-banner-height))] flex mx-auto max-w-[90rem] xl:p-8'
+                    className='absolute p-0 pointer-events-auto box-border inset-0 flex mx-auto max-w-[90rem] max-h-[calc(100%-var(--nextra-banner-height))] xl:p-8'
                     onMouseMove={e => e.stopPropagation() }
                 >
-                    <div className='w-screen lg:w-lg overflow-hidden rounded-xl shadow-lg opacity-100 hover:opacity-90 focused:opacity-90 transition-opacity duration-300'>
+                    <div className='lg:w-lg m-8 max-h-[calc(100%-8rem)] box-border overflow-hidden rounded-xl shadow-lg opacity-100 hover:opacity-90 focused:opacity-90 transition-opacity duration-300'>
                         <div id='code-editor-header' className='flex justify-between items-center p-2 bg-zinc-800 px-4'>
                             <div id='code-editor-title' className='flex text-xs items-center justify-between font-mono opacity-80 w-full'>
                                 <TerminalIcon className='w-4 h-4' />
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -106,5 +106,8 @@
         "eslint-plugin-require-extensions": "0.1.3",
         "jsdom": "26.1.0",
         "vitest": "3.2.4"
+    },
+    "dependencies": {
+        "dedent": "^1.6.0"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@playcanvas/blocks": patch
 +---
++
 +Type fixes
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ export default async function Page(props) {`
`56`	`56`
`57`	`57`	`return (`
`58`	`58`	`<div className='absolute top-0 left-0 w-screen h-screen pointer-events-none'>`
`59`		- <Playground name={`./${params.mdxPath}.tsx`} code={source} path={metadata.filePath}/>
	`59`	+ <Playground name={`./${params.mdxPath.join('/')}.tsx`} code={source} path={metadata.filePath}/>
`60`	`60`	`</div>`
`61`	`61`	`)`
`62`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -106,5 +106,8 @@`
`106`	`106`	`"eslint-plugin-require-extensions": "0.1.3",`
`107`	`107`	`"jsdom": "26.1.0",`
`108`	`108`	`"vitest": "3.2.4"`
	`109`	`+ },`
	`110`	`+ "dependencies": {`
	`111`	`+ "dedent": "^1.6.0"`
`109`	`112`	`}`
`110`	`113`	`}`