Init

5 files changed, 279 insertions, 0 deletions

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>
+                </>
+        );
+};