[...slug].astro

---
import { getCollection } from "astro:content";

import Layout from "~/layouts/WikiArticle.astro";
import CodeBlock from "~/components/common/CodeBlock.astro";
import WikiLink from "~/components/wiki/WikiLink.astro";
import type { CollectionEntry } from "astro:content";
import H1 from "~/components/wiki/headings/H1.astro";
import H2 from "~/components/wiki/headings/H2.astro";
import H3 from "~/components/wiki/headings/H3.astro";
import H4 from "~/components/wiki/headings/H4.astro";
import H5 from "~/components/wiki/headings/H5.astro";
import H6 from "~/components/wiki/headings/H6.astro";
import dayjs from "~/services/time";
import Tooltip from "~/components/common/Tooltip.astro";

export const getStaticPaths = async () => {
  const articles = await getCollection("wiki");
  return articles.map((article) => {
    return { params: { slug: article.slug }, props: { article } };
  });
};

const { article } = Astro.props;

const { Content, headings, remarkPluginFrontmatter } = await article.render();

export interface Props {
  article: CollectionEntry<"wiki">;
}

const modifiedTime = remarkPluginFrontmatter.lastModified
  ? dayjs(remarkPluginFrontmatter.lastModified)
      .utc()
      .format("HH:mm:ss D MMMM, YYYY UTC")
  : "Not committed yet";
---

<Layout article={article} headings={headings}>
  <Content
    components={{
      pre: CodeBlock,
      a: WikiLink,
      h1: H1,
      h2: H2,
      h3: H3,
      h4: H4,
      h5: H5,
      h6: H6,
    }}
  />
  <div class="modified-timestamp">
    <p>
      Last Modified:
      <Tooltip content={modifiedTime}>
        <time datetime={remarkPluginFrontmatter.lastModified} data-localize
          >{modifiedTime}</time
        >
      </Tooltip>
    </p>
  </div>
</Layout>

<script>
  const times = document.querySelectorAll("time[data-localize]");

  const formatter = new Intl.DateTimeFormat(undefined, {
    hour: "numeric",
    minute: "2-digit",
    day: "numeric",
    month: "long",
    year: "numeric",
    second: "2-digit",
    timeZoneName: "short",
  });

  times.forEach((el) => {
    const timestamp = el.getAttribute("datetime");
    if (!timestamp) return;
    el.textContent = formatter.format(new Date(timestamp));
  });
</script>