blog/src/article.tsx

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

type Props = {
    article: Document;
    date: DateTime;
    body: string;
};

export default ({ article, 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: article.getDocumentTitle() as string }} />
            </header>
            <a name="content" />
            <main dangerouslySetInnerHTML={{ __html: body }} />
        </article>
    </>
);