feat(language-menu): add "Remember language" experiment

cloud-function/package.json

@@ -36,6 +36,7 @@
     "@yari-internal/pong": "file:src/internal/pong",
     "@yari-internal/slug-utils": "file:src/internal/slug-utils",
     "accept-language-parser": "^1.5.0",
+    "cookie-parser": "^1.4.6",
     "dotenv": "^16.0.3",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0",
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@swc/core": "^1.3.38",
     "@types/accept-language-parser": "^1.5.3",
+    "@types/cookie-parser": "^1.4.7",
     "@types/http-proxy": "^1.17.10",
     "@types/http-server": "^0.12.1",
     "cross-env": "^7.0.3",

cloud-function/src/app.ts

@@ -1,3 +1,4 @@
+import cookieParser from "cookie-parser";
 import express, { Request, Response } from "express";
 import { Router } from "express";
 
@@ -16,6 +17,7 @@ import { redirectMovedPages } from "./middlewares/redirect-moved-pages.js";
 import { redirectEnforceTrailingSlash } from "./middlewares/redirect-enforce-trailing-slash.js";
 import { redirectFundamental } from "./middlewares/redirect-fundamental.js";
 import { redirectLocale } from "./middlewares/redirect-locale.js";
+import { redirectPreferredLocale } from "./middlewares/redirect-preferred-locale.js";
 import { redirectTrailingSlash } from "./middlewares/redirect-trailing-slash.js";
 import { requireOrigin } from "./middlewares/require-origin.js";
 import { notFound } from "./middlewares/not-found.js";
@@ -25,6 +27,7 @@ import { stripForwardedHostHeaders } from "./middlewares/stripForwardedHostHeade
 import { proxyPong } from "./handlers/proxy-pong.js";
 
 const router = Router();
+router.use(cookieParser());
 router.use(stripForwardedHostHeaders);
 router.use(redirectLeadingSlash);
 // MDN Plus plans.
@@ -85,6 +88,7 @@ router.get(
   requireOrigin(Origin.main),
   redirectFundamental,
   redirectLocale,
+  redirectPreferredLocale,
   redirectTrailingSlash,
   redirectMovedPages,
   resolveIndexHTML,

cloud-function/src/canonicals.ts

@@ -0,0 +1,5 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+export const CANONICALS = require("../canonicals.json");

cloud-function/src/middlewares/redirect-non-canonicals.ts

@@ -1,12 +1,9 @@
-import { createRequire } from "node:module";
-
 import { NextFunction, Request, Response } from "express";
 
 import { THIRTY_DAYS } from "../constants.js";
 import { normalizePath, redirect } from "../utils.js";
+import { CANONICALS } from "../canonicals.js";
 
-const require = createRequire(import.meta.url);
-const REDIRECTS = require("../../canonicals.json");
 const REDIRECT_SUFFIXES = ["/index.json", "/bcd.json", ""];
 
 export async function redirectNonCanonicals(
@@ -31,10 +28,10 @@ export async function redirectNonCanonicals(
     );
     const source = normalizePath(originalSource);
     if (
-      typeof REDIRECTS[source] == "string" &&
-      REDIRECTS[source] !== originalSource
+      typeof CANONICALS[source] == "string" &&
+      CANONICALS[source] !== originalSource
     ) {
-      const target = joinPath(REDIRECTS[source], suffix) + parsedUrl.search;
+      const target = joinPath(CANONICALS[source], suffix) + parsedUrl.search;
       if (pathname !== target) {
         return redirect(res, target, {
           status: 301,

cloud-function/src/middlewares/redirect-preferred-locale.ts

@@ -0,0 +1,47 @@
+import { NextFunction, Request, Response } from "express";
+import { normalizePath, redirect } from "../utils.js";
+import { CANONICALS } from "../canonicals.js";
+
+export async function redirectPreferredLocale(
+  req: Request,
+  res: Response,
+  next: NextFunction
+) {
+  // Check 1: Does the user prefer a locale?
+
+  const preferredLocale = req.cookies["preferredlocale"];
+
+  if (!preferredLocale) {
+    next();
+    return;
+  }
+
+  // Check 2: Does the target have a different locale?
+
+  const target = new URL(req.url, `${req.protocol}://${req.headers.host}`);
+  const targetPathname = target.pathname;
+  const [targetLocale, targetSlug] = localeAndSlugOf(target);
+
+  if (targetLocale.toLowerCase() === preferredLocale.toLowerCase()) {
+    next();
+    return;
+  }
+
+  // Check 3: Does the target exist in the preferred locale?
+
+  const preferredPathname =
+    CANONICALS[normalizePath(`/${preferredLocale}/${targetSlug}`)] ?? null;
+  if (preferredPathname && preferredPathname !== targetPathname) {
+    const location = preferredPathname + target.search;
+    return redirect(res, location);
+  }
+
+  next();
+}
+
+function localeAndSlugOf(url: URL): [string, string] {
+  const locale = url.pathname.split("/").at(1) || "";
+  const slug = url.pathname.split("/").slice(2).join("/");
+
+  return [locale, slug];
+}