BlogPost.astro

---
import type { CollectionEntry } from "astro:content";
import { formatDate } from "../utils";
import { render } from "astro:content";

interface Props {
  post: CollectionEntry<"blog">;
}
const { post } = Astro.props;
const { remarkPluginFrontmatter } = await render(post);
---

<div>
  <h1 class="mt-8 text-sm text-gray-400 dark:text-gray-600">
    {formatDate(post.data.pubDate)}
  </h1>
  <h1 class="text-xl tracking-wider text-gray-900 dark:text-gray-100">
    {post.data.title}
  </h1>
  <h1 class="text-gray-600 dark:text-gray-400">{post.data.description}</h1>
  <h1 class="mt-1 text-sm text-gray-400 dark:text-gray-600">
    {remarkPluginFrontmatter.readingTime}
  </h1>
  <div
    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
  >
    <slot />
  </div>
  <ul class="my-8 flex flex-wrap">
    {
      post.data.tags.map((tag: unknown) => (
        <li class="mr-3 text-sm text-gray-400 hover:underline dark:text-gray-600">
          <a href={`/tags/${tag}`}>{`#${tag}`}</a>
        </li>
      ))
    }
  </ul>
  <hr />
  <div
    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
  >
    If you have any questions or comments, or you would like to point out any
    errors in any of the blog posts, please reach out to me at <a
      href="mailto:milanherke@protonmail.com">milanherke@protonmail.com</a
    >.
  </div>
</div>