chore(website/i18n): bring back root-level pages

apps/website/src/i18n.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { mapLocale, swapLocaleInUrl } from "./i18n";
+import { extractLocaleFromUrl, mapLocale, swapLocaleInUrl } from "./i18n";
 
 describe("mapLocale", () => {
     it("maps Chinese", () => {
@@ -21,3 +21,11 @@ describe("swapLocale", () => {
         expect(swapLocaleInUrl("/ro/", "en")).toStrictEqual("/en/");
     });
 });
+
+describe("extractLocaleFromUrl", () => {
+    it("properly extracts locale", () => {
+        expect(extractLocaleFromUrl("/en/get-started")).toStrictEqual("en");
+        expect(extractLocaleFromUrl("/get-started")).toStrictEqual(undefined);
+        expect(extractLocaleFromUrl("/")).toStrictEqual(undefined);
+    });
+});

apps/website/src/i18n.ts

@@ -41,3 +41,10 @@ export function swapLocaleInUrl(url: string, newLocale: string) {
         return components.join("/");
     }
 }
+
+export function extractLocaleFromUrl(url: string) {
+    const localeId = url.split('/')[1];
+    const correspondingLocale = LOCALES.find(l => l.id === localeId);
+    if (!correspondingLocale) return undefined;
+    return localeId;
+}

apps/website/src/index.tsx

@@ -10,7 +10,7 @@ import SupportUs from './pages/SupportUs/SupportUs.js';
 import { createContext } from 'preact';
 import { useLayoutEffect, useState } from 'preact/hooks';
 import { default as i18next, changeLanguage } from 'i18next';
-import { LOCALES, mapLocale } from './i18n';
+import { extractLocaleFromUrl, LOCALES, mapLocale } from './i18n';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from "react-i18next";
 
@@ -24,6 +24,8 @@ export function App(props: {repoStargazersCount: number}) {
                 <main>
                     <Router>
                         <Route path="/" component={Home} />
+                        <Route path="/get-started" component={GetStarted} />
+                        <Route path="/support-us" component={SupportUs} />
 
                         <Route path="/:locale:/" component={Home} />
                         <Route path="/:locale:/get-started" component={GetStarted} />
@@ -40,7 +42,7 @@ export function App(props: {repoStargazersCount: number}) {
 
 export function LocaleProvider({ children }) {
   const { path } = useLocation();
-  const localeId = mapLocale(path.split('/')[1] || navigator.language);
+  const localeId = mapLocale(extractLocaleFromUrl(path) || navigator.language);
   const [ loaded, setLoaded ] = useState(false);
 
   useLayoutEffect(() => {