Migrate to Astro + Preact, other misc enhancements

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
       - run: bun install
       - run: bun run build
         env:
-          VITE_PUBLIC_GIT_SHA: ${{ steps.vars.outputs.sha_short }}
+          ASTRO_PUBLIC_GIT_SHA: ${{ steps.vars.outputs.sha_short }}
 
       - uses: actions/upload-pages-artifact@v3
         with:

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generated types
+.astro/

README.md

@@ -11,6 +11,6 @@ bun install
 bun dev
 ```
 
-Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+Open [http://localhost:4321](http://localhost:4321) with your browser to see the result.
 
-You can start editing the page by modifying `src/app/index.jsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `src/pages/index.astro`. The page auto-updates as you edit the file.

astro.config.mjs

@@ -0,0 +1,34 @@
+// @ts-check
+import { defineConfig, fontProviders } from 'astro/config';
+
+import preact from '@astrojs/preact';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [preact(), tailwind()],
+  vite: {
+    build: {
+      minify: true,
+      sourcemap: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        output: {
+          manualChunks: () => 'app',
+          entryFileNames: 'assets/app.[hash].js',
+          chunkFileNames: 'assets/app.[hash].js',
+        },
+      },
+    },
+  },
+  experimental: {
+    fonts: [{
+      provider: fontProviders.fontsource(),
+      name: "Inter",
+      cssVariable: "--font-inter",
+      weights: ["100 900"],
+      styles: ["normal"],
+      subsets: ["latin"],
+      display: "swap"
+    }]
+  },
+});

package.json

@@ -4,40 +4,33 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "start": "vite preview",
+    "dev": "astro dev",
+    "build": "astro build",
+    "start": "astro preview",
+    "astro": "astro",
     "test": "vitest"
   },
   "engines": {
     "node": ">=20.11.0"
   },
   "dependencies": {
+    "@astrojs/preact": "^4.1.0",
+    "@astrojs/tailwind": "^6.0.2",
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#52021f0b1ace58673ebca1fae740f6900ebff707",
-    "@fontsource-variable/inter": "^5.2.5",
-    "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "astro": "^5.8.0",
+    "preact": "^10.26.6",
+    "tailwindcss": "3",
     "xz-decompress": "^0.2.2"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "10.4.21",
     "jsdom": "^26.0.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
-    "vite": "^6.2.6",
-    "vite-svg-loader": "^5.1.0",
     "vitest": "^3.1.1"
   },
   "trustedDependencies": [
     "@commaai/qdl",
     "esbuild",
     "usb"
   ]
-}
+}

src/components/copy-text.astro

@@ -0,0 +1,13 @@
+---
+const { text } = Astro.props;
+---
+
+<div class="relative text-sm">
+  <pre class="font-mono pt-12">{text}</pre>
+  <button
+    class="absolute top-2 right-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-300 transition-colors text-white p-1 rounded-md"
+    onclick={`navigator.clipboard.writeText("${text.replace(/"/g, '\\"')}")`}
+  >
+    Copy
+  </button>
+</div>