feat: vercel adapter

packages/website/.gitignore

@@ -12,7 +12,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .env
 .env.production
@@ -22,3 +21,4 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+.vercel/

packages/website/astro.config.mjs

@@ -1,10 +1,15 @@
 // @ts-check
 
 import react from '@astrojs/react';
+import vercel from '@astrojs/vercel/serverless';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
+  devToolbar: { enabled: false },
+  output: 'hybrid',
+  adapter: vercel(),
+
   integrations: [react()],
   vite: {
     plugins: [vanillaExtractPlugin()],
@@ -15,7 +20,4 @@ export default defineConfig({
       },
     },
   },
-
-  devToolbar: { enabled: false },
-  outDir: '../../dist/website',
 });

packages/website/package.json

@@ -10,8 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/react": "^3.6.2",
     "@blitzkit/core": "workspace:*",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",
@@ -22,12 +20,10 @@
     "@react-three/fiber": "^8.17.6",
     "@vanilla-extract/css": "^1.15.5",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "astro": "^4.15.6",
     "compare-versions": "^6.1.1",
     "immer": "^10.1.1",
     "markdown-to-jsx": "^7.5.0",
     "nanostores": "^0.11.3",
-    "purgecss": "^6.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-promise-suspense": "^0.3.4",
@@ -35,9 +31,13 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
+    "@astrojs/check": "^0.9.3",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/vercel": "^7.8.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18",
     "@types/three": "^0.160.0",
     "@vanilla-extract/vite-plugin": "^4.0.15",
-    "@types/react-dom": "^18",
-    "@types/react": "^18.3.5"
+    "astro": "^4.15.6"
   }
 }

packages/website/src/layouts/ToolLayout.astro

@@ -13,52 +13,41 @@ const tool = TOOLS.find((tool) => tool.id === toolId);
 
 <RootLayout>
   {
-    tool && (
+    tool && isToolRoot && (
       <>
-        {isToolRoot && (
-          <>
-            <title>{tool.title}</title>
-            <meta property="og:image" content={imgur(tool.image)} />
+        <title>{tool.title}</title>
+        <meta property="og:image" content={imgur(tool.image)} />
 
-            {tool.pageDescription !== undefined && (
-              <>
-                <meta name="description" content={tool.pageDescription} />
-                <meta
-                  property="og:description"
-                  content={tool.pageDescription}
-                />
-              </>
-            )}
+        {tool.pageDescription !== undefined && (
+          <>
+            <meta name="description" content={tool.pageDescription} />
+            <meta property="og:description" content={tool.pageDescription} />
           </>
         )}
-      </>
-    )
-  }
 
-  {
-    pathSplit.length === 3 && (
-      <Box
-        style={{
-          backgroundImage: `url(${imgur(tool!.image, {
-            format: 'jpeg',
-            size: ImgurSize.SmallThumbnail,
-          })})`,
-          backgroundSize: 'cover',
-        }}
-      >
-        <Flex
-          direction="column"
-          align="center"
-          py="6"
+        <Box
           style={{
-            backdropFilter: 'blur(4rem)',
-            WebkitBackdropFilter: 'blur(4rem)',
+            backgroundImage: `url(${imgur(tool!.image, {
+              format: 'jpeg',
+              size: ImgurSize.SmallThumbnail,
+            })})`,
+            backgroundSize: 'cover',
           }}
         >
-          <Heading size="7">{tool?.title}</Heading>
-          <Text>{tool?.description}</Text>
-        </Flex>
-      </Box>
+          <Flex
+            direction="column"
+            align="center"
+            py="6"
+            style={{
+              backdropFilter: 'blur(4rem)',
+              WebkitBackdropFilter: 'blur(4rem)',
+            }}
+          >
+            <Heading size="7">{tool?.title}</Heading>
+            <Text>{tool?.description}</Text>
+          </Flex>
+        </Box>
+      </>
     )
   }
 

packages/website/src/pages/api/patreon/membership/index.ts

@@ -0,0 +1,7 @@
+import type { APIContext } from 'astro';
+
+export const prerender = false;
+
+export async function GET({}: APIContext) {
+  return Response.json({ hello: 'world' });
+}