SLB-469: redirects for RSC files

apps/website/netlify.toml

@@ -10,7 +10,7 @@ edge_functions = "netlify/edge-functions"
 command = "true"
 
 [functions.strangler]
-included_files = ["dist/public/404.html"]
+included_files = ["dist/public/404.html", "dist/public/RSC/404.txt"]
 
 [[edge_functions]]
 path = "/"

apps/website/netlify/functions/strangler.ts

@@ -1,15 +1,60 @@
 import { createStrangler } from '@amazeelabs/strangler-netlify';
 import fs from 'fs';
 
+const drupalUrl =
+  process.env.DRUPAL_INTERNAL_URL ||
+  process.env.DRUPAL_EXTERNAL_URL ||
+  'http://127.0.0.1:8888';
+
+function encodeRSCUrl(inputUrl: string) {
+  const url = new URL(inputUrl, 'http://localhost');
+  url.pathname = `/RSC${url.pathname}.txt`;
+  return url;
+}
+
+function decodeRSCUrl(inputUrl: string) {
+  const url = new URL(inputUrl, 'http://localhost');
+  url.pathname = url.pathname.replace(/^\/RSC/, '').replace(/\.txt$/, '');
+  return url;
+}
+
+const notFoundRSC = fs.readFileSync('dist/public/RSC/404.txt').toString();
+
 export const handler = createStrangler(
   [
+    {
+      url: drupalUrl,
+      applies: (url) => url.pathname.startsWith('/RSC/'),
+      preprocess: (event) => {
+        // Before handling, turn the RSC url into the corresponding Drupal url.
+        event.rawUrl = decodeRSCUrl(event.rawUrl).toString();
+        event.path = decodeRSCUrl(event.path).pathname;
+        return event;
+      },
+      process: (response) => {
+        if ([301, 302].includes(response.status)) {
+          const location = response.headers.get('Location');
+          if (location) {
+            return new Response(response.body, {
+              status: response.status,
+              headers: {
+                ...response.headers,
+                // After handling, turn the resulting redirect target
+                // into the corresponding RSC url.
+                Location: encodeRSCUrl(location).toString(),
+              },
+            });
+          }
+        }
+        return new Response(notFoundRSC, {
+          status: 404,
+        });
+      },
+    },
     {
       // For Standard drupal redirects, we are interested in any
       // url (therefore no urlFilter) and only in redirects (301, 302).
-      url:
-        process.env.DRUPAL_INTERNAL_URL ||
-        process.env.DRUPAL_EXTERNAL_URL ||
-        'http://127.0.0.1:8888',
+      url: drupalUrl,
       process: (response) =>
         [301, 302].includes(response.status) ? response : undefined,
     },

apps/website/package.json

@@ -9,7 +9,7 @@
     "@amazeelabs/gatsby-plugin-static-dirs": "^1.0.1",
     "@amazeelabs/gatsby-source-silverback": "^1.14.0",
     "@amazeelabs/publisher": "^2.4.36",
-    "@amazeelabs/strangler-netlify": "^1.1.9",
+    "@amazeelabs/strangler-netlify": "^1.2.1",
     "@amazeelabs/token-auth-middleware": "^1.1.1",
     "@custom/cms": "workspace:*",
     "@custom/decap": "workspace:*",

apps/website/src/build/redirects.ts

@@ -135,12 +135,13 @@ function writeRedirectsNetlify(config: RedirectsOutputConfig) {
   }
 
   redirectsPool.forEach((value) => {
-    let redirectEntry = `${value.source} ${value.destination} ${value.statusCode}`;
+    let redirectEntry = `\n${value.source} ${value.destination} ${value.statusCode}`;
     if (value.force) {
       redirectEntry += '!';
     }
-    redirectEntry += `
-`;
+    if ([301, 302].includes(value.statusCode)) {
+      redirectEntry += `\n/RSC${value.source}.txt /RSC${value.destination}.txt ${value.statusCode}`;
+    }
 
     fs.appendFileSync(`${config.outputFile}`, redirectEntry);
   });

packages/ui/src/components/Molecules/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Link } from '@custom/schema';
+import { Link, Locale } from '@custom/schema';
 import {
   ChevronRightIcon,
   EllipsisHorizontalIcon,
@@ -11,6 +11,9 @@ import { isTruthy } from '../../utils/isTruthy';
 import { truncateString } from '../../utils/stringTruncation';
 import { useBreadcrumbs } from '../Routes/Menu';
 
+// Paths that lead to the home page and should display the home icon.
+const home_paths = Object.values(Locale).map((locale) => `/${locale}`);
+
 export function BreadCrumbs() {
   const breadcrumbs = useBreadcrumbs();
   const [hideInnerBreadcrumbs, setHideInnerBreadcrumbs] = useState(false);
@@ -97,7 +100,7 @@ export function BreadCrumbs() {
                       'hidden',
                   )}
                 >
-                  {target === '/' && (
+                  {home_paths.includes(target) && (
                     <svg
                       className="w-4 h-4 mr-4"
                       aria-hidden="true"

packages/ui/src/components/Organisms/Header.tsx

@@ -66,7 +66,10 @@ export function Header() {
             aria-label="Global"
           >
             <div className="flex lg:flex-1">
-              <Link href={'/' as Url} className="-ml-1 mt-1 md:-mt-2.5">
+              <Link
+                href={`/${intl.locale}` as Url}
+                className="-ml-1 mt-1 md:-mt-2.5"
+              >
                 <span className="sr-only">
                   {intl.formatMessage({
                     defaultMessage: 'Company name',

packages/ui/src/components/Routes/Menu.tsx

@@ -2,6 +2,7 @@ import { useIntl } from '@amazeelabs/react-intl';
 import { FrameQuery, NavigationItem, Url, useLocation } from '@custom/schema';
 
 import { useOperation } from '../../utils/operation';
+import { useLocale } from '../../utils/locale';
 
 export type MenuNameType = 'main' | 'footer';
 
@@ -60,6 +61,7 @@ export function useMenuAncestors(path: string, menuName: MenuNameType) {
   const menuItemFromPath = useMenuItem(path, menuName);
   let processingMenuItem = menuItemFromPath;
   const ancestors: Array<NavigationItem> = [];
+  const locale = useLocale();
 
   // Set current page breadcrumb
   if (typeof processingMenuItem !== 'undefined') {
@@ -81,7 +83,7 @@ export function useMenuAncestors(path: string, menuName: MenuNameType) {
     }
   }
   if (ancestors.length > 0) {
-    ancestors.push({ id: '_', target: '/' as Url, title: 'Home' });
+    ancestors.push({ id: '_', target: `/${locale}` as Url, title: 'Home' });
     // Pop off the current path, we dont care about it
     ancestors.reverse().pop();
   }

tests/e2e/helpers/quick-actions.ts

@@ -13,6 +13,7 @@ export class QuickActions {
   }
 
   async changeLanguageTo(language: SiteLanguage): Promise<void> {
+    await this.page.waitForLoadState('networkidle');
     // Open the language switcher.
     await this.page
       .locator("(//button[contains(@aria-haspopup, 'menu')])[1]")

tests/e2e/specs/drupal/inquiry.spec.ts

@@ -5,6 +5,7 @@ import { websiteUrl } from '../../helpers/url';
 test.describe('inquiry (mutation example)', () => {
   test('succesfull inquiry submission', async ({ page }) => {
     await page.goto(websiteUrl('/en/inquiry'));
+    await page.waitForLoadState('networkidle');
     const content = await page.getByRole('main');
     await content.getByPlaceholder('Name').fill('John Doe');
     await content.getByPlaceholder('Email').fill('[email protected]');
@@ -22,6 +23,7 @@ test.describe('inquiry (mutation example)', () => {
 
   test('invalid e-mail address', async ({ page }) => {
     await page.goto(websiteUrl('/en/inquiry'));
+    await page.waitForLoadState('networkidle');
     const content = await page.getByRole('main');
     await content.getByPlaceholder('Name').fill('John Doe');
     await content.getByPlaceholder('Email').fill('john');