[slug].astro

---
import Meta from "@components/Meta.astro";
import Navbar from "@components/Navbar.astro";
import type { OpenGraph } from "@components/opengraph";
import Pagination from "@components/Pagination.astro";
import TableOfContents from "@components/TableOfContents.vue";
import Tags from "@components/Tags.vue";
import TimeSince from "@components/TimeSince.vue";
import DefaultLayout from "@layouts/Default.astro";

import { CollectionEntry, getCollection } from "astro:content";

const { post } = Astro.props;

export async function getStaticPaths({}) {
  const posts = await getCollection("articles");

  const data = posts.map((post) => {
    return {
      params: {
        slug: post.slug,
      },
      props: { post },
    };
  });

  return data;
}

interface Props {
  post: CollectionEntry<"articles">;
}

const { title, description, published, tags } = post.data;

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

const openGraph: OpenGraph = {
  title: title,
  description: description,
  type: 'article',
  image: {
    url: '',
    alt: ''
  },
  url: Astro.request.url
};

const postsAfter = await getCollection("articles", ({ data }) => {
  return data.published.getTime() < post.data.published.getTime();
});

const [after] = postsAfter.sort(
  (a, b) => b.data.published.getTime() - a.data.published.getTime()
);

const postsBefore = await getCollection("articles", ({ data }) => {
  return data.published.getTime() > post.data.published.getTime();
});

const [before] = postsBefore.sort(
  (a, b) => a.data.published.getTime() - b.data.published.getTime()
);
---

<DefaultLayout title={title} description={description}>
  <Meta slot="head" openGraph={openGraph} />

  <div class="my-8">
    <Navbar />

    <article class="mt-8">
      <div class="my-8">
        <div class="flex flex-col space-y-2">
          <h1 class="font-bold text-5xl lg:text-6xl">{title}</h1>

          <h2 class="text-xl italic">{description}</h2>

          <Tags tags={tags} />

          <p class="text-gray-500">
            <TimeSince date={published} client:only />
          </p>
        </div>
      </div>

      <div>
        <div class="lg:grid grid-flow-col-dense grid-cols-4 gap-8">
          <div class="order-last">
            <TableOfContents headings={headings} />
          </div>

          <div class="col-span-3">
            <div class="prose prose-neutral dark:prose-invert max-w-none article">
              <Content />
            </div>
          </div>
        </div>

        <Pagination
          next={before ? `/post/${before.slug}` : undefined}
          previous={after ? `/post/${after.slug}` : undefined}
        />
      </div>
    </article>
  </div>
</DefaultLayout>

<style is:global>
  .article {

    & :is(:where(h1, h2, h3, h4, h5, h6)) {
      &:hover {
        .link {
          @apply inline;
        }
      }
      & .link {
        @apply text-gray-600 dark:text-gray-400 hidden ml-2 hover:no-underline print:hidden;
      }
    }
  }
</style>

<script>
  const headings = document.querySelectorAll(
    ".article :is(:where(h1, h2, h3, h4, h5, h6))"
  );

  headings.forEach((h) => {
    const link = document.createElement("a");

    link.innerHTML = "#";
    link.className = "link";
    link.href = `#${h.id}`;

    h.appendChild(link);
  });
</script>