docs: add redirect logic for docs site (#495)

.github/workflows/build-test-docs.yml

@@ -57,9 +57,9 @@ jobs:
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-yarn-docs-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-yarn-docs-
 
       - name: Set baseUri
         if: ${{ inputs.path }}

.github/workflows/deploy-pages.yml

@@ -4,18 +4,14 @@ on:
     branches:
       - main
       - docs-snapshot
+      - docs-ci-test
   workflow_dispatch: {}
   release:
     types:
       - released
 
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
 concurrency:
-  group: "pages"
+  group: "pages-cf"
   cancel-in-progress: true
 
 jobs:
@@ -57,23 +53,30 @@ jobs:
       ref: main
       path: dev
       artifact: docs-dev
+
   deploy-docs:
     name: Deploy documentation
     needs: 
       - build-docs
       - build-docs-dev
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
 
     steps:
-      - name: Download artifact
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
+
+      - name: Download artifact (tagged)
         uses: actions/download-artifact@v3
         with:
           name: docs
           path: docs/build
-      - name: Download artifact
+
+      - name: Download artifact (latest)
         uses: actions/download-artifact@v3
         with:
           name: docs-dev
@@ -85,18 +88,44 @@ jobs:
 
       - name: Unpack documentation
         run: |
-          tar -xf docs/build/docs.tar -C docs/build
+          mkdir -p docs-site~/public/dev
-          tar -xf docs/build/dev/docs.tar -C docs/build/dev
+          tar -xf docs/build/docs.tar -C docs-site~/public
-          rm -f docs/build/docs.tar docs/build/dev/docs.tar
+          tar -xf docs/build/dev/docs.tar -C docs-site~/public/dev
       
-      - name: Setup Pages
+      - name: Setup yarn 2.0
-        uses: actions/configure-pages@v3
+        run: |
+          corepack enable
+          corepack prepare yarn@stable --activate
           
-      - name: Upload artifact
+      - name: Get yarn cache directory path
-        uses: actions/upload-pages-artifact@v2
+        id: yarn-cache-dir-path
+        run: echo "dir=$(cd docs-site~; yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
-          path: docs/build
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-site-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-site-
           
-      - name: Deploy to GitHub Pages
+      - name: Build CF site
-        id: deployment
+        run: |
-        uses: actions/deploy-pages@v2
+          cd docs-site~
+          yarn install --immutable
+          
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          command: deploy --name modular-avatar-docs --old-asset-ttl 300
+          workingDirectory: docs-site~
+          
+      - name: Purge cache
+        uses: nathanvaughn/actions-cloudflare-purge@3b31015a54307a38ea48904fb367eeb0a753a66f
+        continue-on-error: true
+        with:
+          cf_zone: ${{ secrets.CF_ZONE_ID }}
+          cf_auth: ${{ secrets.CF_API_TOKEN }}
+          hosts: |
+            modular-avatar.nadena.dev

docs-site~/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.yarn
+.pnp.*
+public
+.gitignore
+.wrangler

docs-site~/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "worker-sites-template",
+  "version": "0.0.0",
+  "devDependencies": {
+    "@cloudflare/kv-asset-handler": "^0.2.0",
+    "wrangler": "0.0.30"
+  },
+  "private": true,
+  "scripts": {
+    "start": "wrangler dev",
+    "publish": "wrangler publish"
+  },
+  "dependencies": {
+    "accept-language": "^3.0.18"
+  }
+}

docs-site~/src/index.js

