Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-29 09:16:45 +01:00
Code Issues Packages Projects Releases Activity

feat(website/i18n): render pages by locale

Browse Source
This commit is contained in:
Elian Doran
2025-10-25 18:54:24 +03:00
parent 1a6f5a027f
commit 49cf7ae1a3
2 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/website/src/components/Header.tsx
View File

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

38
apps/website/src/index.tsx
View File

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