Moved demo app to an Astro app.

.github/workflows/deploy-docs.yml

@@ -48,7 +48,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./apps/phoure-demo/dist
+          path: ./apps/phoure-www/dist
 
   deploy:
     needs: build

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 
-![phoure (light mode)](/apps/phoure-demo/public/phoure-logo-light.svg#gh-light-mode-only)
-![phoure (dark mode)](/apps/phoure-demo/public/phoure-logo-dark.svg#gh-dark-mode-only)
+![phoure (light mode)](/media/phoure-logo-light.svg#gh-light-mode-only)
+![phoure (dark mode)](/media/phoure-logo-dark.svg#gh-dark-mode-only)
 
 Ethical AI upscaling for games. _(formerly "mender")_
 
@@ -10,7 +10,7 @@ Ethical AI upscaling for games. _(formerly "mender")_
 <div align="center">
 <div style="max-width: 640px">
 
-![hello](/apps/phoure-demo/public/phoure-app.png)
+![hello](/media/phoure-app.png)
 
 </div>
 </div>

apps/phoure-www/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/phoure-www/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   └── content.config.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

apps/phoure-www/astro.config.mjs

@@ -0,0 +1,42 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import tailwind from '@astrojs/tailwind';
+import react from '@astrojs/react';
+import typegpu from 'rollup-plugin-typegpu';
+
+// https://astro.build/config
+export default defineConfig({
+  base: 'phoure',
+  vite: {
+    plugins: [typegpu({ include: [/\.ts$/] })],
+  },
+  redirects: {
+    '/': {
+      destination: '/phoure/play',
+      status: 307,
+    },
+  },
+  integrations: [
+    starlight({
+      title: 'phoure',
+      social: {
+        github: 'https://github.com/iwoplaza/phoure',
+      },
+      customCss: ['./src/tailwind.css'],
+      sidebar: [
+        {
+          label: 'Guides',
+          items: [
+            // Each item here is one entry in the navigation menu.
+            { label: 'Example Guide', slug: 'guides/example' },
+          ],
+        },
+      ],
+    }),
+    tailwind({
+      applyBaseStyles: true,
+    }),
+    react(),
+  ],
+});

apps/phoure-demo/components.json → apps/phoure-www/components.json

@@ -9,7 +9,7 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
+    "components": "src/components",
+    "utils": "src/lib/utils"
   }
 }

apps/phoure-demo/package.json → apps/phoure-www/package.json

@@ -1,31 +1,19 @@
 {
-  "name": "phoure-demo",
-  "private": true,
-  "version": "0.0.0",
+  "name": "phoure-www",
+  "type": "module",
+  "version": "0.0.1",
   "scripts": {
-    "dev:watch": "vite",
-    "start": "vite preview --host 0.0.0.0 --port 4173",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@types/node": "^22.5.0",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@webgpu/types": "^0.1.34",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.24",
-    "rollup-plugin-typegpu": "^0.0.1",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vitest": "^1.3.1"
+    "dev:watch": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/react": "^4.1.2",
+    "@astrojs/starlight": "^0.30.3",
+    "@astrojs/starlight-tailwind": "^3.0.0",
+    "@astrojs/tailwind": "^5.1.4",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -41,18 +29,27 @@
     "@typegpu/common": "workspace:*",
     "@typegpu/noise": "^0.0.1",
     "@typegpu/sdf": "workspace:*",
+    "@types/react": "^18.0.2",
+    "@types/react-dom": "^18.0.2",
+    "astro": "^5.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jotai": "^2.11.0",
     "jotai-location": "^0.5.5",
     "lucide-react": "^0.435.0",
     "motion": "^11.15.0",
     "phoure": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup-plugin-typegpu": "^0.0.1",
+    "sharp": "^0.32.5",
     "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typegpu": "https://pkg.csb.dev/software-mansion/TypeGPU/commit/e87b5a34/typegpu",
     "wgpu-matrix": "^3.3.0"
+  },
+  "devDependencies": {
+    "@webgpu/types": "^0.1.34"
   }
 }

apps/phoure-demo/src/components/ControlsSidebar.tsx → apps/phoure-www/src/components/ControlsSidebar.tsx

@@ -4,7 +4,7 @@ import { type WritableAtom, useAtom, useSetAtom } from 'jotai';
 import { ChevronDown } from 'lucide-react';
 import { useCallback, useId } from 'react';
 
-import { accumulatedLayersAtom } from '@/GameEngine/sdfRenderer/sdfRenderer';
+import { accumulatedLayersAtom } from 'src/lib/GameEngine/sdfRenderer/sdfRenderer.ts';
 import {
   type DisplayMode,
   DisplayModes,
@@ -18,29 +18,29 @@ import {
   fixedTimestepAtom,
   fixedTimestepEnabledAtom,
   targetResolutionAtom,
-} from '@/controlAtoms';
-import { Checkbox } from './ui/checkbox';
+} from 'src/lib/controlAtoms.ts';
+import { Checkbox } from 'src/components/ui/checkbox';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from './ui/collapsible';
-import { Label } from './ui/label';
+} from 'src/components/ui/collapsible';
+import { Label } from 'src/components/ui/label';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from './ui/select';
+} from 'src/components/ui/select';
 import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-} from './ui/sidebar';
-import { Slider } from './ui/slider';
+} from 'src/components/ui/sidebar';
+import { Slider } from 'src/components/ui/slider';
 
 function ControlLabel(props: { htmlFor: string; children: string }) {
   return (

apps/phoure-demo/src/App.tsx → apps/phoure-www/src/components/DemoApp.tsx

@@ -1,14 +1,14 @@
 import { Provider } from 'jotai';
 import { HeartIcon } from 'lucide-react';
 
-import { ControlsSidebar } from '@/components/ControlsSidebar';
-import { NavAside } from '@/components/NavAside';
-import { Statistics } from '@/components/Statistics';
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
-import GameViewport from './GameEngine/GameViewport';
-import { store } from './store';
+import { store } from 'src/lib/store.ts';
+import { SidebarProvider, SidebarTrigger } from 'src/components/ui/sidebar.tsx';
+import GameViewport from 'src/lib/GameEngine/GameViewport.tsx';
+import { ControlsSidebar } from './ControlsSidebar.tsx';
+import { Statistics } from './Statistics.tsx';
+import { NavAside } from './NavAside.tsx';
 
-function App() {
+export function DemoApp() {
   return (
     <SidebarProvider defaultOpen>
       <Provider store={store}>
@@ -17,7 +17,7 @@ function App() {
           <header className="absolute top-2 inset-x-0 h-10 flex justify-center items-center">
             <img
               className="h-8"
-              src="/phoure-logo-light.svg"
+              src="/phoure/phoure-logo-light.svg"
               alt="phoure logo"
             />
             <h1 className="hidden">phoure</h1>
@@ -41,5 +41,3 @@ function App() {
     </SidebarProvider>
   );
 }
-
-export default App;