make site work with the Cloudflare OpenNext adapter

update the site application so that it can be build using the
Cloudflare OpenNext adapter (`@opennextjs/cloudflare`) and thus
deployed on Cloudflare Workers

> [!Note]
> This is very much a work-in-progress right now

Author: dario-piotrowicz

.gitignore

@@ -32,3 +32,8 @@ cache
 tsconfig.tsbuildinfo
 
 dist/
+
+# Ignore worker artifacts
+apps/site/.open-next
+apps/site/.wrangler
+apps/site/.cloudflare/.asset-manifests

apps/site/.cloudflare/node/fs.mjs

@@ -0,0 +1,91 @@
+import fsPromises from 'fs/promises';
+
+import pagesManifest from '../.asset-manifests/pages.mjs';
+import snippetsManifest from '../.asset-manifests/snippets.mjs';
+
+export function readdir(path, options, cb) {
+  const withFileTypes = !!options.withFileTypes;
+
+  if (!withFileTypes) {
+    // TODO: also support withFileTypes false
+    throw new Error('fs#readdir please call readdir with withFileTypes true');
+  }
+
+  const result = findInDirentLikes(path);
+
+  const results =
+    !result || result.type !== 'directory'
+      ? []
+      : result.children.map(c => ({
+          name: c.name,
+          parentPath: c.parentPath,
+          path: c.path,
+          isFile: () => c.type === 'file',
+          isDirectory: () => c.type === 'directory',
+        }));
+
+  cb?.(null, results);
+}
+
+function findInDirentLikes(path) {
+  if (!path.startsWith('/pages') && !path.startsWith('/snippets')) {
+    return null;
+  }
+
+  // remove the leading `/`
+  path = path.slice(1);
+
+  const paths = path.split('/');
+
+  const manifestType = paths.shift();
+
+  const manifest = manifestType === 'pages' ? pagesManifest : snippetsManifest;
+
+  return recursivelyFindInDirentLikes(paths, manifest);
+  function recursivelyFindInDirentLikes(paths, direntLikes) {
+    const [current, ...restOfPaths] = paths;
+    const found = direntLikes.find(item => item.name === current);
+    if (!found) return null;
+    if (restOfPaths.length === 0) return found;
+    if (found.type !== 'directory') return null;
+    return recursivelyFindInDirentLikes(restOfPaths, found.children);
+  }
+}
+
+export function exists(path, cb) {
+  const result = existsImpl(path);
+  cb(result);
+}
+
+export function existsSync(path) {
+  const result = existsImpl(path);
+  return result;
+}
+
+function existsImpl(path) {
+  if (!path.startsWith('/pages') && !path.startsWith('/snippets')) {
+    return false;
+  }
+  return !!findInDirentLikes(path);
+}
+
+export function realpathSync() {
+  return true;
+}
+
+const cloudflareContextSymbol = Symbol.for('__cloudflare-context__');
+
+export function createReadStream(path) {
+  const { env } = global[cloudflareContextSymbol];
+  // Note: we only care about the url's path, the domain is not relevant here
+  const url = new URL(`/${path}`, 'http://0.0.0.0');
+  return env.ASSETS.fetch(url);
+}
+
+export default {
+  readdir,
+  exists,
+  existsSync,
+  realpathSync,
+  promises: fsPromises,
+};

apps/site/.cloudflare/node/fs/promises.mjs

@@ -0,0 +1,25 @@
+const cloudflareContextSymbol = Symbol.for('__cloudflare-context__');
+
+export async function readFile(path) {
+  const { env } = global[cloudflareContextSymbol];
+
+  // Note: we only care about the url's path, the domain is not relevant here
+  const url = new URL(`/${path}`, 'http://0.0.0.0');
+  const response = await env.ASSETS.fetch(url);
+  const text = await response.text();
+  return text;
+}
+
+export async function readdir() {
+  return [];
+}
+
+export async function exists() {
+  return false;
+}
+
+export default {
+  readdir,
+  exists,
+  readFile,
+};

apps/site/.cloudflare/node/readline.ts

@@ -0,0 +1,72 @@
+export function createInterface({ input }: { input: Promise<Response> }) {
+  const resp = input.then(resp => resp.body!.getReader());
+  let closed = false;
+  let closeCallback: (...args: Array<unknown>) => void;
+
+  return {
+    on: (
+      event: 'line' | 'close' | string,
+      callback: (...args: Array<unknown>) => void
+    ) => {
+      if (event !== 'line' && event !== 'close') {
+        throw new Error(
+          `readline interface \`on\`, wrong event provided: ${event}`
+        );
+      }
+
+      if (event === 'line') {
+        const textDecoder = new TextDecoder();
+        let text = '';
+        const lineCallback = (...args: Array<unknown>) => {
+          if (!closed) {
+            callback?.(...args);
+          }
+        };
+
+        const emitLines = (done = false) => {
+          const newLineIdx = text.indexOf('\n');
+          if (newLineIdx === -1) {
+            if (done) {
+              lineCallback(text);
+            }
+            return;
+          }
+          const toEmit = text.slice(0, newLineIdx);
+          lineCallback(toEmit);
+          text = text.slice(newLineIdx + 1);
+          emitLines();
+        };
+
+        const read = () => {
+          resp.then(s => {
+            s.read().then(({ done, value }) => {
+              text += textDecoder.decode(value);
+              emitLines();
+
+              if (!done) {
+                read();
+              } else {
+                closeCallback?.();
+              }
+            });
+          });
+        };
+
+        return read();
+      }
+
+      if (event === 'close') {
+        closeCallback = callback;
+        return;
+      }
+    },
+    close: () => {
+      closed = true;
+      closeCallback?.();
+    },
+  };
+}
+
+export default {
+  createInterface,
+};

