blog/src/pages/posts/[...slug].astro

---
import "../../styles/post.scss";
import BaseLayout from "../../layouts/BaseLayout.astro";
import { type CollectionEntry, getCollection } from "astro:content";
import Timestamp from "../../components/Timestamp.astro";
import { getImage } from "astro:assets";
import TocWrapper from "../../components/TocWrapper.astro";

export async function getStaticPaths() {
  const posts = await getCollection("posts");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}

type Props = CollectionEntry<"posts">;

const post = Astro.props;
const { Content, remarkPluginFrontmatter, headings } = await post.render();
const { toc, heroImage: heroImagePath, heroAlt } = post.data;

let heroImage;
if (heroImagePath) {
  heroImage = await getImage({ src: heroImagePath });
}
const datestamp = post.data.date.toLocaleDateString(undefined, {
  year: "numeric",
  month: "short",
  day: "numeric",
});
---

<BaseLayout pad={false}>
  <meta slot="head" property="og:title" content={post.data.title} />
  <meta slot="head" property="og:url" content={Astro.url} />
  <meta slot="head" property="og:description" content={remarkPluginFrontmatter.excerpt} />
  <meta slot="head" property="og:type" content="article" />
  <meta slot="head" property="og:locale" content="en_US" />
  {heroImage && <meta slot="head" property="og:image" content={heroImage.src} />}
  {heroAlt && <meta slot="head" property="og:image:alt" content={heroAlt} />}

  <meta slot="head" property="keywords" content={post.data.tags.join(", ")} />
  <meta slot="head" property="description" content={remarkPluginFrontmatter.excerpt} />
  <meta slot="head" property="article:published_time" content={datestamp} />
  <meta slot="head" property="article:author" content="Michael Zhang" />

  <TocWrapper toc={toc} headings={headings}>
    <div class="post-container">
      <h1 class="post-title">{post.data.title}</h1>

      <span class="tags">
        {
          post.data.draft && (
            <a href="/drafts" class="tag draft">
              <i class="fa fa-warning" aria-hidden="true" />
              <span class="text">draft</span>
            </a>
          )
        }

        {
          post.data.tags.map((tag) => (
            <a href={`/tags/${tag}`} class="tag">
              <i class="fa fa-tag" aria-hidden="true" />
              <span class="text">{tag}</span>
            </a>
          ))
        }
      </span>

      <small class="post-meta">
        Posted on <Timestamp timestamp={post.data.date} />
         - {remarkPluginFrontmatter.minutesRead}
      </small>

      {
        heroImage && heroAlt && (
          <div style={`background-image: url(${heroImage.src});`} title={heroAlt} class="hero" />
        )
      }

      <div class="post-content">
        <Content />
      </div>
    </div>
  </TocWrapper>
</BaseLayout>