|
1 | | -// app/layout.tsx |
| 1 | +import type { Metadata } from "next"; |
| 2 | +import { Footer, Layout, Navbar } from "nextra-theme-docs"; |
| 3 | +import { Banner, Head } from "nextra/components"; |
| 4 | +import { getPageMap } from "nextra/page-map"; |
| 5 | +import "nextra-theme-docs/style.css"; |
| 6 | +import "./styles.css"; |
| 7 | +import { PageMapItem, Folder, MdxFile } from "nextra"; |
| 8 | +import { getDictionary } from "@/dictionaries/get-dictionary"; |
| 9 | +import Image from "next/image"; |
2 | 10 |
|
3 | | -"use client"; // Enables client-side rendering for components that use hooks |
4 | | -import "./styles.css"; // Import global CSS |
| 11 | +export async function generateStaticParams() { |
| 12 | + return [{ lang: "en" }, { lang: "de" }]; |
| 13 | +} |
| 14 | + |
| 15 | +export const metadata: Metadata = { |
| 16 | + description: "DIY PID Controller für deine Espressomaschine", |
| 17 | + title: { |
| 18 | + absolute: "", |
| 19 | + template: "%s | CC" |
| 20 | + }, |
| 21 | + other: { |
| 22 | + "msapplication-TileColor": "#fff" |
| 23 | + } |
| 24 | +}; |
| 25 | + |
| 26 | +function isFolder(item: PageMapItem): item is Folder { |
| 27 | + return (item as Folder).children !== undefined; |
| 28 | +} |
| 29 | + |
| 30 | +function hasRoute(item: PageMapItem): item is Folder | MdxFile { |
| 31 | + return "route" in item; |
| 32 | +} |
| 33 | + |
| 34 | +function localizeRoute(item: PageMapItem, lang: string): PageMapItem { |
| 35 | + const result = { ...item }; |
| 36 | + if (hasRoute(result)) { |
| 37 | + result.route = result.route.replace("/", `/${lang}/`); |
| 38 | + } |
| 39 | + if (isFolder(result)) { |
| 40 | + result.children = result.children.map((child) => localizeRoute(child, lang)); |
| 41 | + } |
| 42 | + return result; |
| 43 | +} |
| 44 | + |
| 45 | +export default async function RootLayout({ |
| 46 | + children, |
| 47 | + params |
| 48 | +}: { |
| 49 | + children: React.ReactNode; |
| 50 | + params: Promise<{ lang?: string }>; |
| 51 | +}) { |
| 52 | + const lang = (await params).lang ?? "de"; |
| 53 | + let pageMap = await getPageMap(`/${lang}`); |
| 54 | + const dictionary = await getDictionary(lang); |
| 55 | + |
| 56 | + // Localize routes (TODO: This should be done in the page-map module by nextra) |
| 57 | + pageMap = [...pageMap.map((page: PageMapItem) => localizeRoute(page, lang))]; |
5 | 58 |
|
6 | | -export default function RootLayout({ children }: { children: React.ReactNode }) { |
7 | | - return <>{children}</>; |
| 59 | + const navbar = ( |
| 60 | + <Navbar |
| 61 | + logo={ |
| 62 | + <> |
| 63 | + <Image height={48} width={48} src="/logo.png" alt="CleverCoffee Logo" /> |
| 64 | + <span className="ms-2 font-extrabold select-none max-md:hidden" title={`${dictionary.logo.title}`}> |
| 65 | + <b>{dictionary.logo.title}</b> <span style={{ opacity: "60%" }}>{dictionary.logo.claim}</span> |
| 66 | + </span> |
| 67 | + </> |
| 68 | + } |
| 69 | + projectLink="https://github.com/rancilio-pid/clevercoffee" |
| 70 | + // Clevercoffee discord server |
| 71 | + chatLink="https://discord.com/invite/Kq5RFznuU4" |
| 72 | + /> |
| 73 | + ); |
| 74 | + return ( |
| 75 | + <html lang={lang} dir="ltr" suppressHydrationWarning> |
| 76 | + <Head faviconGlyph="✦" /> |
| 77 | + <body> |
| 78 | + <Layout |
| 79 | + banner={<Banner storageKey="Clevercoffee 4">CleverCoffee 4</Banner>} |
| 80 | + navbar={navbar} |
| 81 | + footer={<Footer />} |
| 82 | + editLink="Edit this page on GitHub" |
| 83 | + docsRepositoryBase="https://github.com/cellcortex" |
| 84 | + sidebar={{ defaultMenuCollapseLevel: 1 }} |
| 85 | + pageMap={pageMap} |
| 86 | + i18n={[ |
| 87 | + { locale: "de", name: "Deutsch" }, |
| 88 | + { locale: "en", name: "English" } |
| 89 | + ]} |
| 90 | + > |
| 91 | + {children} |
| 92 | + </Layout> |
| 93 | + </body> |
| 94 | + </html> |
| 95 | + ); |
8 | 96 | } |
0 commit comments