feat: setup next-on-pages deploy

.github/workflows/docs-deploy-alpha-pages.yml

@@ -9,9 +9,11 @@ on:
       - "packages/stylesheet/**"
       - "packages/react/**"
       - "packages/stackflow/**"
+      - ".github/workflows/deploy-alpha-pages.yml"
 
 env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  SANITY_API_READ_TOKEN: ${{ secrets.SANITY_API_READ_TOKEN }}
 
 name: Deploy seed-design-v3 docs (Alpha)
 
@@ -37,11 +39,14 @@ jobs:
       - name: Build Docs
         working-directory: ./docs
         run: |
-          yarn build
+          yarn pages:build
 
       - name: Deploy docs at Cloudflare Pages in `seed-design-v3` project (Alpha)
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          command: pages deploy ./docs/out --project-name=seed-design-v3 --branch=${{ github.ref_name }}
+          workingDirectory: ./docs
+          command: pages deploy .vercel/output/static --project-name=seed-design-v3 --branch=${{ github.ref_name }}
+        env:
+          SANITY_API_READ_TOKEN: ${{ secrets.SANITY_API_READ_TOKEN }}

docs/.gitignore

@@ -24,7 +24,9 @@ yarn-error.log*
 
 # others
 .env*.local
+.env
 .vercel
+.wrangler
 next-env.d.ts
 *storybook.log
 

docs/package.json

@@ -11,6 +11,7 @@
     "sanity:build": "sanity build",
     "postinstall": "fumadocs-mdx",
     "gen": "yarn generate:all",
+    "pages:build": "yarn next-on-pages",
     "generate:all": "yarn generate:registry && yarn generate:example && yarn generate:rootage",
     "generate:registry": "vite-node scripts/generate-registry.ts",
     "generate:example": "vite-node scripts/generate-example.ts",
@@ -67,6 +68,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
+    "@cloudflare/next-on-pages": "1.13.7",
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
     "@storybook/addon-onboarding": "^8.4.4",
@@ -86,7 +88,9 @@
     "tailwindcss": "^3.4.10",
     "ts-pattern": "^5.5.0",
     "typescript": "^5.5.4",
-    "vite-node": "^2.1.2"
+    "vercel": "39.3.0",
+    "vite-node": "^2.1.2",
+    "wrangler": "^3.105.0"
   },
   "ultra": {
     "concurrent": [

docs/scripts/post-next-on-pages.mjs

@@ -0,0 +1,60 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+const BUILD_LOG_PATH = path.join(
+  process.cwd(),
+  ".vercel/output/static/_worker.js/nop-build-log.json",
+);
+const WORKER_DIR_PATH = path.join(process.cwd(), ".vercel/output/static/_worker.js");
+
+const buildLog = JSON.parse(fs.readFileSync(BUILD_LOG_PATH, "utf8"));
+const nextEnv = buildLog.buildFiles.functions.edge[0].config.environment;
+const processEnv = process.env;
+
+const ENV_VARIABLES = {};
+
+for (const key in nextEnv) {
+  if (key.startsWith("__NEXT_PREVIEW_MODE")) {
+    ENV_VARIABLES[key] = nextEnv[key];
+  }
+}
+
+for (const key in processEnv) {
+  if (key.startsWith("SANITY")) {
+    ENV_VARIABLES[key] = processEnv[key];
+  }
+}
+
+function traverseDirectory(directory, callback) {
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const fullPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      traverseDirectory(fullPath, callback);
+    } else {
+      callback(fullPath);
+    }
+  }
+}
+
+function define(filePath) {
+  if (!filePath.match(/\.js$/)) return;
+
+  let fileContent = fs.readFileSync(filePath, "utf-8");
+  let updated = false;
+
+  for (const key in ENV_VARIABLES) {
+    const regex = new RegExp(`process\\.env\\.${key}`, "g");
+    const replaced = fileContent.replace(regex, JSON.stringify(ENV_VARIABLES[key]));
+    if (replaced !== fileContent) {
+      fileContent = replaced;
+      updated = true;
+    }
+  }
+
+  if (updated) {
+    fs.writeFileSync(filePath, fileContent, "utf-8");
+    console.log(`Updated: ${filePath}`);
+  }
+}
+
+traverseDirectory(WORKER_DIR_PATH, define);

docs/wrangler.toml

@@ -0,0 +1,4 @@
+name = "seed-design-v3"
+compatibility_date = "2024-12-05"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"