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

---
import {type CollectionEntry, getCollection} from "astro:content";
import BaseLayout from "../../layouts/BaseLayout.astro";

export async function getStaticPaths() {

    const posts = await getCollection('writing');
    return posts.map(p => ({
        params: {
            slug: p.slug
        },
        props: {
            title: p.data.title,
            slug: p.slug,
        },
    }));
}

const {slug, title} = Astro.props;
const permalink = `${Astro?.site?.href}writing/${slug}`;
const writing = await getCollection('writing');
const entry: CollectionEntry<'writing'> | undefined = writing.find(e => e.slug === slug);
if (!entry) throw new Error(`Entry not found: ${slug}`);
const { Content } = await entry.render();
---
<BaseLayout title={title} description={""} permalink={permalink} current="writing">
    <header>
        <h1 style={`view-transition-name: writing-entry-${slug}`}>{title}</h1>
        <hr/>
    </header>
    <div class="container writing">
        <article class="content">
            <Content />
        </article>
        <hr/>
    </div>
</BaseLayout>

<style lang="scss" scoped>

  p {
    background: red;
  }

  header {
    text-align: center;

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

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

    hr {
      min-width: 100px;
      width: 30%;
    }
  }

</style>