index.astro

---
import NavTOC from "@components/Nav/NavTOC";
import Newsletter from "@components/Newsletter.astro";
import PostMeta from "@components/PostMeta.astro";
import LayoutBase from "@layouts/LayoutBase.astro";
import * as ldjson from "@utils/ldjson";
import type { InferGetStaticPropsType } from "astro";
import { Image } from "astro:assets";
import { getCollection } from "astro:content";

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

type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const post = Astro.props;
const { Content, headings } = await post.render();
---

<LayoutBase
  ogImage={`blog/${post.slug}/${post.slug}-og.png`}
  description={post.data.description}
  title={post.data.title}
>
  <main class="">
    <div class="relative w-full h-96 overflow-hidden">
      <Image
        src={post.data.heroImage}
        alt={post.data.heroImageAlt}
        class="w-full h-full object-cover"
        transition:name={`heroImage ${post.id}`}
      />
    </div>
    <article class="relative wrapper z-10 -mt-28 animate-slideUp">
      <div class="mx-auto card w-full max-w-screen-lg">
        <div class="md:px-8">
          <h1 class="font-extrabold my-6 text-4xl md:text-4xl xl:text-5xl">
            {post.data.title}
          </h1>
          <div class="my-2">
            <PostMeta post={post} />
          </div>
          <div class="rounded p-2 bg-smoke-950">
            <NavTOC headings={headings} client:load />
          </div>
        </div>
        <div class="md-content md:px-8">
          <Content />
        </div>
      </div>
    </article>
    <div class="wrapper w-full my-3">
      <div class="max-w-screen-lg w-full mx-auto"><Newsletter /></div>
    </div>
  </main>
</LayoutBase>

<script
  type="application/ld+json"
  set:html={JSON.stringify(ldjson.CreateBlog(post))}
/>

<style is:global>
  .md-content h2,
  .md-content h3,
  .md-content h4,
  .md-content h5,
  .md-content h6 {
    @apply mb-4 mt-6 font-bold;
  }

  .md-content h2 {
    @apply text-3xl;
  }
  .md-content h3 {
    @apply text-2xl;
  }
  .md-content h4 {
    @apply text-xl;
  }

  .md-content blockquote {
    @apply my-4 border-l-4 border-gray-400 pl-4 italic;
  }

  .md-content ul {
    @apply list-disc list-inside;
  }

  .md-content ol {
    @apply list-decimal list-inside;
  }

  .md-content img {
    @apply rounded-lg mx-auto;
  }

  lite-youtube {
    @apply mx-auto;
  }
</style>