youhavetrouble.github.io/src/pages/blog/[slug].astro

---
import {getCollection} from "astro:content";
import BaseLayout from '../../layouts/BaseLayout.astro';
import Bio from '../../components/Bio.astro';
import readingTime from 'reading-time';
import { marked } from 'marked';

export async function getStaticPaths() {

  const posts = await getCollection('posts');
  return posts.map(p => ({
    params: {
      slug: p.slug
    },
    props: {
      title: p.data.title,
      description: p.data.description,
      publishDate: p.data.publishDate,
      slug: p.slug,
      tags: p.data.tags,
      content: marked.parse(p.body),
      readTime: readingTime(p.body).text,
    }
  }));
}

const { slug, title, description, publishDate, tags, content, readTime } = Astro.props;
const permalink = `${Astro?.site?.href}blog/${slug}`;
---

<BaseLayout title={title} description={description} permalink={permalink} current="blog">
  <header>
    <p>{publishDate} ~ {readTime}</p>
    <h1 style={`view-transition-name: blogpost-${slug}`}>{title}</h1>
    <div class="tags" style="justify-content: center">
      {tags.map(item => (
          <span class="tag">{item}</span>
      ))}
    </div>
    <hr />
  </header>
  <div class="container">
    <article class="content" set:html={content}></article>
    <hr />
    <Bio />
  </div>
</BaseLayout>

<style>
  header {
    text-align: center;
  }

  header h1 {
    margin-bottom: 0.7em;
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
  }

  header p {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
  }

  header hr {
    min-width: 100px;
    width: 30%;
  }
</style>