feat(website/i18n): render pages by locale

apps/website/src/components/Header.tsx

@@ -1,13 +1,14 @@
 import "./Header.css";
 import { Link } from "./Button.js";
 import { SocialButtons, SocialButton } from "./Footer.js";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { useLocation } from 'preact-iso';
 import DownloadButton from './DownloadButton.js';
 import githubIcon from "../assets/boxicons/bx-github.svg?raw";
 import Icon from "./Icon.js";
 import logoPath from "../assets/icon-color.svg";
 import menuIcon from "../assets/boxicons/bx-menu.svg?raw";
+import { LocaleContext } from "..";
 
 interface HeaderLink {
     url: string;
@@ -23,6 +24,7 @@ const HEADER_LINKS: HeaderLink[] = [
 
 export function Header(props: {repoStargazersCount: number}) {
 	const { url } = useLocation();
+    const locale = useContext(LocaleContext);
     const [ mobileMenuShown, setMobileMenuShown ] = useState(false);
 
 	return (
@@ -48,7 +50,7 @@ export function Header(props: {repoStargazersCount: number}) {
                 <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
                     {HEADER_LINKS.map(link => (
                         <Link
-                            href={link.url}
+                            href={link.external ? link.url : `/${locale}${link.url}`}
                             className={url === link.url ? "active" : ""}
                             openExternally={link.external}
                             onClick={() => {
@@ -74,4 +76,4 @@ export function Header(props: {repoStargazersCount: number}) {
             </div>
 		</header>
 	);
-}
+}

apps/website/src/index.tsx

@@ -2,29 +2,45 @@ import './style.css';
 import { FALLBACK_STARGAZERS_COUNT, getRepoStargazersCount } from './github-utils.js';
 import { Header } from './components/Header.jsx';
 import { Home } from './pages/Home/index.jsx';
-import { LocationProvider, Router, Route, hydrate, prerender as ssr } from 'preact-iso';
+import { LocationProvider, Router, Route, hydrate, prerender as ssr, useLocation } from 'preact-iso';
 import { NotFound } from './pages/_404.jsx';
 import Footer from './components/Footer.js';
 import GetStarted from './pages/GetStarted/get-started.js';
 import SupportUs from './pages/SupportUs/SupportUs.js';
+import { createContext } from 'preact';
+
+export const LocaleContext = createContext('en');
 
 export function App(props: {repoStargazersCount: number}) {
 	return (
 		<LocationProvider>
-			<Header repoStargazersCount={props.repoStargazersCount} />
-			<main>
-				<Router>
-                    <Route path="/" component={Home} />
-					<Route default component={NotFound} />
-                    <Route path="/get-started" component={GetStarted} />
-                    <Route path="/support-us" component={SupportUs} />
-				</Router>
-			</main>
-            <Footer />
+            <LocaleProvider>
+                <Header repoStargazersCount={props.repoStargazersCount} />
+                <main>
+                    <Router>
+                        <Route path="/:locale:/" component={Home} />
+                        <Route default component={NotFound} />
+                        <Route path="/:locale:/get-started" component={GetStarted} />
+                        <Route path="/:locale:/support-us" component={SupportUs} />
+                    </Router>
+                </main>
+                <Footer />
+            </LocaleProvider>
 		</LocationProvider>
 	);
 }
 
+export function LocaleProvider({ children }) {
+  const { path } = useLocation();
+  const locale = path.split('/')[1] || 'en';
+
+  return (
+    <LocaleContext.Provider value={locale}>
+      {children}
+    </LocaleContext.Provider>
+  );
+}
+
 if (typeof window !== 'undefined') {
 	hydrate(<App repoStargazersCount={FALLBACK_STARGAZERS_COUNT} />, document.getElementById('app')!);
 }