[...slug].astro

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

import Layout from "~/layouts/WikiArticle.astro";
import Pre from "~/components/wiki/Pre.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 { render } from "astro:content";

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

const { article } = Astro.props;

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

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

<Layout
  article={article}
  headings={headings}
  lastModified={remarkPluginFrontmatter.lastModified}
>
  <Content
    components={{
      pre: Pre,
      a: WikiLink,
      h1: H1,
      h2: H2,
      h3: H3,
      h4: H4,
      h5: H5,
      h6: H6,
    }}
  />
</Layout>

<style lang="scss" is:global>
  article ol {
    margin-left: 0.5em;
    counter-reset: item;
    list-style: none;

    &:first-of-type {
      padding-left: 0px;
    }

    & > li {
      margin: 0.5em auto;

      &::before {
        display: inline-block;
        content: counter(item);
        counter-increment: item;
        font-size: 1.25em;
        background-color: #ffffff;
        color: #000000;
        width: fit-content;
        min-width: 1.5em;
        text-align: center;
        border-radius: 1em;
        margin-right: 0.5em;
      }
    }
  }
</style>