chore(monorepo): break out platform-specific code

Author: avivkeller

.github/CODEOWNERS

@@ -27,9 +27,7 @@ turbo.json @nodejs/nodejs-website @nodejs/web-infra
 crowdin.yml @nodejs/web-infra
 apps/site/redirects.json @nodejs/web-infra
 apps/site/site.json @nodejs/web-infra
-apps/site/wrangler.jsonc @nodejs/web-infra
-apps/site/open-next.config.ts @nodejs/web-infra
-apps/site/redirects.json @nodejs/web-infra
+platforms @nodejs/web-infra
 
 # Critical Documents
 LICENSE @nodejs/tsc

.github/workflows/playwright-cloudflare-open-next.yml

@@ -50,12 +50,13 @@ jobs:
         working-directory: apps/site
         run: node_modules/.bin/playwright install --with-deps
 
+      - name: Build OpenNext worker
+        working-directory: platforms/cloudflare
+        run: node --run build
+
       - name: Run Playwright tests
-        working-directory: apps/site
+        working-directory: platforms/cloudflare
         run: node --run playwright
-        env:
-          PLAYWRIGHT_RUN_CLOUDFLARE_PREVIEW: true
-          PLAYWRIGHT_BASE_URL: http://127.0.0.1:8787
 
       - name: Upload Playwright test results
         if: always()

.github/workflows/tmp-cloudflare-open-next-deploy.yml

@@ -57,12 +57,12 @@ jobs:
         run: node --run build:blog-data
 
       - name: Build open-next site
-        working-directory: apps/site
-        run: node --run cloudflare:build:worker
+        working-directory: platforms/cloudflare
+        run: node --run build
 
       - name: Deploy open-next site
-        working-directory: apps/site
-        run: node --run cloudflare:deploy
+        working-directory: platforms/cloudflare
+        run: node --run deploy
         env:
           CF_WORKERS_SCRIPTS_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.gitignore

@@ -15,7 +15,7 @@ apps/site/public/blog-data.json
 apps/site/next-env.d.ts
 
 # Generated Build Artifacts
-apps/site/generated
+platforms/cloudflare/generated
 
 # Test Runner
 junit.xml
@@ -44,8 +44,8 @@ tsconfig.tsbuildinfo
 dist/
 
 # Cloudflare Build Output
-apps/site/.open-next
-apps/site/.wrangler
+.open-next
+.wrangler
 
 ## Playwright
 test-results

apps/site/app/[locale]/layout.tsx

@@ -1,11 +1,9 @@
+import PlatformAnalytics from '#platform/analytics.tsx';
 import { availableLocales, defaultLocale } from '@node-core/website-i18n';
-import { Analytics } from '@vercel/analytics/react';
-import { SpeedInsights } from '@vercel/speed-insights/next';
 import classNames from 'classnames';
 import { NextIntlClientProvider } from 'next-intl';
 
 import BaseLayout from '#site/layouts/Base';
-import { VERCEL_ENV } from '#site/next.constants.mjs';
 import { IBM_PLEX_MONO, OPEN_SANS } from '#site/next.fonts';
 import { ThemeProvider } from '#site/providers/themeProvider';
 
@@ -46,12 +44,7 @@ const RootLayout: FC<RootLayoutProps> = async ({ children, params }) => {
           href="https://social.lfx.dev/@nodejs"
         />
 
-        {VERCEL_ENV && (
-          <>
-            <Analytics />
-            <SpeedInsights />
-          </>
-        )}
+        <PlatformAnalytics />
       </body>
     </html>
   );

apps/site/eslint.config.js

