Added SplatViewer TSDocs (#151)

* using vercel url for VO button

* removed redundant blocks dependency as it's already implied

* Fix url issue

* Refactor SplatViewer documentation to use updated import paths for Viewer components

* Update documentation: Rename 'Introduction' to 'Home', add 'Installation' page, and improve installation instructions for PlayCanvas Blocks.

* better V0 layout

Author: marklundin

packages/docs/content/blocks/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Introduction
+title: Home
 description: Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
 openGraph:
     title: playcanvas/react docs - Blocks
@@ -29,7 +29,7 @@ export const splatVersion = registry.items.find(item => item.name === 'splat-vie
 PlayCanvas Blocks are high-level component primitives for React. Clean, simple, and beautiful by default, they're designed to drop into your project and get to work. Built around **@playcanvas/react** and **@shadcn/ui** they're composable, themeable and ready to use out of the box.
 
 <div className='flex flex-row gap-2 mt-4 items-center'>
-    <a className="flex items-center -ml-2 flex-row gap-2 bg-muted rounded-full p-2 px-4 max-w-fit" href="blocks/getting-started">
+    <a className="flex items-center -ml-2 flex-row gap-2 bg-muted rounded-full p-2 px-4 max-w-fit" href="blocks/installation">
         <Box size={14} className="text-muted-foreground" />
         <div className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors duration-200">Get Started</div>
         <ArrowRight size={14} className="text-muted-foreground" />
@@ -42,12 +42,12 @@ PlayCanvas Blocks are high-level component primitives for React. Clean, simple,
 </div>
 
 <div className='relative mb-4 lg:mb-12'>
-    <Viewer.Splat src={splatUrl} className="aspect-4:1 lg:my-8 -mx-6 bg-gray-200 rounded-lg shadow-xl cursor-grab active:cursor-grabbing pointer-events-none" />
-    <div className='lg:absolute bottom-0 right-0 w-full py-2 lg:py-8 lg:text-background text-xs italic text-center'>
-        Rendered with the <code>Viewer.Splat</code> component — a React block for Gaussian splats. 
-        <a className="hover:underline pointer-events-auto" href="/blocks/splat-viewer">
-            Learn more →
-        </a>
+    <Viewer.Splat src={splatUrl} className="aspect-4:1 mt-8 lg:my-8 -mx-4 lg:-mx-6 bg-gray-200 lg:rounded-lg shadow-xl cursor-grab active:cursor-grabbing" />
+    <div className='lg:absolute bottom-0 right-0 w-full py-2 lg:py-8 lg:text-background text-xs italic text-center pointer-events-none'>
+        <span className="pointer-events-auto">
+            Rendered with the <code>Viewer.Splat</code> component — a React block for Gaussian splats.{" "}
+            <a className="underline text-bold" href="/blocks/splat-viewer">Learn more →</a>
+        </span>
     </div>
 </div>
 

packages/docs/content/blocks/getting-started.mdx renamed to packages/docs/content/blocks/installation.mdx

@@ -1,3 +1,8 @@
+---
+title: Installation
+description: Installation instructions for PlayCanvas Blocks
+---
+
 import { Tabs, Card, Code, Bleed, Steps } from 'nextra/components'
 import { ArrowRight, Hexagon, Box } from 'lucide-react'
 import { Button } from '@components/ui/button'
@@ -16,7 +21,7 @@ The recommended way to install Blocks is using Shadcn's CLI. Each Block can be i
 npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
 ```
 
-## Package Manager
+## Manual Installation
 
 Alternatively, you can simply install the package from npm, yarn, pnpm or bun and import the components you need.
 

packages/docs/content/blocks/splat-viewer.mdx

@@ -1,4 +1,4 @@
-import { Tabs, Card, Code, Bleed, Steps } from 'nextra/components'
+import { Tabs, Card, Code, Pre, Bleed, Steps } from 'nextra/components'
 import { ArrowRight, Hexagon, Box } from 'lucide-react'
 import registry from '../../registry.json'
 
@@ -15,7 +15,7 @@ Supports large assets with lazy loading and automatic framing. Use it in modals,
 Supports compressed gaussian splats.
 
 <div className="lg:outline lg:p-28 -mx-4 lg:-mx-6 mt-12 mb-0 rounded-t-lg bg-linear-to-br from-indigo-500 to-purple-600 relative">
-  {/* <OpenInV0Button url="https://v0.dev/chat/api/open?url=https://playcanvas-react.vercel.app/r/splat-viewer.json" className="absolute top-4 right-4" /> */}
+  <OpenInV0Button url={`https://${process.env.VERCEL_URL}/r/splat-viewer.json`} className="absolute top-4 right-4" />
   <Viewer.Splat src={splatUrl} className="aspect-2.39:1 bg-purple-200 rounded-t-lg lg:rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
       <Viewer.Controls autoHide >
         <div className="flex gap-1 flex-grow">
@@ -101,17 +101,36 @@ Supports compressed gaussian splats.
 
 ### Installation
 
-Install the component from your command line.
+<Tabs items={['Manual', 'Shadcn']} className="!mt-0" tabClassName="!mt-2">
+  <Tabs.Tab title='Manual' className="!mt-0 !rounded-t-none !rounded-b-xl">
+    Follow the instructions on the [Blocks page](/blocks/installation) to install the component.
 
-```bash copy
-npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
-```
+    ```bash copy
+    npm install @playcanvas/blocks
+    ```
 
-Ensure the block is processed by Tailwind by adding the following to your `index.css`.
+    Install Tailwind and add the following to your `index.css`.
+
+    ```css
+    @import "@playcanvas/blocks";
+    @source "../node_modules/@playcanvas/blocks";
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab title='Shadcn' className="!mt-0 !rounded-t-none !rounded-b-xl">
+    Install the component from your command line.
+
+    ```bash copy
+    npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
+    ```
+
+    Ensure the block is processed by Tailwind by adding the following to your `index.css`.
+
+    ```css
+    @source "../node_modules/@playcanvas/blocks";
+    ```
+  </Tabs.Tab>
+</Tabs>
 
-```css
-@source "../node_modules/@playcanvas/blocks";
-```
 
 ### Anatomy
 
@@ -134,26 +153,26 @@ export default () => (
 
 ### API Reference
 
-#### SplatViewer
+#### Splat
 
 A responsive and composable component for displaying **Gaussian splats**.
 
-{/* <TSDoc
+<TSDoc
   code={`
     import { Viewer } from '@playcanvas/blocks';
-    type $ = React.ComponentProps<typeof Splat.Viewer>;
+    type $ = React.ComponentProps<typeof Viewer.Splat>;
     export default $;
   `}
-/> */}
+/>
 
 #### Controls
 
 A simple container for UI controls that creates a sensible layout and optionally auto hides when the user is interacting.
 
-{/* <TSDoc
+<TSDoc
   code={`
-    import * as Splat from '@registry/splat-viewer/';
-    type $ = React.ComponentProps<typeof Splat.Controls>;
+    import { Viewer } from '@playcanvas/blocks';
+    type $ = React.ComponentProps<typeof Viewer.Controls>;
     export default $;
   `}
 />
@@ -164,8 +183,8 @@ A button for entering and exiting full screen mode.
 
 <TSDoc
   code={`
-    import * as Splat from '@registry/splat-viewer/';
-    type $ = React.ComponentProps<typeof Splat.FullScreenButton>;
+    import { Viewer } from '@playcanvas/blocks';
+    type $ = React.ComponentProps<typeof Viewer.FullScreenButton>;
     export default $;
   `}
 />
@@ -176,8 +195,8 @@ A button for downloading the current scene.
 
 <TSDoc
   code={`
-    import * as Splat from '@registry/splat-viewer/';
-    type $ = React.ComponentProps<typeof Splat.DownloadButton>;
+    import { Viewer } from '@playcanvas/blocks';
+    type $ = React.ComponentProps<typeof Viewer.DownloadButton>;
     export default $;
   `}
-/> */}
+/>

packages/docs/registry.json

@@ -37,7 +37,6 @@
             "version": "0.1.0.beta.1"
         },
         "dependencies": [
-            "@playcanvas/blocks",
             "@playcanvas/react",
             "playcanvas"
         ],

packages/docs/registry/splat-viewer.tsx

@@ -4,18 +4,20 @@ const splatUrl = "https://d28zzqy0iyovbz.cloudfront.net/30b943d5/scene.compresse
 
 export function SplatViewer() {
     return (
-      <Viewer.Splat src={splatUrl} className="rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
-        <Viewer.Controls >
-          <div className="flex gap-1 pointer-events-auto flex-grow">
-              <Viewer.FullScreenButton />
-              <Viewer.DownloadButton />
-          </div>
-          <div className="flex gap-1 pointer-events-auto">
-            <Viewer.CameraModeToggle />
-            <Viewer.HelpButton />
-            <Viewer.MenuButton />
-          </div>
-        </Viewer.Controls>
-    </Viewer.Splat>
+      <div className="flex flex-col items-center justify-center min-h-screen gap-4"> 
+        <Viewer.Splat src={splatUrl} className="rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
+          <Viewer.Controls >
+            <div className="flex gap-1 pointer-events-auto flex-grow">
+                <Viewer.FullScreenButton />
+                <Viewer.DownloadButton />
+            </div>
+            <div className="flex gap-1 pointer-events-auto">
+              <Viewer.CameraModeToggle />
+              <Viewer.HelpButton />
+              <Viewer.MenuButton />
+            </div>
+            </Viewer.Controls>
+        </Viewer.Splat>
+      </div>
     )
   }