Rewrite site from Next.js 12 to Astro 5

.github/workflows/node.js.yml

@@ -9,14 +9,16 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
       - name: Setup node
         uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
-          cache: yarn
+          cache: pnpm
       - name: Install
-        run: yarn
-      - name: Test
-        run: yarn test
+        run: pnpm install --frozen-lockfile
+      - name: Check formatting
+        run: pnpm exec prettier --check .
       - name: Build
-        run: yarn build
+        run: pnpm build

.gitignore

@@ -2,39 +2,34 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
-pnpm-lock.yaml
 
-# testing
-/coverage
-
-# next.js
-/.next/
-# next sitemap
-sitemap*
-robots.txt
+# astro
+dist/
+.astro/
 
 # misc
 .DS_Store
 *.pem
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # local env files
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-
-# vercel
-.vercel
+.env
 
 .netlify
-.env
 
 # typescript
 *.tsbuildinfo
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+tmp.md

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.nvmrc

@@ -1 +1 @@
-v20
+v24

astro.config.mjs

@@ -0,0 +1,43 @@
+import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";
+import netlify from "@astrojs/netlify";
+import sitemap from "@astrojs/sitemap";
+import react from "@astrojs/react";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+import rehypeWrapTimecodes from "./src/plugins/rehype-wrap-timecodes.ts";
+import rehypeWrapFirstList from "./src/plugins/rehype-wrap-first-list.ts";
+import { lastModifiedForUrl } from "./src/utils/gitDate.ts";
+
+export default defineConfig({
+  site: "https://reactiflux.com",
+  output: "static",
+  adapter: netlify(),
+  integrations: [
+    react(),
+    sitemap({
+      serialize(item) {
+        try {
+          const { pathname } = new URL(item.url);
+          const lastmod = lastModifiedForUrl(pathname);
+          if (lastmod) {
+            item.lastmod = lastmod;
+          }
+        } catch {
+          // Leave lastmod unset if URL parsing fails
+        }
+        return item;
+      },
+    }),
+  ],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  markdown: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeSlug, rehypeWrapTimecodes, rehypeWrapFirstList],
+  },
+  redirects: {
+    "/guidelines": "/conduct",
+  },
+});

netlify.toml

@@ -1,6 +1,6 @@
 [build]
-  command = "yarn build"
-  publish = ".next/"
+  command = "pnpm build"
+  publish = "dist/"
 
 [[redirects]]
   from = "/guidelines"
@@ -11,6 +11,3 @@
   to = "https://tmir.transistor.fm/"
   status = 302
   force = true
-
-[[plugins]]
-  package = "@netlify/plugin-nextjs"

netlify/functions/discordIdentity.mts

@@ -1,9 +1,24 @@
 import type { Context } from "@netlify/functions";
 
+const CACHE_TTL_MS = 5 * 60 * 1000;
+const cache = new Map<
+  string,
+  { expiresAt: number; status: number; body: string }
+>();
+
 const handler = async (request: Request, context: Context) => {
   // Inexplicably `$ netlify dev` seems to hard crash if an `Authentication`
   // header is present on an incoming request. So, hack
   const Authorization = request.headers.get("x-auth")!;
+
+  const cached = cache.get(Authorization);
+  if (cached && cached.expiresAt > Date.now()) {
+    return new Response(cached.body, {
+      status: cached.status,
+      headers: { "Content-Type": "application/json", "x-cache": "HIT" },
+    });
+  }
+
   try {
     const [userRes, memberRes] = await Promise.all([
       fetch("https://discord.com/api/users/@me", {
@@ -33,15 +48,20 @@ const handler = async (request: Request, context: Context) => {
         );
       }
     }
-    return new Response(
-      JSON.stringify({
-        user,
-        isMember: memberRes.ok,
-      }),
-      {
-        headers: { "Content-Type": "application/json" },
-      },
-    );
+    const body = JSON.stringify({
+      user,
+      isMember: memberRes.ok,
+    });
+    if (userRes.ok) {
+      cache.set(Authorization, {
+        expiresAt: Date.now() + CACHE_TTL_MS,
+        status: 200,
+        body,
+      });
+    }
+    return new Response(body, {
+      headers: { "Content-Type": "application/json", "x-cache": "MISS" },
+    });
   } catch (e) {
     console.error("[DIS_ID]", e);
     return new Response(JSON.stringify(e), { status: 400 });

package.json

@@ -2,68 +2,70 @@
   "name": "reactiflux.com",
   "version": "0.3.14",
   "private": true,
+  "type": "module",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build && yarn build:sitemap",
-    "build:sitemap": "next-sitemap",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "next lint && prettier --check .",
-    "prettier": "prettier --write .",
-    "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
-    "process-tmir": "node --experimental-strip-types scripts/process-tmir.ts"
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "process-tmir": "node --experimental-strip-types scripts/process-tmir.ts",
+    "prepare": "husky"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged",
-      "post-merge": "yarn install-if-package-changed",
-      "post-checkout": "yarn install-if-package-changed"
-    }
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@astrojs/netlify": "^6.6.4",
+    "@astrojs/react": "^5.0.3",
+    "@astrojs/sitemap": "^3.7.2",
     "@netlify/functions": "^3.0.0",
-    "@next/third-parties": "^14.1.0",
+    "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-query": "^5.65.0",
+    "@types/hast": "^3.0.4",
     "@types/node": "20.6.0",
-    "@types/react": "17.0.37",
-    "@types/styled-components": "^5.1.15",
+    "@types/react": "^18.3.12",
     "@vcarl/remark-headings": "^0.0.1",
     "airtable": "^0.12.2",
+    "astro": "^5.18.0",
     "client-oauth2": "^4.3.3",
     "date-fns": "^2.27.0",
-    "eslint": "7",
-    "eslint-config-next": "12.0.4",
     "gray-matter": "^4.0.3",
-    "husky": "^4.2.5",
     "mdast-util-to-string": "^3.1.0",
     "minireset.css": "^0.0.6",
-    "moment": "^2.27.0",
     "netlify-cli": "^18.0.2",
-    "next": "^12.3.4",
-    "next-sitemap": "^4.2.2",
-    "polished": "^3.6.5",
-    "prettier": "^2.1.0",
-    "pretty-quick": "^3.0.0",
     "react": "~18",
     "react-dom": "~18",
-    "react-headroom": "^2.1.2",
-    "react-helmet": "^5.2.1",
     "react-hook-form": "^7.49.2",
-    "rehype-slug": "^5.0.0",
+    "rehype-slug": "^6.0.0",
     "rehype-stringify": "^9.0.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
-    "styled-components": "^5.3.3",
-    "typeface-poppins": "^0.0.72",
-    "typeface-space-mono": "^0.0.71",
-    "typeface-work-sans": "^0.0.72",
+    "tailwindcss": "^4.2.1",
     "typescript": "4.5.2",
     "unified": "^10.1.1",
+    "unist-util-visit": "^5.1.0",
     "zod": "^3.23.8"
   },
   "prettier": {
     "trailingComma": "all"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "husky",
+      "netlify-cli",
+      "sharp",
+      "unix-dgram",
+      "workerd"
+    ]
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.2",
+    "prettier": "^2.8.8",
+    "serve": "^14.2.6"
   }
 }

playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: "list",
+  use: {
+    baseURL: "http://localhost:4321",
+    trace: "on-first-retry",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "pnpm build && pnpm exec serve dist --listen 4321 --no-clipboard",
+    url: "http://localhost:4321",
+    reuseExistingServer: !process.env.CI,
+    timeout: 180_000,
+  },
+});