import "@docsearch/css";
import "highlight.js/styles/github-dark-dimmed.css";
import "katex/dist/katex.min.css";
import "./global.css";
import { cookie, usePathname } from "@lazarv/react-server";
import { useMatch } from "@lazarv/react-server/router";
import EditPage from "../components/EditPage.jsx";
import PageMeta from "../components/PageMeta.jsx";
import ViewMarkdown from "../components/ViewMarkdown.jsx";
import WebMCP from "../components/WebMCP.jsx";
import { useLanguage, m } from "../i18n.mjs";
import { defaultLanguage, defaultLanguageRE, languages } from "../const.mjs";
import { categories, getPageFrontmatter } from "../pages.mjs";
const lowerCaseCategories = categories.map((category) =>
category.trim().toLowerCase()
);
export default function Layout({
breadcrumb,
header,
sidebar,
contents,
navigation,
footer,
children,
}) {
const pathname = usePathname();
const { dark } = cookie();
const lang = useLanguage();
const { category } = useMatch("/[[lang]]/[[category=category]]/[[...slug]]", {
matchers: {
category: (value) =>
lowerCaseCategories.includes(value.trim().toLowerCase()),
},
});
const canonical = pathname.replace(
new RegExp(`^/(${defaultLanguage}|${lang})`),
""
);
const frontmatter = getPageFrontmatter(pathname, lang);
return (
<html
lang={lang}
className={dark === "1" ? "dark" : dark === "0" ? "light" : null}
suppressHydrationWarning
>
<head>
<meta charSet="utf-8" />
<meta name="view-transition" content="same-origin" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="@lazarv/react-server" />
<title>
{`@lazarv/react-server ${category && pathname !== "/" && pathname !== `/${lang}` ? ` | ${m[`category_${category}`]()}` : ""}`}
</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<script
type="application/javascript"
dangerouslySetInnerHTML={{
__html:
`if (document.cookie.includes("dark=1")) document.documentElement.classList.add('dark');\n` +
`else if (document.cookie.includes("dark=0")) document.documentElement.classList.add('light');`,
}}
></script>
<meta httpEquiv="content-language" content={lang} />
<meta property="og:locale" content={lang} />
<meta property="og:site_name" content="@lazarv/react-server" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://react-server.dev/opengraph.jpg"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://react-server.dev" />
<meta property="twitter:card" content="summary_large_image" />
<meta name="description" content="Run React anywhere" />
<meta property="og:title" content="@lazarv/react-server" />
<meta property="og:description" content="Run React anywhere" />
<link
rel="preconnect"
href="https://OVQLOZDOSH-dsn.algolia.net"
crossOrigin="anonymous"
/>
{languages.map((hrefLang) => (
<link
key={hrefLang}
rel="alternate"
hrefLang={hrefLang}
href={`https://react-server.dev${hrefLang === defaultLanguage ? "" : `/${hrefLang}`}${canonical}`}
/>
))}
<link
rel="alternate"
hrefLang="x-default"
href={`https://react-server.dev${canonical}`}
/>
<link
rel="canonical"
href={`https://react-server.dev${pathname.replace(defaultLanguageRE, "")}`}
/>
</head>
<body data-path={pathname} suppressHydrationWarning>
<WebMCP />
{header}
<main>
{sidebar}
<article>
{breadcrumb}
{!new RegExp(`^/(${languages.join("|")})/api(/|$)`).test(
pathname
) && <EditPage pathname={pathname} />}
<ViewMarkdown pathname={pathname} />
{children}
<PageMeta
date={frontmatter?.date}
author={frontmatter?.author}
github={frontmatter?.github}
lang={lang}
/>
{navigation}
</article>
{contents}
</main>
{footer}
</body>
</html>
);
}