Refactor documentation structure and remove unused components

packages/docs/app/[[...mdxPath]]/page.tsx

@@ -0,0 +1,63 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { useMDXComponents as getMDXComponents } from '../../mdx-components'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import Playground from '@docs-components/Playground'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+const EXAMPLES_PATH = 'examples'
+
+export async function generateMetadata(props) {
+  const params = await props.params
+
+  const isExamples = params.mdxPath[0] === EXAMPLES_PATH;
+
+  if (isExamples) {
+    const fileName = params.mdxPath.slice(-1)[0];
+    const contentPath = params.mdxPath.slice(0, 1);
+
+    const source = await readFile(
+      path.join(process.cwd(), 'content', ...contentPath, `${fileName}.meta.json`),
+      'utf-8'
+    )
+
+    // We can't dynamically import with the full path. An error is thrown because the import is too dynamic.
+    // const metaPath = path.join('@content', 'examples', `${fileName}.meta.tsx`)
+    // const { default: metadata } = await import(metaPath);
+    return JSON.parse(source);
+  }
+
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+const Wrapper = getMDXComponents().wrapper
+
+export default async function Page(props) {
+  const params = await props.params
+
+  const { default: MDXContent, toc, metadata } = await importPage(params.mdxPath)
+  const isExamples = params.mdxPath[0] === EXAMPLES_PATH;
+
+  if (isExamples) {
+    const contentPath = params.mdxPath.slice(0, 1);
+    const fileName = params.mdxPath.slice(-1)[0];
+
+    const source = await readFile(
+        path.join(process.cwd(), 'content', ...contentPath, `${fileName}.mdx`),
+        'utf-8'
+    )
+
+    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}/>
+        </div>
+    )
+  }
+
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}

packages/docs/src/app/layout.tsx → packages/docs/app/layout.tsx

@@ -6,7 +6,7 @@ import { Footer, Layout, Navbar } from 'nextra-theme-docs'
 import { Banner, Head } from 'nextra/components'
 import { getPageMap } from 'nextra/page-map'
 import { CodeXml } from 'lucide-react'
-import ReactQueryProvider from '@/docs-components/ReactQueryProvider'
+import ReactQueryProvider from '@docs-components/ReactQueryProvider'
 
 export const metadata = {
   metadataBase: new URL('https://playcanvas.com'),
@@ -61,7 +61,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             MIT {new Date().getFullYear()} ©{' '} PlayCanvas.
           </Footer>}
           editLink="Edit this page on GitHub"
