docs: serve the showcase at the site root and the examples at /examples/

.github/workflows/deploy-pages.yml

@@ -36,7 +36,7 @@ jobs:
 
       - run: |
           mkdir -p site
-          cp -r examples/dist site/examples
+          cp -r examples/dist/. site
 
       - run: >
           npx -y @pmndrs/docs@4 build docs site/docs --format website

examples/examples/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Examples of every Klipp camera piece, one scene each, with their settings live." />
+    <title>Klipp - examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/index.html

@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/landing.tsx"></script>
   </body>
 </html>

examples/src/App.tsx

@@ -1,31 +1,11 @@
 import { Leva } from 'leva';
-import { useCallback, useEffect, useState } from 'react';
-import { HashRouter, Navigate, Route, Routes, useParams } from 'react-router';
+import { useEffect, useState } from 'react';
+import { HashRouter, Route, Routes } from 'react-router';
 
-import { Landing } from './layout/Landing';
 import { Layout } from './layout/Layout';
 import { SceneRoute } from './layout/SceneRoute';
 import { Welcome } from './layout/Welcome';
-import { useShortcut } from './scene/useShortcut';
-
-/** `R` leaves only a square scene and Leva on screen, for recording clips. */
-function useRecordingMode(): void {
-  const [recording, setRecording] = useState(false);
-  useShortcut(
-    'KeyR',
-    useCallback(() => setRecording((on) => !on), []),
-  );
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('recording', recording);
-  }, [recording]);
-}
-
-/** Examples used to live at `/:category/:slug`, so links to them keep working. */
-function ExampleRedirect() {
-  const { category, slug } = useParams();
-  return <Navigate replace to={`/examples/${category}/${slug}`} />;
-}
+import { useRecordingMode } from './scene/useRecordingMode';
 
 export function App() {
   const [isMobile, setIsMobile] = useState(() => window.matchMedia('(max-width: 64rem)').matches);
@@ -46,12 +26,10 @@ export function App() {
         theme={{ sizes: { rootWidth: '20rem' } }}
       />
       <Routes>
-        <Route index element={<Landing />} />
-        <Route path="examples" element={<Layout />}>
+        <Route path="/" element={<Layout />}>
           <Route index element={<Welcome />} />
           <Route path=":category/:slug" element={<SceneRoute />} />
         </Route>
-        <Route path=":category/:slug" element={<ExampleRedirect />} />
       </Routes>
     </HashRouter>
   );

examples/src/landing.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { Landing } from './layout/Landing';
+
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Landing />
+  </StrictMode>,
+);

examples/src/layout/Landing.tsx

@@ -1,11 +1,14 @@
 import { Canvas } from '@react-three/fiber';
 
+import { useRecordingMode } from '../scene/useRecordingMode';
 import { CarShowcase } from '../scenes/showcase/CarShowcase';
 
 import { LoadingScreen } from './LoadingScreen';
 
 /** The showcase on the full screen, with the logo and links to the docs and the examples. */
 export function Landing() {
+  useRecordingMode();
+
   return (
     <div className="app">
       <main className="viewer">
@@ -21,7 +24,7 @@ export function Landing() {
           <a href="https://pmndrs.github.io/klipp/docs/" target="_blank" rel="noreferrer">
             Docs
           </a>
-          <a href="#/examples">Examples</a>
+          <a href={`${import.meta.env.BASE_URL}examples/`}>Examples</a>
         </nav>
       </main>
     </div>

examples/src/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { NavLink } from 'react-router';
 
 import { categories } from '../registry';
@@ -74,7 +74,7 @@ export function Sidebar() {
                 block.length > 1 ? (
                   <li key={block[0].group} className="example-group">
                     <NavLink
-                      to={`/examples/${category.slug}/${block[0].slug}`}
+                      to={`/${category.slug}/${block[0].slug}`}
                       className={({ isActive }) => (isActive ? 'active' : undefined)}
                       onClick={() => setIsOpen(false)}>
                       {block[0].title}
@@ -83,7 +83,7 @@ export function Sidebar() {
                       {block.slice(1).map((example) => (
                         <li key={example.slug}>
                           <NavLink
-                            to={`/examples/${category.slug}/${example.slug}`}
+                            to={`/${category.slug}/${example.slug}`}
                             className={({ isActive }) => (isActive ? 'active' : undefined)}
                             onClick={() => setIsOpen(false)}>
                             {example.title}
@@ -95,7 +95,7 @@ export function Sidebar() {
                 ) : (
                   <li key={block[0].slug}>
                     <NavLink
-                      to={`/examples/${category.slug}/${block[0].slug}`}
+                      to={`/${category.slug}/${block[0].slug}`}
                       className={({ isActive }) => (isActive ? 'active' : undefined)}
                       onClick={() => setIsOpen(false)}>
                       {block[0].title}

examples/src/scene/CanvasOverlay.tsx

@@ -1,4 +1,4 @@
-import { useThree } from '@react-three/fiber';
+import { useThree } from '@react-three/fiber';
 import { useEffect, useRef, type ReactNode } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 

examples/src/scene/useRecordingMode.ts

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useShortcut } from './useShortcut';
+
+/** `R` leaves only a square scene and Leva on screen, for recording clips. */
+export function useRecordingMode(): void {
+  const [recording, setRecording] = useState(false);
+  useShortcut(
+    'KeyR',
+    useCallback(() => setRecording((on) => !on), []),
+  );
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('recording', recording);
+  }, [recording]);
+}

examples/src/scenes/showcase/CarShowcase.tsx

@@ -1,4 +1,4 @@
-import { BlendHints, type SequencerCamera as SequencerCameraCore, type SequencerInstruction } from '@pmndrs/klipp';
+import { BlendHints, type SequencerCamera as SequencerCameraCore, type SequencerInstruction } from '@pmndrs/klipp';
 import { Aim, Body, Extension, Klipp, Noise, SequencerCamera, VirtualCamera } from '@pmndrs/klipp/react';
 import {
   AccumulativeShadows,

examples/vite.config.ts

@@ -5,9 +5,17 @@ import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig(({ command }) => ({
-  // GitHub Pages serves a repo (non-user/org) site under /<repo>/, not / - examples/ itself lives at
-  // /klipp/examples/, alongside docs/ at /klipp/docs/ on the same Pages site
-  base: command === 'build' ? '/klipp/examples/' : '/',
+  // GitHub Pages serves a repo (non-user/org) site under /<repo>/, not / - the showcase is its home page at
+  // /klipp/, with the examples at /klipp/examples/ and docs/ at /klipp/docs/ on the same Pages site
+  base: command === 'build' ? '/klipp/' : '/',
+  build: {
+    rollupOptions: {
+      input: {
+        showcase: fileURLToPath(new URL('index.html', import.meta.url)),
+        examples: fileURLToPath(new URL('examples/index.html', import.meta.url)),
+      },
+    },
+  },
   plugins: [react()],
   resolve: {
     alias: {