writing pages

src/pages/writing/[slug].astro

@@ -0,0 +1,64 @@
+---
+import {getCollection} from "astro:content";
+import {marked} from 'marked';
+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,
+            content: marked.parse(p.body),
+        }
+    }));
+}
+
+const {slug, title, content} = Astro.props;
+const permalink = `${Astro?.site?.href}writing/${slug}`;
+---
+<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" set:html={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>