feat: preserve locale with cookie

Author: canerakdas

components/Navigation/index.jsx

@@ -7,18 +7,24 @@ import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/Searc
 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 useLocalizedLink from '../../hooks/useLocalizedLink';
 
 /**
  * NavBar component that displays the headings, search, etc.
  */
 export default ({ metadata }) => {
   const [themePreference, setThemePreference] = useTheme();
+  const getLocalizedLink = useLocalizedLink();
+  const navItems = navigation.map((item) => ({
+    ...item,
+    link: getLocalizedLink(item.link),
+  }));
 
   return (
     <NavBar
       Logo={Logo}
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
-      navItems={navigation}
+      navItems={navItems}
     >
       <SearchBox pathname={metadata.path} />
       <ThemeToggle

hooks/useLocalizedLink.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import { defaultLocale } from '../site.json' with { type: 'json' };
+
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+/**
+ * Retrieves the locale from the NEXT_LOCALE cookie.
+ *
+ * @returns {string|null} The locale from the NEXT_LOCALE cookie, or null if not found.
+ */
+const getNextLocaleFromCookie = () => {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  const localeCookie = document.cookie
+    .split(';')
+    .map((cookie) => cookie.trim())
+    .find((cookie) => cookie.startsWith(`${LOCALE_COOKIE}=`));
+
+  if (!localeCookie) {
+    return null;
+  }
+
+  return decodeURIComponent(localeCookie.slice(LOCALE_COOKIE.length + 1));
+};
+
+/**
+ * Replaces the default locale in a link with the provided locale.
+ *
+ * @param {string} link - The link to be localized.
+ * @param {string|null} nextLocale - The locale to apply to the link.
+ * @returns {string} - The localized link.
+ */
+const replaceLocaleInLink = (link, nextLocale) => {
+  if (!link.startsWith('/') || !link.startsWith(`/${defaultLocale}`)) {
+    return link;
+  }
+
+  const localizedPrefix = nextLocale ? `/${nextLocale}` : '';
+
+  if (link === `/${defaultLocale}`) {
+    return localizedPrefix || '/';
+  }
+
+  return link.replace(`/${defaultLocale}/`, `${localizedPrefix}/`);
+};
+
+/**
+ * Localizes a given link based on the provided locale.
+ *
+ * @param {string} link - The link to be localized.
+ * @param {string|null} nextLocale - The locale to apply to the link.
+ * @returns {string} - The localized link.
+ */
+const localizeLink = (link, nextLocale) => {
+  if (nextLocale === null) {
+    return link;
+  }
+
+  return replaceLocaleInLink(link, nextLocale);
+};
+
+/**
+ * Custom hook to get a function that localizes links based on the NEXT_LOCALE cookie.
+ * @returns {function(string): string} A function that takes a link and returns the localized version of that link.
+ */
+const useLocalizedLink = () => {
+  const [nextLocale, setNextLocale] = useState(null);
+
+  useEffect(() => {
+    setNextLocale(getNextLocaleFromCookie());
+  }, []);
+
+  return (link) => localizeLink(link, nextLocale);
+};
+
+export default useLocalizedLink;

site.json

@@ -1,4 +1,5 @@
 {
+  "defaultLocale": "en",
   "navigation": [
     {
       "link": "/learn",