@@ -0,0 +1,149 @@
+import {
+  getAssetFromKV,
+  mapRequestToAsset,
+} from "@cloudflare/kv-asset-handler";
+
+import acceptLanguage from 'accept-language';
+
+/**
+ * The DEBUG flag will do two things that help during development:
+ * 1. we will skip caching on the edge, which makes it easier to
+ *    debug.
+ * 2. we will return an error message on exception in your Response rather
+ *    than the default 404.html page.
+ */
+const DEBUG = false;
+
+addEventListener("fetch", (event) => {
+  event.respondWith(handleEvent(event));
+});
+
+const STRIP_SUFFIX_RE = new RegExp('^(/.+)(?:/(?:index\.html)?|\.html)$');
+
+acceptLanguage.languages(['en-US', 'ja-JP']);
+
+async function handleEvent(event) {
+  let options = {};
+
+  /**
+   * You can add custom logic to how we fetch your assets
+   * by configuring the function `mapRequestToAsset`
+   */
+  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true,
+      };
+    }
+    
+    let response;
+    
+    const url = new URL(event.request.url);
+    const path = url.pathname;
+    const strip_match = STRIP_SUFFIX_RE.exec(path);
+    
+    if (url.searchParams.get("lang") === 'auto') {
+      let resolvedLanguage = acceptLanguage.get(event.request.headers.get('Accept-Language'));
+      if (resolvedLanguage === null) {
+        resolvedLanguage = 'en-US';
+      } else {
+        resolvedLanguage = resolvedLanguage.split('-')[0];
+      }
+      
+      let destination;
+      switch (resolvedLanguage) {
+        case 'ja':
+          if (url.pathname.startsWith('/dev')) {
+            destination = '/ja/dev' + url.pathname.substring(4);
+          } else {
+            destination = '/ja' + url.pathname;
+          }
+          break;
+        default:
+          destination = url.pathname;
+          break;
+      }
+      
+      response = new Response("Redirecting", {
+        status: 301,
+        headers: {
+          Location: destination,
+          Vary: 'Accept-Language',
+        },
+      });
+    } else if (strip_match !== null) {
+      console.log("=== Redirect");
+      response = new Response("Redirecting", {
+        status: 301,
+        headers: {
+          Location: strip_match[1],
+        }
+      });
+    } else {
+      let page;
+      try {
+        page = await getAssetFromKV(event, options);
+      } catch (e) {
+        // Try adding .html
+        options.mapRequestToAsset = function(request) {
+          return new Request(url.toString() + ".html", mapRequestToAsset(request));
+        };
+
+        page = await getAssetFromKV(event, options);
+      }
+
+      // allow headers to be altered
+      response = new Response(page.body, page);
+    }
+
+    response.headers.set("X-XSS-Protection", "1; mode=block");
+    response.headers.set("X-Content-Type-Options", "nosniff");
+    response.headers.set("X-Frame-Options", "DENY");
+    response.headers.set("Referrer-Policy", "unsafe-url");
+    response.headers.set("Feature-Policy", "none");
+
+    return response;
+  } catch (e) {
+    console.log(e);
+    // if an error is thrown try to serve the asset at 404.html
+    if (!DEBUG) {
+      try {
+        let notFoundResponse = await getAssetFromKV(event, {
+          mapRequestToAsset: (req) =>
+            new Request(`${new URL(req.url).origin}/404.html`, req),
+        });
+
+        return new Response(notFoundResponse.body, {
+          ...notFoundResponse,
+          status: 404,
+        });
+      } catch (e) {}
+    }
+
+    return new Response(e.message || e.toString(), { status: 500 });
+  }
+}
+
+/**
+ * Here's one example of how to modify a request to
+ * remove a specific prefix, in this case `/docs` from
+ * the url. This can be useful if you are deploying to a
+ * route on a zone, or if you only want your static content
+ * to exist at a specific path.
+ */
+function handlePrefix(prefix) {
+  return (request) => {
+    // compute the default (e.g. / -> index.html)
+    let defaultAssetKey = mapRequestToAsset(request);
+    let url = new URL(defaultAssetKey.url);
+
+    // strip the prefix from the path for lookup
+    url.pathname = url.pathname.replace(prefix, "/");
+
+    // inherit all other props from the default request
+    return new Request(url.toString(), defaultAssetKey);
+  };
+}

docs-site~/wrangler.toml

@@ -0,0 +1,5 @@
+name = "modular-avatar-docs-test"
+main = "src/index.js"
+compatibility_date = "2022-05-06"
+
+site = { bucket = "./public" }