Files
feynman/website/src/layouts/main.astro
2026-04-15 10:53:10 -07:00

152 lines
5.6 KiB
Plaintext

---
import "@/styles/global.css"
import { ClientRouter } from "astro:transitions"
import Analytics from "@vercel/analytics/astro"
interface Props {
title?: string
description?: string
active?: "home" | "docs"
}
const {
title = "Feynman - The open source AI research agent",
description = "An AI-powered research agent that helps you discover, analyze, and synthesize scientific literature.",
active = "home",
} = Astro.props
---
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="description" content={description} />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
<ClientRouter />
<Analytics />
<script is:inline>
;(function () {
const theme = localStorage.getItem("theme")
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark")
} else {
document.documentElement.classList.remove("dark")
}
})()
</script>
</head>
<body class="flex min-h-screen flex-col bg-background text-foreground antialiased">
<nav class="sticky top-0 z-50 bg-background">
<div class="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
<a href="/" class="flex items-center gap-2">
<span class="font-['VT323'] text-2xl text-primary">feynman</span>
</a>
<div class="flex items-center gap-4 sm:gap-6">
<a
href="/docs/getting-started/installation"
class:list={[
"text-sm transition-colors hover:text-foreground",
active === "docs" ? "text-foreground" : "text-muted-foreground",
]}
>
Docs
</a>
<a
href="https://github.com/getcompanion-ai/feynman"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
>
GitHub
</a>
<button
id="theme-toggle"
type="button"
class="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
aria-label="Toggle theme"
>
<svg
id="sun-icon"
class="hidden size-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
<svg
id="moon-icon"
class="hidden size-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</button>
</div>
</nav>
<main class="flex flex-1 flex-col">
<slot />
</main>
<footer>
<div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-4 py-8 sm:flex-row sm:px-6">
<p class="text-sm text-muted-foreground">
&copy; {new Date().getFullYear()} Companion, Inc.
</p>
<div class="flex items-center gap-4 text-sm">
<a href="/docs/getting-started/installation" class="text-muted-foreground transition-colors hover:text-foreground">Docs</a>
<a
href="https://github.com/getcompanion-ai/feynman"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
>
GitHub
</a>
</div>
</div>
</footer>
<script is:inline>
function updateThemeIcons() {
const isDark = document.documentElement.classList.contains("dark")
document.getElementById("sun-icon").classList.toggle("hidden", !isDark)
document.getElementById("moon-icon").classList.toggle("hidden", isDark)
}
function setupThemeToggle() {
updateThemeIcons()
document.getElementById("theme-toggle").addEventListener("click", function () {
document.documentElement.classList.toggle("dark")
const isDark = document.documentElement.classList.contains("dark")
localStorage.setItem("theme", isDark ? "dark" : "light")
updateThemeIcons()
})
}
setupThemeToggle()
document.addEventListener("astro:after-swap", function () {
const theme = localStorage.getItem("theme")
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark")
} else {
document.documentElement.classList.remove("dark")
}
setupThemeToggle()
})
</script>
</body>
</html>