wuyang
56 lines
1.7 KiB
Plaintext
56 lines
1.7 KiB
Plaintext
---
|
||
import SiteHeader from "@/components/SiteHeader.astro";
|
||
import SiteFooter from "@/components/SiteFooter.astro";
|
||
import "@/styles/global.css";
|
||
|
||
interface Props {
|
||
title: string;
|
||
description: string;
|
||
section?: string;
|
||
}
|
||
|
||
const {
|
||
title,
|
||
description,
|
||
section = "",
|
||
} = Astro.props;
|
||
|
||
const pageTitle = title === "LLM Atlas" ? title : `${title}｜LLM Atlas`;
|
||
---
|
||
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#27364a" />
|
||
<meta name="description" content={description} />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content={pageTitle} />
|
||
<meta property="og:description" content={description} />
|
||
<meta property="og:locale" content="zh_CN" />
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||
<title>{pageTitle}</title>
|
||
</head>
|
||
<body data-section={section}>
|
||
<div class="reading-progress" aria-hidden="true"><span id="reading-progress"></span></div>
|
||
<SiteHeader active={section} />
|
||
<main>
|
||
<slot />
|
||
</main>
|
||
<SiteFooter />
|
||
<script is:inline>
|
||
const bar = document.querySelector("#reading-progress");
|
||
const updateProgress = () => {
|
||
if (!bar) return;
|
||
const root = document.documentElement;
|
||
const distance = root.scrollHeight - root.clientHeight;
|
||
const ratio = distance > 0 ? root.scrollTop / distance : 0;
|
||
bar.style.transform = `scaleX(${Math.min(1, Math.max(0, ratio))})`;
|
||
};
|
||
addEventListener("scroll", updateProgress, { passive: true });
|
||
updateProgress();
|
||
</script>
|
||
</body>
|
||
</html>
|