From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/components/Logo.tsx        |  34 +++++++++++
 src/ui/components/ReleaseCard.tsx |  47 +++++++++++++++
 src/ui/components/SiteFooter.tsx  |  39 ++++++++++++
 src/ui/components/SiteHeader.tsx  | 121 ++++++++++++++++++++++++++++++++++++++
 src/ui/components/SiteNav.tsx     |  38 ++++++++++++
 5 files changed, 279 insertions(+)
 create mode 100644 src/ui/components/Logo.tsx
 create mode 100644 src/ui/components/ReleaseCard.tsx
 create mode 100644 src/ui/components/SiteFooter.tsx
 create mode 100644 src/ui/components/SiteHeader.tsx
 create mode 100644 src/ui/components/SiteNav.tsx

(limited to 'src/ui/components')

diff --git a/src/ui/components/Logo.tsx b/src/ui/components/Logo.tsx
new file mode 100644
index 0000000..a9ec9be
--- /dev/null
+++ b/src/ui/components/Logo.tsx
@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import site from "@/corvos.config.ts";
+
+export type Props = HTMLAttributes<"a"> & {
+	size?: "sm" | "lg";
+	variant?: "static-black" | "static-white";
+};
+
+export const Logo = async ({ size, variant, class: cls, ...props }: Props) => {
+	const symbols = await site.load("assets/symbols.svg");
+
+	return (
+		<a
+			aria-label="Home"
+			class:list={[
+				"c-logo",
+				{
+					[`c-logo--${size}`]: size,
+					[`c-logo--${variant}`]: variant,
+				},
+				cls,
+			]}
+			href={site.$.url()}
+			rel="home"
+			{...props}
+		>
+			<svg class="c-logo__img">
+				<title>Logo</title>
+				<use href={`${symbols.url}#logo${size === "sm" ? "-sm" : ""}`} />
+			</svg>
+		</a>
+	);
+};
diff --git a/src/ui/components/ReleaseCard.tsx b/src/ui/components/ReleaseCard.tsx
new file mode 100644
index 0000000..bffe256
--- /dev/null
+++ b/src/ui/components/ReleaseCard.tsx
@@ -0,0 +1,47 @@
+import type { Select } from "corvos";
+
+import type site from "@/corvos.config.ts";
+
+import { CardBody } from "$/ui/objects/CardBody.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+
+import { Card, type Props as CardProps } from "../objects/Card.tsx";
+
+export type Props = CardProps<"a"> & {
+	"heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	"page": Select<typeof site, ".html", { type: "release" }>;
+};
+
+export const ReleaseCard = ({ "heading-level": headingLevel, page, ...props }: Props) => {
+	return (
+		<Card
+			as="a"
+			class="c-with-visited-indicator h-entry u-url"
+			horizontal
+			href={page.url}
+			{...props}
+		>
+			<CardBody class="c-with-visited-indicator__indicator u-pie-0" />
+
+			<CardBody main>
+				<Heading as={headingLevel} class="p-name">
+					<span class="u-mie-100">{page.data.title}</span>
+				</Heading>
+			</CardBody>
+
+			<CardBody as="small" class="u-c-mute u-d-none@sm-lo">
+				<ul class="l-hlist l-hlist--separated">
+					<li class="l-hlist__item">
+						<time class="dt-published" datetime={page.data.date.toISOString()}>
+							{page.data.date.toLocaleDateString(undefined, {
+								day: "numeric",
+								month: "short",
+								year: "numeric",
+							})}
+						</time>
+					</li>
+				</ul>
+			</CardBody>
+		</Card>
+	);
+};
diff --git a/src/ui/components/SiteFooter.tsx b/src/ui/components/SiteFooter.tsx
new file mode 100644
index 0000000..8bada2e
--- /dev/null
+++ b/src/ui/components/SiteFooter.tsx
@@ -0,0 +1,39 @@
+import site from "@/corvos.config.ts";
+
+import { Container } from "../layouts/Container.tsx";
+import { Divider } from "../objects/Divider.tsx";
+import { Logo } from "./Logo.tsx";
+
+export const SiteFooter = async () => {
+	const symbols = await site.load("assets/symbols.svg");
+
+	return (
+		<footer class="c-site-footer">
+			<div class="c-site-footer__banner">
+				<svg class="c-site-footer__banner-img">
+					<use href={`${symbols.url}#site-footer`} />
+				</svg>
+
+				<svg class="c-site-footer__banner-bg">
+					<use href={`${symbols.url}#site-footer-bg`} />
+				</svg>
+			</div>
+
+			<div class="c-site-footer__content-wrap t-static-white">
+				<Container class="c-site-footer__content" fixed="150" pad-block pad-inline>
+					<div class="c-site-footer__sections">
+						<section class="c-site-footer__section s-links s-links--mark-external s-links--static-white">
+							Developed by <a href="https://volpeon.ink/">Volpeon</a>
+						</section>
+					</div>
+
+					<Divider class="c-site-footer__divider" level="quiet" variant="static-white" />
+
+					<section class="c-site-footer__logo">
+						<Logo size="lg" variant="static-white" />
+					</section>
+				</Container>
+			</div>
+		</footer>
+	);
+};
diff --git a/src/ui/components/SiteHeader.tsx b/src/ui/components/SiteHeader.tsx
new file mode 100644
index 0000000..17831a1
--- /dev/null
+++ b/src/ui/components/SiteHeader.tsx
@@ -0,0 +1,121 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { ActionButton } from "../objects/ActionButton.tsx";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+import { Logo } from "./Logo.tsx";
+
+export type Props = HTMLAttributes<"header"> & {
+	"url": string;
+	"mode"?: "compact" | "none";
+	"at-end"?: boolean;
+	"hidden"?: boolean;
+	"sm"?: JSX.Element;
+	"end"?: JSX.Element;
+	"children"?: JSX.Element;
+};
+
+export const SiteHeader = ({
+	children,
+	sm,
+	url,
+	mode,
+	"at-end": atEnd,
+	hidden,
+	end,
+	class: cls,
+	...props
+}: Props) => {
+	const navItems = nav.map((item) => ({
+		...item,
+		selected: new RegExp(`^${item.url.replace("/#", "/")}`).test(url),
+	}));
+
+	const parent = navItems
+		.filter((item) => item.url !== url)
+		.reduce(
+			(parent: (typeof navItems)[number] | undefined, item) =>
+				item.selected && item.url.length > (parent?.url.length ?? 0) ? item : parent,
+			undefined,
+		);
+	const selected = navItems.reduce(
+		(sel, item) => (item.selected && item.url.length > sel.url.length ? item : sel),
+		{
+			icon: "",
+			label: "Back",
+			selected: true,
+			url: "/",
+		},
+	);
+
+	const variant = atEnd ? "static-white" : undefined;
+
+	return (
+		<header
+			class:list={[
+				"c-site-header",
+				"l-media",
+				{ "c-site-header--end": atEnd, "c-site-header--hidden": hidden },
+				cls,
+			]}
+			{...props}
+		>
+			<Logo class="c-site-header__logo l-media__block" variant={variant} />
+
+			{mode !== "none" && (
+				<>
+					<Navbar aria-label="Mainmenu" class="c-site-header__nav l-media__block" variant={variant}>
+						{mode === "compact" ? (
+							<NavbarItem
+								href={selected.url}
+								pre={<Icon icon="arrow-left" variant="bold" />}
+								selected
+							>
+								{selected.label}
+							</NavbarItem>
+						) : (
+							navItems
+								.filter((item) => item.url !== "/" && !item.hidden)
+								.map((item) => (
+									<NavbarItem as="a" href={item.url} selected={item.selected}>
+										{item.label}
+									</NavbarItem>
+								))
+						)}
+					</Navbar>
+
+					{parent && (
+						<ActionButton
+							align-block
+							class="c-site-header__back l-media__block"
+							href={parent.url}
+							icon={<Icon icon="arrow-left" variant="bold" />}
+							level="quiet"
+							pill
+						/>
+					)}
+				</>
+			)}
+
+			{children}
+
+			{sm && <div class="c-site-header__slot c-site-header__slot--sm">{sm}</div>}
+
+			{end && (
+				<>
+					<div class="c-site-header__spacer" />
+					<div class="c-site-header__slot c-site-header__slot--end">{end}</div>
+				</>
+			)}
+
+			<Logo
+				class="c-site-header__logo c-site-header__logo--sm l-media__block"
+				size="sm"
+				variant={variant}
+			/>
+		</header>
+	);
+};
diff --git a/src/ui/components/SiteNav.tsx b/src/ui/components/SiteNav.tsx
new file mode 100644
index 0000000..7518e3c
--- /dev/null
+++ b/src/ui/components/SiteNav.tsx
@@ -0,0 +1,38 @@
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+
+export interface Props {
+	url: string;
+}
+
+export const SiteNav = ({ url }: Props) => {
+	const navItems = nav
+		.filter((item) => !item.hidden)
+		.map((item) => ({
+			...item,
+			selected: item.url === "/" ? item.url === url : new RegExp(`^${item.url}`).test(url),
+		}));
+
+	return (
+		<>
+			<div class="c-site-nav-placeholder"></div>
+
+			<footer class="c-site-nav">
+				<Navbar aria-label="Mainmenu" quiet variant="static-white">
+					{navItems.map((item) => (
+						<NavbarItem
+							href={item.url}
+							icon={<Icon icon={item.icon} variant={item.selected ? "fill" : "regular"} />}
+							selected={item.selected}
+						>
+							{item.label}
+						</NavbarItem>
+					))}
+				</Navbar>
+			</footer>
+		</>
+	);
+};
-- 
cgit v1.3.1