blog/lib/views/article.tsx

import { Document } from "asciidoctor";
import { DateTime } from "luxon";
import { asset } from "../assets.js";

type Props = {
    article: Article;
    body: string;
};

export type Article = { path: string; slug: string; date: DateTime; document: Document };

export default ({ article: { document, date }, body }: Props) => (
    <>
        <nav>
            <a href="/" title="Back to home page">
                <img src={asset("avatar.avif")} alt="Adædra's avatar" />
                Adædra
            </a>
        </nav>
        <article>
            <header class="article-header">
                {date.toLocaleString(DateTime.DATE_FULL)}
                <h1 dangerouslySetInnerHTML={{ __html: document.getDocumentTitle() as string }} />
            </header>
            <a name="content" />
            <main dangerouslySetInnerHTML={{ __html: body }} />
        </article>
    </>
);