feat: added post page

Author: coderdiaz

src/pages/writing/[...slug].astro

@@ -0,0 +1,48 @@
+---
+import Container from '@/components/Container.astro';
+import Avatar from '@/components/ui/Avatar.astro';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import { DEFAULT_CONFIGURATION } from '@/lib/constants';
+import { Image } from 'astro:assets';
+import { getCollection, render } from 'astro:content';
+
+export async function getStaticPaths() {
+  const entries = await getCollection('posts');
+
+  return entries.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<BaseLayout>
+  <Container>
+    <article class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2 pt-6">
+        <a href="/writing" class="transition-all text-muted-foreground hover:text-foreground pb-4 text-sm">
+          Back to writing
+        </a>
+        <div class="flex flex-col gap-1.5">
+          <Avatar />
+          <span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
+        </div>
+        <h1 class="text-3xl font-semibold text-headings">{entry.data.title}</h1>
+      </div>
+      <div class="relative aspect-video overflow-hidden rounded-lg">
+        <Image
+          src={entry.data.image}
+          alt={entry.data.title}
+          class="object-cover"
+        />
+      </div>
+      <div class="prose dark:prose-invert">
+        <Content />
+      </div>
+    </article>
+  </Container>
+</BaseLayout>
+