-          docsRepositoryBase="https://github.com/playcanvas/react/tree/main/packages/docs/"
+          docsRepositoryBase="https://github.com/playcanvas/react/tree/main/packages/docs"
           sidebar={{ 
             defaultMenuCollapseLevel: 1,
             toggleButton: true

packages/docs/client-mdx-components.js

@@ -2,7 +2,7 @@ import { Application, Entity } from '@playcanvas/react'
 import { OrbitControls } from '@playcanvas/react/scripts'
 import { Align, Light, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody } from '@playcanvas/react/components'
 
-import ReactQueryProvider from '@/docs-components/ReactQueryProvider'
+import ReactQueryProvider from '@docs-components/ReactQueryProvider'
 
 import EnvAtlasComponent from '@components/EnvAtlas'
 import Grid from '@components/Grid'

packages/docs/content/_meta.tsx

@@ -0,0 +1,65 @@
+import type { MetaRecord } from 'nextra'
+
+// examples list
+const examplesList = {
+  // "Basic" : {
+  //   type: 'separator',
+  // },
+  'hello-world': {
+    title: 'Hello World',
+    href: '/examples/hello-world'
+  },
+  'load-a-3D-model' : {
+    title : 'Load a 3D model',
+    href: '/examples/load-a-3D-model'
+  },
+  'primitives' : {
+    title: 'Primitives',
+    href: '/examples/primitives'
+  },
+  'pointer-events' : {
+    href: '/examples/pointer-events'
+  },
+  // "Advanced" : {
+  //   type: 'separator',
+  // },
+  'model-viewer' : {
+    href: '/examples/model-viewer'
+  },
+  'splats' : {
+    title: "Splat Viewer",
+    href: '/examples/splats'
+  },
+  'physics' : {
+    href: '/examples/physics'
+  },
+  'motion' : {
+    href: '/examples/motion'
+  },
+}
+
+const meta: MetaRecord = {
+  docs: {
+    title: 'Docs',
+    type: 'page',
+    theme: {
+        sidebar: true,
+    }
+  },
+  examples: {
+    title: 'Examples',
+    type: 'menu',
+    items: examplesList
+  },
+  '': {
+    type: 'separator',
+  },
+  faq: {},
+  github_link: {
+    title: 'PlayCanvas Docs',
+    href: 'https://developer.playcanvas.com'
+  },
+}
+
+
+export default meta;

packages/docs/content/docs/_meta.tsx

@@ -0,0 +1,10 @@
+
+import type { MetaRecord } from 'nextra'
+
+const meta: MetaRecord = {
+    installation: {},
+    guide: {},
+    api: {},
+}
+
+export default meta

packages/docs/src/app/docs/guide/loading-assets/page.mdx → packages/docs/content/docs/guide/loading-assets.mdx

@@ -1,5 +1,5 @@
 ---
-title: Loading Asset
+title: Loading Assets
 description: Learn how to load assets in @playcanvas/react
 openGraph:
     title: playcanvas/react - Loading Assets

packages/docs/src/app/docs/page.mdx → packages/docs/content/docs/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: playcanvas/react
+title: Docs
 description: A thin react library for for creating 3D apps that supports pointer events, physics, gaussian splats, and more straight out of the box.
 openGraph:
     title: playcanvas/react docs
@@ -11,9 +11,9 @@ openGraph:
 ---
 
 import { Cards } from 'nextra/components'
-import { Icons } from '@/docs-components/Icons'
+import { Icons } from '@docs-components/Icons'
 import { Terminal } from 'lucide-react'
-import Example from '@/templates/HomePageExample'
+import Example from '@templates/HomePageExample'
 
 ## @playcanvas/react
 

packages/docs/content/examples/_meta.tsx

@@ -0,0 +1,11 @@
+import type { MetaRecord } from 'nextra'
+
+const meta: MetaRecord = {
+    '*': {
+        theme: {
+            footer: false,
+        },
+    },
+}
+
+export default meta

packages/docs/src/content/hello-world.mdx → packages/docs/content/examples/hello-world.mdx

@@ -5,8 +5,6 @@ export const HelloWorld = () => {
      * We're just going to render a box with a camera, some lighting and a shadow catcher
      */
 
-    // const material = useMaterial({ diffuse: 'gray' })
-
     return <Entity>
 
         {/* Add an environment atlas to the scene */}
@@ -28,7 +26,7 @@ export const HelloWorld = () => {
 
         {/* Create the right box entity */}
         <Entity position={[0, 0.5, 0]}>
-            <Render type='box'  />
+            <Render type='box' />
         </Entity>
 
     </Entity>

packages/docs/content/examples/hello-world.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Hello World Example 🚀",
+    "description": "Learn how to create a simple 3D scene in @playcanvas/react",
+    "openGraph": {
+        "title": "Hello World Example 🚀",
+        "description": "Learn how to create a simple 3D scene in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+}

packages/docs/content/examples/load-a-3D-model.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Animation 🚀",
+    "description": "Learn how to play animations in 3D models.",
+    "openGraph": {
+        "title": "Animation Example 🚀",
+        "description": "Learn how to play animations in 3D models in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/model-viewer.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Model Viewer 🚀",
+    "description": "Learn how to load and render a simple 3D model.",
+    "openGraph": {
+        "title": "Model Viewer Example 🚀",
+        "description": "Learn how to load and render a simple 3D model in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/motion.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Motion Example 💫",
+    "description": "Learn how to add motion to your 3D models using Framer Motion.",
+    "openGraph": {
+        "title": "Motion Example 💫",
+        "description": "Learn how to add motion to your 3D models using Framer Motion in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/physics.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Physics Example ⚡",
+    "description": "Easily add declarative physics to your 3D models.",
+    "openGraph": {
+        "title": "Physics Example ⚡",
+        "description": "Easily add declarative physics to your 3D models in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/pointer-events.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Pointer Events Example 👆🏼",
+    "description": "Learn how to handle pointer events in your scene.",
+    "openGraph": {
+        "title": "Pointer Events Example 👆🏼",
+        "description": "Learn how to handle pointer events in your scene in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/primitives.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Primitives Example ⚪",
+    "description": "Learn how to add simple 3D primtive shapes to your scene.",
+    "openGraph": {
+        "title": "Primitives Example ⚪",
+        "description": "Learn how to add simple 3D primtive shapes to your scene in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/scripting.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Scripting Example 🎮",
+    "description": "Learn how to add custom scripts to your 3D models.",
+    "openGraph": {
+        "title": "Scripting Example 🎮",
+        "description": "Learn how to add custom scripts to your 3D models in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/content/examples/splats.meta.json

@@ -0,0 +1,15 @@
+{
+    "title": "Gaussian Splats 💀",
+    "description": "Learn how to add Gaussian Splats to your scene.",
+    "openGraph": {
+        "title": "Gaussian Splats Example 💀",
+        "description": "Learn how to add Gaussian Splats to your scene in @playcanvas/react",
+        "images": [
+            { 
+                "url": "https://playcanvas-react.vercel.app/pc_react-og.png",
+                "width": 1200,
+                "height": 630
+            }
+        ]
+    }
+} 

packages/docs/src/docs-components/Editor.tsx → packages/docs/docs-components/Editor.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useEffect, createContext, useContext, useMemo, useRef } from "react";
 import MonacoEditor from '@monaco-editor/react';
 import { ErrorBoundary } from "./code-error-boundary";
-import { defaultComponents } from "@/../client-mdx-components";
+import { defaultComponents } from "@client-mdx-components";
 import { serialize } from "next-mdx-remote-client/serialize";
 import { MDXClient, type SerializeResult } from "next-mdx-remote-client/csr";
 import ActualMonacoEditor, { editor } from "monaco-editor";