diff --git a/packages/docs/app/[[...mdxPath]]/page.tsx b/packages/docs/app/[[...mdxPath]]/page.tsx new file mode 100644 index 00000000..6be1feae --- /dev/null +++ b/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 ( +
+ +
+ ) + } + + return ( + + + + ) +} \ No newline at end of file diff --git a/packages/docs/src/app/globals.css b/packages/docs/app/globals.css similarity index 100% rename from packages/docs/src/app/globals.css rename to packages/docs/app/globals.css diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/app/layout.tsx similarity index 95% rename from packages/docs/src/app/layout.tsx rename to packages/docs/app/layout.tsx index 16e009a8..c94e78e0 100644 --- a/packages/docs/src/app/layout.tsx +++ b/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. } 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 diff --git a/packages/docs/client-mdx-components.js b/packages/docs/client-mdx-components.js index 2459b5c9..e3d6e944 100644 --- a/packages/docs/client-mdx-components.js +++ b/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' diff --git a/packages/docs/src/components/AutoRotate.tsx b/packages/docs/components/AutoRotate.tsx similarity index 100% rename from packages/docs/src/components/AutoRotate.tsx rename to packages/docs/components/AutoRotate.tsx diff --git a/packages/docs/src/components/EnvAtlas.tsx b/packages/docs/components/EnvAtlas.tsx similarity index 100% rename from packages/docs/src/components/EnvAtlas.tsx rename to packages/docs/components/EnvAtlas.tsx diff --git a/packages/docs/src/components/Glb.tsx b/packages/docs/components/Glb.tsx similarity index 100% rename from packages/docs/src/components/Glb.tsx rename to packages/docs/components/Glb.tsx diff --git a/packages/docs/src/components/Grid.tsx b/packages/docs/components/Grid.tsx similarity index 100% rename from packages/docs/src/components/Grid.tsx rename to packages/docs/components/Grid.tsx diff --git a/packages/docs/src/components/LoadingSpinner.jsx b/packages/docs/components/LoadingSpinner.jsx similarity index 100% rename from packages/docs/src/components/LoadingSpinner.jsx rename to packages/docs/components/LoadingSpinner.jsx diff --git a/packages/docs/src/components/MotionEntity.tsx b/packages/docs/components/MotionEntity.tsx similarity index 100% rename from packages/docs/src/components/MotionEntity.tsx rename to packages/docs/components/MotionEntity.tsx diff --git a/packages/docs/src/components/PostEffects.tsx b/packages/docs/components/PostEffects.tsx similarity index 100% rename from packages/docs/src/components/PostEffects.tsx rename to packages/docs/components/PostEffects.tsx diff --git a/packages/docs/src/components/ShadowCatcher.tsx b/packages/docs/components/ShadowCatcher.tsx similarity index 100% rename from packages/docs/src/components/ShadowCatcher.tsx rename to packages/docs/components/ShadowCatcher.tsx diff --git a/packages/docs/src/components/hooks/post-controls.tsx b/packages/docs/components/hooks/post-controls.tsx similarity index 100% rename from packages/docs/src/components/hooks/post-controls.tsx rename to packages/docs/components/hooks/post-controls.tsx diff --git a/packages/docs/src/components/hooks/use-asset.ts b/packages/docs/components/hooks/use-asset.ts similarity index 100% rename from packages/docs/src/components/hooks/use-asset.ts rename to packages/docs/components/hooks/use-asset.ts diff --git a/packages/docs/content/_meta.tsx b/packages/docs/content/_meta.tsx new file mode 100644 index 00000000..496f80e9 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/docs/content/docs/_meta.tsx b/packages/docs/content/docs/_meta.tsx new file mode 100644 index 00000000..88a0d8a9 --- /dev/null +++ b/packages/docs/content/docs/_meta.tsx @@ -0,0 +1,10 @@ + +import type { MetaRecord } from 'nextra' + +const meta: MetaRecord = { + installation: {}, + guide: {}, + api: {}, +} + +export default meta \ No newline at end of file diff --git a/packages/docs/src/app/docs/api/application/page.mdx b/packages/docs/content/docs/api/application.mdx similarity index 100% rename from packages/docs/src/app/docs/api/application/page.mdx rename to packages/docs/content/docs/api/application.mdx diff --git a/packages/docs/src/app/docs/api/components/align/page.mdx b/packages/docs/content/docs/api/components/align.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/align/page.mdx rename to packages/docs/content/docs/api/components/align.mdx diff --git a/packages/docs/src/app/docs/api/components/anim/page.mdx b/packages/docs/content/docs/api/components/anim.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/anim/page.mdx rename to packages/docs/content/docs/api/components/anim.mdx diff --git a/packages/docs/src/app/docs/api/components/camera/page.mdx b/packages/docs/content/docs/api/components/camera.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/camera/page.mdx rename to packages/docs/content/docs/api/components/camera.mdx diff --git a/packages/docs/src/app/docs/api/components/collision/page.mdx b/packages/docs/content/docs/api/components/collision.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/collision/page.mdx rename to packages/docs/content/docs/api/components/collision.mdx diff --git a/packages/docs/src/app/docs/api/components/envatlas/page.mdx b/packages/docs/content/docs/api/components/envatlas.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/envatlas/page.mdx rename to packages/docs/content/docs/api/components/envatlas.mdx diff --git a/packages/docs/src/app/docs/api/components/light/page.mdx b/packages/docs/content/docs/api/components/light.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/light/page.mdx rename to packages/docs/content/docs/api/components/light.mdx diff --git a/packages/docs/src/app/docs/api/components/render/page.mdx b/packages/docs/content/docs/api/components/render.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/render/page.mdx rename to packages/docs/content/docs/api/components/render.mdx diff --git a/packages/docs/src/app/docs/api/components/rigidbody/page.mdx b/packages/docs/content/docs/api/components/rigidbody.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/rigidbody/page.mdx rename to packages/docs/content/docs/api/components/rigidbody.mdx diff --git a/packages/docs/src/app/docs/api/components/scripts/page.mdx b/packages/docs/content/docs/api/components/scripts.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/scripts/page.mdx rename to packages/docs/content/docs/api/components/scripts.mdx diff --git a/packages/docs/src/app/docs/api/components/splat/page.mdx b/packages/docs/content/docs/api/components/splat.mdx similarity index 100% rename from packages/docs/src/app/docs/api/components/splat/page.mdx rename to packages/docs/content/docs/api/components/splat.mdx diff --git a/packages/docs/src/app/docs/api/entity/page.mdx b/packages/docs/content/docs/api/entity.mdx similarity index 100% rename from packages/docs/src/app/docs/api/entity/page.mdx rename to packages/docs/content/docs/api/entity.mdx diff --git a/packages/docs/src/app/docs/api/hooks/page.mdx b/packages/docs/content/docs/api/hooks.mdx similarity index 100% rename from packages/docs/src/app/docs/api/hooks/page.mdx rename to packages/docs/content/docs/api/hooks.mdx diff --git a/packages/docs/src/app/docs/api/hooks/assets/page.mdx b/packages/docs/content/docs/api/hooks/use-asset.mdx similarity index 100% rename from packages/docs/src/app/docs/api/hooks/assets/page.mdx rename to packages/docs/content/docs/api/hooks/use-asset.mdx diff --git a/packages/docs/src/app/docs/api/hooks/use-material/page.mdx b/packages/docs/content/docs/api/hooks/use-material.mdx similarity index 100% rename from packages/docs/src/app/docs/api/hooks/use-material/page.mdx rename to packages/docs/content/docs/api/hooks/use-material.mdx diff --git a/packages/docs/src/app/docs/api/utils/fetch-asset/page.mdx b/packages/docs/content/docs/api/utils/fetch-asset.mdx similarity index 100% rename from packages/docs/src/app/docs/api/utils/fetch-asset/page.mdx rename to packages/docs/content/docs/api/utils/fetch-asset.mdx diff --git a/packages/docs/src/app/docs/guide/getting-started/page.mdx b/packages/docs/content/docs/guide/getting-started.mdx similarity index 100% rename from packages/docs/src/app/docs/guide/getting-started/page.mdx rename to packages/docs/content/docs/guide/getting-started.mdx diff --git a/packages/docs/src/app/docs/guide/loading-assets/page.mdx b/packages/docs/content/docs/guide/loading-assets.mdx similarity index 99% rename from packages/docs/src/app/docs/guide/loading-assets/page.mdx rename to packages/docs/content/docs/guide/loading-assets.mdx index ccdb3acc..5f9b80e7 100644 --- a/packages/docs/src/app/docs/guide/loading-assets/page.mdx +++ b/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 diff --git a/packages/docs/src/app/docs/page.mdx b/packages/docs/content/docs/index.mdx similarity index 97% rename from packages/docs/src/app/docs/page.mdx rename to packages/docs/content/docs/index.mdx index dad4cdaa..382c955a 100644 --- a/packages/docs/src/app/docs/page.mdx +++ b/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 diff --git a/packages/docs/src/app/docs/installation/page.mdx b/packages/docs/content/docs/installation.mdx similarity index 100% rename from packages/docs/src/app/docs/installation/page.mdx rename to packages/docs/content/docs/installation.mdx diff --git a/packages/docs/content/examples/_meta.tsx b/packages/docs/content/examples/_meta.tsx new file mode 100644 index 00000000..d21b8b58 --- /dev/null +++ b/packages/docs/content/examples/_meta.tsx @@ -0,0 +1,11 @@ +import type { MetaRecord } from 'nextra' + +const meta: MetaRecord = { + '*': { + theme: { + footer: false, + }, + }, +} + +export default meta \ No newline at end of file diff --git a/packages/docs/src/content/hello-world.mdx b/packages/docs/content/examples/hello-world.mdx similarity index 91% rename from packages/docs/src/content/hello-world.mdx rename to packages/docs/content/examples/hello-world.mdx index 2cef7186..72e89a9e 100644 --- a/packages/docs/src/content/hello-world.mdx +++ b/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 {/* Add an environment atlas to the scene */} @@ -28,7 +26,7 @@ export const HelloWorld = () => { {/* Create the right box entity */} - + diff --git a/packages/docs/content/examples/hello-world.meta.json b/packages/docs/content/examples/hello-world.meta.json new file mode 100644 index 00000000..4a52258c --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/load-a-3D-model.mdx b/packages/docs/content/examples/load-a-3D-model.mdx similarity index 100% rename from packages/docs/src/content/load-a-3D-model.mdx rename to packages/docs/content/examples/load-a-3D-model.mdx diff --git a/packages/docs/content/examples/load-a-3D-model.meta.json b/packages/docs/content/examples/load-a-3D-model.meta.json new file mode 100644 index 00000000..b9fd522d --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/model-viewer.mdx b/packages/docs/content/examples/model-viewer.mdx similarity index 100% rename from packages/docs/src/content/model-viewer.mdx rename to packages/docs/content/examples/model-viewer.mdx diff --git a/packages/docs/content/examples/model-viewer.meta.json b/packages/docs/content/examples/model-viewer.meta.json new file mode 100644 index 00000000..7faf73f1 --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/motion.mdx b/packages/docs/content/examples/motion.mdx similarity index 100% rename from packages/docs/src/content/motion.mdx rename to packages/docs/content/examples/motion.mdx diff --git a/packages/docs/content/examples/motion.meta.json b/packages/docs/content/examples/motion.meta.json new file mode 100644 index 00000000..8ace4673 --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/physics.mdx b/packages/docs/content/examples/physics.mdx similarity index 100% rename from packages/docs/src/content/physics.mdx rename to packages/docs/content/examples/physics.mdx diff --git a/packages/docs/content/examples/physics.meta.json b/packages/docs/content/examples/physics.meta.json new file mode 100644 index 00000000..492a608b --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/pointer-events.mdx b/packages/docs/content/examples/pointer-events.mdx similarity index 100% rename from packages/docs/src/content/pointer-events.mdx rename to packages/docs/content/examples/pointer-events.mdx diff --git a/packages/docs/content/examples/pointer-events.meta.json b/packages/docs/content/examples/pointer-events.meta.json new file mode 100644 index 00000000..723ef4ce --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/primitives.mdx b/packages/docs/content/examples/primitives.mdx similarity index 100% rename from packages/docs/src/content/primitives.mdx rename to packages/docs/content/examples/primitives.mdx diff --git a/packages/docs/content/examples/primitives.meta.json b/packages/docs/content/examples/primitives.meta.json new file mode 100644 index 00000000..dcca435d --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/scripting.mdx b/packages/docs/content/examples/scripting.mdx similarity index 100% rename from packages/docs/src/content/scripting.mdx rename to packages/docs/content/examples/scripting.mdx diff --git a/packages/docs/content/examples/scripting.meta.json b/packages/docs/content/examples/scripting.meta.json new file mode 100644 index 00000000..904fb45f --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/content/splats.mdx b/packages/docs/content/examples/splats.mdx similarity index 100% rename from packages/docs/src/content/splats.mdx rename to packages/docs/content/examples/splats.mdx diff --git a/packages/docs/content/examples/splats.meta.json b/packages/docs/content/examples/splats.meta.json new file mode 100644 index 00000000..9f927702 --- /dev/null +++ b/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 + } + ] + } +} \ No newline at end of file diff --git a/packages/docs/src/app/faq/page.mdx b/packages/docs/content/faq.mdx similarity index 100% rename from packages/docs/src/app/faq/page.mdx rename to packages/docs/content/faq.mdx diff --git a/packages/docs/src/docs-components/Editor.tsx b/packages/docs/docs-components/Editor.tsx similarity index 98% rename from packages/docs/src/docs-components/Editor.tsx rename to packages/docs/docs-components/Editor.tsx index 17aca983..9ba57c09 100644 --- a/packages/docs/src/docs-components/Editor.tsx +++ b/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"; diff --git a/packages/docs/src/docs-components/Icons.tsx b/packages/docs/docs-components/Icons.tsx similarity index 100% rename from packages/docs/src/docs-components/Icons.tsx rename to packages/docs/docs-components/Icons.tsx diff --git a/packages/docs/src/docs-components/OpenInStackblitz.tsx b/packages/docs/docs-components/OpenInStackblitz.tsx similarity index 100% rename from packages/docs/src/docs-components/OpenInStackblitz.tsx rename to packages/docs/docs-components/OpenInStackblitz.tsx diff --git a/packages/docs/src/docs-components/Playground.tsx b/packages/docs/docs-components/Playground.tsx similarity index 100% rename from packages/docs/src/docs-components/Playground.tsx rename to packages/docs/docs-components/Playground.tsx diff --git a/packages/docs/src/docs-components/ReactQueryProvider.tsx b/packages/docs/docs-components/ReactQueryProvider.tsx similarity index 100% rename from packages/docs/src/docs-components/ReactQueryProvider.tsx rename to packages/docs/docs-components/ReactQueryProvider.tsx diff --git a/packages/docs/src/docs-components/code-error-boundary.tsx b/packages/docs/docs-components/code-error-boundary.tsx similarity index 100% rename from packages/docs/src/docs-components/code-error-boundary.tsx rename to packages/docs/docs-components/code-error-boundary.tsx diff --git a/packages/docs/src/docs-components/code-sandbox.tsx b/packages/docs/docs-components/code-sandbox.tsx similarity index 100% rename from packages/docs/src/docs-components/code-sandbox.tsx rename to packages/docs/docs-components/code-sandbox.tsx diff --git a/packages/docs/src/docs-components/utils/file-utils.ts b/packages/docs/docs-components/utils/file-utils.ts similarity index 100% rename from packages/docs/src/docs-components/utils/file-utils.ts rename to packages/docs/docs-components/utils/file-utils.ts diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js index f5feb847..0a0d7a8a 100644 --- a/packages/docs/next.config.js +++ b/packages/docs/next.config.js @@ -13,31 +13,16 @@ const withNextra = nextra({ search: { codeblocks: false }, - contentDirBasePath: '/examples', }) export default withNextra({ reactStrictMode: true, transpilePackages: ['next-mdx-remote-client', 'playcanvas'], - async headers() { - return [ - { - // matching all API routes - source: "/", - headers: [ - { key: "Access-Control-Allow-Credentials", value: "true" }, - { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin - { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" }, - { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }, - ] - } - ] - }, redirects: async () => [ { - source: '/examples', - destination: '/examples/model-viewer', - permanent: true + source: '/examples', + destination: '/examples/model-viewer', + permanent: true }, { source: '/', diff --git a/packages/docs/src/app/_meta.global.ts b/packages/docs/src/app/_meta.global.ts deleted file mode 100644 index 9db65c64..00000000 --- a/packages/docs/src/app/_meta.global.ts +++ /dev/null @@ -1,90 +0,0 @@ -const examples = { - "Basic" : { - type: 'separator', - }, - 'hello-world': { - href: '/examples/hello-world' - }, - 'load-a-3D-model' : { - title : 'Load a 3D model', - href: '/examples/load-a-3D-model' - }, - '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' - }, -} - - -export default { - docs: { - type: 'page', - title: 'Docs', - items: { - installation : 'Installation', - guide : { - items: { - 'getting-started' : '', - 'loading-assets' : '' - }, - }, - api: { - items: { - 'application' : '', - 'entity' : '', - 'components' : { - items: { - 'camera' : '', - 'render' : '', - 'light' : '' - }, - }, - 'utils' : '', - }, - }, - }, - }, - menuExample: { - title: 'Examples', - type: 'menu', - items: examples - }, - examples: { - title: 'Examples', - theme: { - footer: false - }, - items: { - ...examples, - 'splats': { - } - }, - }, - '---': { - type: 'separator', - title: 'More', - }, - faq: '', - github_link: { - title: 'PlayCanvas Docs', - href: 'https://developer.playcanvas.com' - }, -} \ No newline at end of file diff --git a/packages/docs/src/app/api/codesandbox/route.ts b/packages/docs/src/app/api/codesandbox/route.ts deleted file mode 100644 index 3bae36e1..00000000 --- a/packages/docs/src/app/api/codesandbox/route.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { filePathRegex, readFiles } from "@/docs-components/utils/file-utils"; -import path from "path"; -import fs from 'fs/promises'; - - -export async function POST(request: Request) { - try { - // Get template and content from request body - const { template, content, entry } = await request.json(); - - let error = null; - if(!template) { - error = '`template` is required'; - } - - if(!entry && !content) { - error = '`entry` or `content` is required'; - } - - if(error) { - return new Response(JSON.stringify({ error }), { - status: 400, - headers: { 'Content-Type': 'application/json' }, - }); - } - - // Base directory for the files - const baseDir = path.resolve(path.join(process.cwd(), 'src/templates', template)); - const componentDir = path.resolve(path.join(process.cwd(), 'src/components/')); - - // Get all files starting from the base directory - let files = await readFiles(baseDir); - const components = await readFiles(componentDir, 'src/components'); - - // Merge the files and components - files = { ...files, ...components }; - - files["/src/App.jsx"] = content - ? { content } // If content is provided, use it - : { content : await fs.readFile(path.resolve(path.join(process.cwd(), entry)), 'utf-8') }; // If entry is provided, use it's content - - // Replace the baseUrl in the content - const baseUrl = process.env.VERCEL_URL ?? 'https://playcanvas-react.vercel.app'; - files["/src/App.jsx"].content = files["/src/App.jsx"].content.replace( - filePathRegex, `$1${baseUrl}/$2`) - - files["/jsconfig.json"] = { - content: { - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["src/*"], - "@/components/*": ["src/components/*"], - } - } - } - }; - - // Call the CodeSandbox Define API - const response = await fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", { - method: "POST", - headers: { - "Content-Type": "application/json", - Accept: "application/json" - }, - body: JSON.stringify({ files }) - }); - - if (!response.ok) { - throw new Error(`CodeSandbox API returned ${response.status}: ${await response.text()}`); - } - - const data = await response.json(); - - if (!data.sandbox_id) { - throw new Error('Invalid response from CodeSandbox API'); - } - - return new Response( - `https://codesandbox.io/s/${data.sandbox_id}?file=%2Fsrc%2FApp.jsx` - ); - - } catch (error) { - return new Response(JSON.stringify({ error: error.message }), { - status: 500, - headers: { 'Content-Type': 'application/json' }, - }); - } -} \ No newline at end of file diff --git a/packages/docs/src/app/api/stackblitz/route.tsx b/packages/docs/src/app/api/stackblitz/route.tsx deleted file mode 100644 index 308e92fc..00000000 --- a/packages/docs/src/app/api/stackblitz/route.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { readFiles, filePathRegex } from "@/docs-components/utils/file-utils"; -import fs from 'fs/promises'; -import path from 'path'; - -export async function POST(request: Request) { - try { - // Get template and content from request body - const { template, content, entry } = await request.json(); - - let error = null; - if(!template) { - error = '`template` is required'; - } - - if(!entry && !content) { - error = '`entry` or `content` is required'; - } - - if(error) { - return new Response(JSON.stringify({ error }), { - status: 400, - headers: { 'Content-Type': 'application/json' }, - }); - } - - // Base directory for the files - const baseDir = path.resolve(path.join(process.cwd(), 'src/templates', template)); - const componentDir = path.resolve(path.join(process.cwd(), 'src/components/')); - - // Get all files starting from the base directory - let files = await readFiles(baseDir, '', false); - const components = await readFiles(componentDir, 'src/components', false); - - // Merge the files and components - files = { ...files, ...components }; - - files["src/App.jsx"] = content - ? content // If content is provided, use it - : await fs.readFile(path.resolve(path.join(process.cwd(), entry)), 'utf-8'); // If entry is provided, use it's content - - // Replace the baseUrl in the content - const baseUrl = process.env.VERCEL_URL ?? 'https://playcanvas-react.vercel.app'; - files["src/App.jsx"] = files["src/App.jsx"].replace( - filePathRegex, `$1${baseUrl}/$2`) - - files["jsconfig.json"] = JSON.stringify({ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["src/*"], - "@/components/*": ["src/components/*"], - } - } - }, null, 2); - - const pkJson = files["package.json"]; - delete files["package.json"]; - - // return the files as json - return new Response(JSON.stringify({ files, pkJson }), { - status: 200, - headers: { 'Content-Type': 'application/json' }, - }); - - } catch (error) { - return new Response(JSON.stringify({ error: error.message }), { - status: 500, - headers: { 'Content-Type': 'application/json' }, - }); - } -} \ No newline at end of file diff --git a/packages/docs/src/app/examples/[[...mdxPath]]/page.tsx b/packages/docs/src/app/examples/[[...mdxPath]]/page.tsx deleted file mode 100644 index f32a2917..00000000 --- a/packages/docs/src/app/examples/[[...mdxPath]]/page.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { generateStaticParamsFor, importPage } from 'nextra/pages' -import { readFile } from 'node:fs/promises' -import path from 'node:path' -import Playground from '@/docs-components/Playground' - -export const generateStaticParams = generateStaticParamsFor('mdxPath') - -export async function generateMetadata(props: PageProps) { - const params = await props.params - - try { - // Try to import the meta file - const { default: metadata } = await import(`@/content/${params.mdxPath}.meta.tsx`) - return metadata; - } catch { - // If the meta file is not found, use the default metadata - const { metadata } = await importPage(params.mdxPath) - return metadata - } -} - -interface PageProps { - params: Promise< { - mdxPath?: string[] - }> -} - -export default async function Page(props: PageProps) { - const params = await props.params; - const { metadata } = await importPage(params.mdxPath) - - const source = await readFile( - path.join(process.cwd(), 'src/content', `${params.mdxPath}.mdx`), - 'utf-8' - ) - - return ( -
- -
- ) -} \ No newline at end of file diff --git a/packages/docs/src/content/hello-world.meta.tsx b/packages/docs/src/content/hello-world.meta.tsx deleted file mode 100644 index 8c97c0db..00000000 --- a/packages/docs/src/content/hello-world.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/load-a-3D-model.meta.tsx b/packages/docs/src/content/load-a-3D-model.meta.tsx deleted file mode 100644 index e5ea1a10..00000000 --- a/packages/docs/src/content/load-a-3D-model.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/model-viewer.meta.tsx b/packages/docs/src/content/model-viewer.meta.tsx deleted file mode 100644 index 9b7dfc5f..00000000 --- a/packages/docs/src/content/model-viewer.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/motion.meta.tsx b/packages/docs/src/content/motion.meta.tsx deleted file mode 100644 index 7e11aede..00000000 --- a/packages/docs/src/content/motion.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/physics.meta.tsx b/packages/docs/src/content/physics.meta.tsx deleted file mode 100644 index 764af5c4..00000000 --- a/packages/docs/src/content/physics.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/pointer-events.meta.tsx b/packages/docs/src/content/pointer-events.meta.tsx deleted file mode 100644 index ba0e5c5e..00000000 --- a/packages/docs/src/content/pointer-events.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/primitives.meta.tsx b/packages/docs/src/content/primitives.meta.tsx deleted file mode 100644 index d09dc0f6..00000000 --- a/packages/docs/src/content/primitives.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/scripting.meta.tsx b/packages/docs/src/content/scripting.meta.tsx deleted file mode 100644 index 9937f738..00000000 --- a/packages/docs/src/content/scripting.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - title: 'Scripting ⚙️', - description: 'Learn how to use scripting in your scene.', - openGraph: { - title: 'Scripting Example ⚙️', - description: 'Learn how to use scripting in your scene in @playcanvas/react', - images: [ - { - url: 'https://playcanvas-react.vercel.app/pc_react-og.png', - width: 1200, - height: 630, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/content/splats.meta.tsx b/packages/docs/src/content/splats.meta.tsx deleted file mode 100644 index e4666522..00000000 --- a/packages/docs/src/content/splats.meta.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default { - 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, - }, - ], - }, -} \ No newline at end of file diff --git a/packages/docs/src/templates/HomePageExample.jsx b/packages/docs/templates/HomePageExample.jsx similarity index 77% rename from packages/docs/src/templates/HomePageExample.jsx rename to packages/docs/templates/HomePageExample.jsx index b1da3919..db0b26df 100644 --- a/packages/docs/src/templates/HomePageExample.jsx +++ b/packages/docs/templates/HomePageExample.jsx @@ -4,11 +4,11 @@ import { Container, Entity } from '@playcanvas/react'; import { Camera, EnvAtlas } from '@playcanvas/react/components'; import { OrbitControls } from '@playcanvas/react/scripts'; -import { useEnvAtlas, useModel } from '@/components/hooks/use-asset'; -import Grid from '@/components/Grid'; -import AutoRotate from '@/components/AutoRotate'; -import { StaticPostEffects } from '@/components/PostEffects'; -import ShadowCatcher from '@/components/ShadowCatcher'; +import { useEnvAtlas, useModel } from '@components/hooks/use-asset'; +import Grid from '@components/Grid'; +import AutoRotate from '@components/AutoRotate'; +import { StaticPostEffects } from '@components/PostEffects'; +import ShadowCatcher from '@components/ShadowCatcher'; const Example = () => { diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json index 50e03841..4d956f53 100644 --- a/packages/docs/tsconfig.json +++ b/packages/docs/tsconfig.json @@ -21,10 +21,11 @@ "@/*": [ "./src/*" ], - "@components/*": ["./src/components/*"], - "@docs-components/*": ["./src/docs-components/*"], - "@templates/*": ["./src/templates/*"], - "@content/*": ["./src/content/*"] + "@components/*": ["./components/*"], + "@docs-components/*": ["./docs-components/*"], + "@templates/*": ["./templates/*"], + "@content/*": ["./content/*"], + "@client-mdx-components": ["./client-mdx-components.js"] }, "plugins": [ { diff --git a/packages/lib/packages/lib/test/utils/index.tsx b/packages/lib/packages/lib/test/utils/index.tsx deleted file mode 100644 index e69de29b..00000000