feat: Preserve locale with cookie & react-intl

components/Layout/index.jsx

@@ -7,6 +7,7 @@ import NavBar from '../Navigation';
 import MetaBar from '../Metabar';
 import SideBar from '../Sidebar';
 import Footer from '../Footer';
+import LocaleProvider from '../providers/LocaleProvider';
 
 /**
  * @typedef {Object} Props
@@ -20,7 +21,7 @@ import Footer from '../Footer';
  * @param {Props} props
  */
 export default ({ metadata, headings, readingTime, children }) => (
-  <>
+  <LocaleProvider>
     <Analytics basePath="/learn/_vercel" />
     <SpeedInsights basePath="/learn/_vercel" />
     <NavBar metadata={metadata} />
@@ -40,5 +41,5 @@ export default ({ metadata, headings, readingTime, children }) => (
       </div>
     </Article>
     <Footer metadata={metadata} />
-  </>
+  </LocaleProvider>
 );

components/Navigation/index.jsx

@@ -2,23 +2,31 @@ import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
-
 import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/SearchBox';
 import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
+
 import { navigation } from '../../site.json' with { type: 'json' };
 import Logo from '#theme/Logo';
+import { useLocale } from '../providers/LocaleProvider';
+import { useMemo } from 'preact/hooks';
 
 /**
  * NavBar component that displays the headings, search, etc.
  */
 export default ({ metadata }) => {
   const [themePreference, setThemePreference] = useTheme();
+  const { localizeLink } = useLocale();
+
+  const navigationItems = useMemo(
+    () => navigation.map(item => ({ ...item, link: localizeLink(item.link) })),
+    [localizeLink]
+  );
 
   return (
     <NavBar
       Logo={Logo}
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
-      navItems={navigation}
+      navItems={navigationItems}
     >
       <SearchBox pathname={metadata.path} />
       <ThemeToggle

components/providers/LocaleProvider.jsx

@@ -0,0 +1,66 @@
+import { createContext } from 'preact';
+import { useContext, useState, useEffect } from 'preact/hooks';
+
+import { defaultLocale } from '../../site.json' with { type: 'json' };
+
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+/**
+ * Replaces the default locale prefix in a link with the given locale.
+ *
+ * @param {string} link
+ * @param {string} locale
+ * @returns {string}
+ */
+const localizeLink = (link, locale) =>
+  link.replace(new RegExp(`^/${defaultLocale}(?=/|$)`), `/${locale}`);
+
+/**
+ * Detects the locale from the NEXT_LOCALE cookie.
+ * Falls back to the default locale when the cookie is missing.
+ *
+ * @returns {string}
+ */
+export const detectLocaleFromCookies = () => {
+  if (typeof document === 'undefined') {
+    return defaultLocale;
+  }
+
+  const match = document.cookie
+    .split(';')
+    .map(cookie => cookie.trim())
+    .find(cookie => cookie.startsWith(`${LOCALE_COOKIE}=`));
+
+  return match
+    ? decodeURIComponent(match.slice(LOCALE_COOKIE.length + 1))
+    : defaultLocale;
+};
+
+const LocaleContext = createContext({
+  locale: defaultLocale,
+  localizeLink: link => link,
+});
+
+export const useLocale = () => useContext(LocaleContext);
+
+/**
+ * Provides locale and a pre-bound localizeLink fn to the component tree.
+ *
+ * @param {{ locale?: string, children: import('preact').ComponentChildren }} props
+ */
+export default function LocaleProvider({ locale, children }) {
+  const [detectedLocale, setDetectedLocale] = useState(defaultLocale);
+
+  useEffect(() => {
+    setDetectedLocale(locale ?? detectLocaleFromCookies());
+  }, [locale]);
+
+  const value = {
+    locale: detectedLocale,
+    localizeLink: link => localizeLink(link, detectedLocale),
+  };
+
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  );
+}

site.json

@@ -1,19 +1,20 @@
 {
+  "defaultLocale": "en",
   "navigation": [
     {
       "link": "/learn",
       "text": "Learn"
     },
     {
-      "link": "/about",
+      "link": "/en/about",
       "text": "About"
     },
     {
       "link": "/en/download",
       "text": "Download"
     },
     {
-      "link": "/blog",
+      "link": "/en/blog",
       "text": "Blog"
     },
     {