fixup!

Author: avivkeller

.github/CODEOWNERS

@@ -17,7 +17,7 @@ apps/site/next.config.mjs @nodejs/web-infra
 apps/site/next.dynamic.mjs @nodejs/web-infra
 apps/site/middleware.ts @nodejs/web-infra
 apps/site/navigation.mjs @nodejs/web-infra
-apps/site/playwright.config.ts @nodejs/web-infra
+apps/site/playwright.config.mjs @nodejs/web-infra
 
 # Package Ecosystem
 package.json @nodejs/nodejs-website
@@ -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,11 @@ jobs:
         working-directory: apps/site
         run: node_modules/.bin/playwright install --with-deps
 
+      - name: Build OpenNext worker
+        run: pnpm --filter=@node-core/platform-cloudflare build:worker
+
       - name: Run Playwright tests
-        working-directory: apps/site
-        run: node --run playwright
-        env:
-          PLAYWRIGHT_RUN_CLOUDFLARE_PREVIEW: true
-          PLAYWRIGHT_BASE_URL: http://127.0.0.1:8787
+        run: pnpm --filter=@node-core/platform-cloudflare test:e2e
 
       - name: Upload Playwright test results
         if: always()

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

@@ -57,12 +57,10 @@ jobs:
         run: node --run build:blog-data
 
       - name: Build open-next site
-        working-directory: apps/site
-        run: node --run cloudflare:build:worker
+        run: pnpm --filter=@node-core/platform-cloudflare build:worker
 
       - name: Deploy open-next site
-        working-directory: apps/site
-        run: node --run cloudflare:deploy
+        run: pnpm --filter=@node-core/platform-cloudflare deploy:worker
         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

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

@@ -1,12 +1,10 @@
 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 PlatformAnalytics from '#site/platform/analytics';
 import { ThemeProvider } from '#site/providers/themeProvider';
 
 import type { FC, PropsWithChildren } from 'react';
@@ -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,11 @@
-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 const register = async () => {
+  // `NEXT_PUBLIC_DEPLOYMENT_PLATFORM` is a build-time constant (see
+  // `next.config.mjs`), so the platforms we are not building for are never
+  // bundled. Only Vercel currently provides instrumentation.
+  if (process.env.NEXT_PUBLIC_DEPLOYMENT_PLATFORM === 'vercel') {
+    const { register } =
+      await import('@node-core/platform-vercel/instrumentation');
+
+    register();
   }
-}
+};

apps/site/mdx/plugins.mjs

@@ -7,35 +7,19 @@ 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,
-});
+// Shiki is created out here to avoid an async rehype plugin.
+//
+// `NEXT_PUBLIC_DEPLOYMENT_PLATFORM` is a build-time constant (see
+// `next.config.mjs`), so the Cloudflare-specific options (which cannot use
+// the WASM engine nor a filesystem-backed Twoslash) are only bundled on
+// Cloudflare builds; everywhere else we use the faster WASM engine.
+const singletonShiki = await rehypeShikiji(
+  process.env.NEXT_PUBLIC_DEPLOYMENT_PLATFORM === 'cloudflare'
+    ? (await import('@node-core/platform-cloudflare/shiki.mjs')).shikiOptions
+    : { wasm: true, twoslash: true }
+);
 
 /**
  * Provides all our Rehype Plugins that are used within MDX

apps/site/next.config.mjs

@@ -1,22 +1,23 @@
 'use strict';
 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');
+/**
+ * The deployment platform this build targets. All platform-specific behavior
+ * lives in the `platforms/*` workspace packages; see `platforms/README.md`.
+ *
+ * Vercel deployments are detected automatically; the Cloudflare build scripts
+ * set the variable themselves.
+ */
+const DEPLOYMENT_PLATFORM =
+  process.env.NEXT_PUBLIC_DEPLOYMENT_PLATFORM ||
+  (process.env.VERCEL ? 'vercel' : 'default');
 
-    return openNextAdapter.getDeploymentId();
-  }
-
-  return undefined;
-};
+const { default: platformConfig } = await import(
+  `@node-core/platform-${DEPLOYMENT_PLATFORM}/next.config.mjs`
+);
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -27,8 +28,19 @@ const nextConfig = {
   // 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(),
+  images: {
+    // We disable image optimisation during static export builds
+    unoptimized: ENABLE_STATIC_EXPORT,
+    // We add it to the remote pattern for the static images we use from multiple sources
+    // to be marked as safe sources (these come from Markdown files)
+    remotePatterns: [
+      'https://avatars.githubusercontent.com/**',
+      'https://bestpractices.coreinfrastructure.org/**',
+      'https://raw.githubusercontent.com/nodejs/**',
+      'https://user-images.githubusercontent.com/**',
+      'https://website-assets.oramasearch.com/**',
+    ].map(url => new URL(url)),
+  },
   serverExternalPackages: ['twoslash'],
   outputFileTracingIncludes: {
     // Twoslash needs TypeScript declarations to function, and, by default, Next.js
@@ -81,8 +93,18 @@ const nextConfig = {
     // Faster Development Servers with Turbopack
     turbopackFileSystemCacheForDev: true,
   },
-  deploymentId: await getDeploymentId(),
 };
 
 const withNextIntl = createNextIntlPlugin('./i18n.tsx');
-export default withNextIntl(nextConfig);
+
+export default withNextIntl({
+  ...nextConfig,
+  ...platformConfig,
+  env: {
+    // Inlined into the bundles at build time so runtime code (e.g.
+    // `#site/platform/analytics`) can branch on the platform, letting
+    // bundlers drop the branches (and packages) of the other platforms.
+    NEXT_PUBLIC_DEPLOYMENT_PLATFORM: DEPLOYMENT_PLATFORM,
+    ...platformConfig.env,
+  },
+});