apps/site/.cloudflare/prepare-build.mjs

@@ -0,0 +1,57 @@
+//@ts-check
+
+import nodeFs from 'node:fs/promises';
+import nodePath from 'node:path';
+
+await collectAndCopyDirToAssets('./pages');
+await collectAndCopyDirToAssets('./snippets');
+
+/**
+ * @param {string} path
+ * @returns {Promise<void>}
+ */
+async function collectAndCopyDirToAssets(path) {
+  await nodeFs.cp(path, nodePath.join('./.open-next/assets', path), {
+    recursive: true,
+    force: true,
+  });
+
+  const pagesChildren = await collectDirChildren(path);
+  await nodeFs.mkdir('./.cloudflare/.asset-manifests/', { recursive: true });
+  await nodeFs.writeFile(
+    `./.cloudflare/.asset-manifests/${nodePath.basename(path)}.mjs`,
+    `export default ${JSON.stringify(pagesChildren)}`
+  );
+}
+
+/**
+ * @param {string} path
+ * @returns {Promise<DirentLike[]>}
+ */
+async function collectDirChildren(path) {
+  const dirContent = await nodeFs.readdir(path, { withFileTypes: true });
+
+  return Promise.all(
+    dirContent.map(async item => {
+      const base = {
+        name: item.name,
+        parentPath: item.parentPath,
+      };
+      if (item.isFile()) {
+        return { ...base, type: 'file' };
+      } else {
+        const dirInfo = await collectDirChildren(
+          `${item.parentPath}/${item.name}`
+        );
+        return { ...base, type: 'directory', children: dirInfo };
+      }
+    })
+  );
+}
+
+/**
+ * @typedef {{ name: string, parentPath: string } } DirentLikeBase
+ * @typedef {DirentLikeBase & { type: 'file' }} DirentLikeFile
+ * @typedef {DirentLikeBase & { type: 'directory', children: DirentLike[] }} DirentLikeDir
+ * @typedef {DirentLikeFile|DirentLikeDir} DirentLike
+ */

apps/site/app/[locale]/feed/[feed]/route.ts

@@ -14,7 +14,7 @@ export const GET = async (_: Request, props: StaticParams) => {
   const params = await props.params;
 
   // Generate the Feed for the given feed type (blog, releases, etc)
-  const websiteFeed = provideWebsiteFeeds(params.feed);
+  const websiteFeed = await provideWebsiteFeeds(params.feed);
 
   return new NextResponse(websiteFeed, {
     headers: { 'Content-Type': 'application/xml' },

apps/site/app/[locale]/next-data/api-data/route.ts

@@ -21,7 +21,7 @@ const getPathnameForApiFile = (name: string, version: string) =>
 // for a digest and metadata of all API pages from the Node.js Website
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
 export const GET = async () => {
-  const releases = provideReleaseData();
+  const releases = await provideReleaseData();
 
   const { versionWithPrefix } = releases.find(
     release => release.status === 'LTS'

apps/site/app/[locale]/next-data/blog-data/[category]/[page]/route.ts

@@ -20,12 +20,11 @@ export const GET = async (_: Request, props: StaticParams) => {
 
   const requestedPage = Number(params.page);
 
-  const data =
-    requestedPage >= 1
-      ? // This allows us to blindly get all blog posts from a given category
-        // if the page number is 0 or something smaller than 1
-        providePaginatedBlogPosts(params.category, requestedPage)
-      : provideBlogPosts(params.category);
+  const data = await (requestedPage >= 1
+    ? // This allows us to blindly get all blog posts from a given category
+      // if the page number is 0 or something smaller than 1
+      providePaginatedBlogPosts(params.category, requestedPage)
+    : provideBlogPosts(params.category));
 
   return Response.json(data, { status: data.posts.length ? 200 : 404 });
 };

apps/site/app/[locale]/next-data/download-snippets/route.tsx

@@ -11,7 +11,7 @@ export const GET = async (_: Request, props: StaticParams) => {
   const params = await props.params;
 
   // Retrieve all available Download snippets for a given locale if available
-  const snippets = provideDownloadSnippets(params.locale);
+  const snippets = await provideDownloadSnippets(params.locale);
 
   // We append always the default/fallback snippets when a result is found
   return Response.json(snippets, {

apps/site/app/[locale]/next-data/release-data/route.ts

@@ -5,7 +5,7 @@ import { defaultLocale } from '@/next.locales.mjs';
 // for generating static data related to the Node.js Release Data
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
 export const GET = async () => {
-  const releaseData = provideReleaseData();
+  const releaseData = await provideReleaseData();
 
   return Response.json(releaseData);
 };