@@ -6,15 +6,7 @@ import baseConfig from '../../eslint.config.js';
 
 export default baseConfig.concat([
   {
-    ignores: [
-      'pages/en/blog/**/*.{md,mdx}/**',
-      'public',
-      'next-env.d.ts',
-      // The worker entrypoint is bundled by wrangler, not tsc. Its imports
-      // trigger a tsc crash (see tsconfig.json), so it is excluded from both
-      // type checking and ESLint's type-aware linting.
-      'cloudflare/worker-entrypoint.ts',
-    ],
+    ignores: ['pages/en/blog/**/*.{md,mdx}/**', 'public', 'next-env.d.ts'],
   },
 
   eslintReact.configs['recommended-typescript'],

apps/site/instrumentation.ts

@@ -1,7 +1 @@
-export async function register() {
-  if (!('Cloudflare' in globalThis)) {
-    // Note: we don't need to set up the Vercel OTEL if the application is running on Cloudflare
-    const { registerOTel } = await import('@vercel/otel');
-    registerOTel({ serviceName: 'nodejs-org' });
-  }
-}
+export { register } from '#platform/instrumentation.ts';

apps/site/mdx/plugins.mjs

@@ -1,41 +1,17 @@
 'use strict';
 
+import { shikiOptions } from '#platform/mdx.mjs';
 import rehypeShikiji from '@node-core/rehype-shiki/plugin';
 import remarkHeadings from '@vcarl/remark-headings';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import readingTime from 'remark-reading-time';
 
-import { createVfsTwoslasher } from './create-vfs-twoslasher.mjs';
 import remarkTableTitles from '../util/table';
 
-// TODO(@avivkeller): When available, use `OPEN_NEXT_CLOUDFLARE` environment
-// variable for detection instead of current method, which will enable better
-// tree-shaking.
-// Reference: https://github.com/nodejs/nodejs.org/pull/7896#issuecomment-3009480615
-const OPEN_NEXT_CLOUDFLARE = 'Cloudflare' in global;
-
 // Shiki is created out here to avoid an async rehype plugin
-const singletonShiki = await rehypeShikiji({
-  // We use the faster WASM engine on the server instead of the web-optimized version.
-  //
-  // Currently we fall back to the JavaScript RegEx engine
-  // on Cloudflare workers because `shiki/wasm` requires loading via
-  // `WebAssembly.instantiate` with custom imports, which Cloudflare doesn't support
-  // for security reasons.
-  wasm: !OPEN_NEXT_CLOUDFLARE,
-
-  twoslash: true,
-
-  // On Cloudflare Workers, the default filesystem-backed Twoslash cannot work
-  // because there is no real filesystem. Instead, we provide a custom twoslasher
-  // backed by an in-memory VFS pre-populated at build time with TypeScript
-  // lib declarations and @types/node.
-  twoslashOptions: OPEN_NEXT_CLOUDFLARE
-    ? { twoslasher: await createVfsTwoslasher() }
-    : undefined,
-});
+const singletonShiki = await rehypeShikiji(shikiOptions);
 
 /**
  * Provides all our Rehype Plugins that are used within MDX

apps/site/next.config.mjs

@@ -1,34 +1,21 @@
 'use strict';
+
+import platform from '#platform/next.config.mjs';
 import createNextIntlPlugin from 'next-intl/plugin';
 
-import { OPEN_NEXT_CLOUDFLARE } from './next.constants.cloudflare.mjs';
 import { BASE_PATH, ENABLE_STATIC_EXPORT } from './next.constants.mjs';
-import { getImagesConfig } from './next.image.config.mjs';
 import { redirects, rewrites } from './next.rewrites.mjs';
 
-const getDeploymentId = async () => {
-  if (OPEN_NEXT_CLOUDFLARE) {
-    // If we're building for the Cloudflare deployment we want to set
-    // an appropriate deploymentId (needed for skew protection)
-    const openNextAdapter = await import('@opennextjs/cloudflare');
-
-    return openNextAdapter.getDeploymentId();
-  }
-
-  return undefined;
-};
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  ...platform,
   // Full Support of React 18 SSR and Streaming
   reactCompiler: true,
   // We don't want to redirect with trailing slashes
   skipTrailingSlashRedirect: true,
   // We allow the BASE_PATH to be overridden in case that the Website
   // is being built on a subdirectory (e.g. /nodejs-website)
   basePath: BASE_PATH,
-  // Vercel/Next.js Image Optimization Settings
-  images: getImagesConfig(),
   serverExternalPackages: ['twoslash'],
   outputFileTracingIncludes: {
     // Twoslash needs TypeScript declarations to function, and, by default, Next.js
@@ -81,7 +68,6 @@ const nextConfig = {
     // Faster Development Servers with Turbopack
     turbopackFileSystemCacheForDev: true,
   },
-  deploymentId: await getDeploymentId(),
 };
 
 const withNextIntl = createNextIntlPlugin('./i18n.tsx');