Initial import of the Astro vicibox.com site

src/pages/blog/[slug].astro

@@ -0,0 +1,28 @@
+---
+import { getCollection, render } from 'astro:content';
+import { Image } from 'astro:assets';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('posts');
+  return posts.map((post) => ({
+    params: { slug: post.data.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<BaseLayout title={`${post.data.title} | ViciBox`}>
+  <div id={`post-${post.id}`}>
+    <h1 class="page-title">{post.data.title}</h1>
+    <p class="postmetadataw">{post.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })}</p>
+    <div class="content-ver-sep"> </div>
+    <div class="entrytext">
+      {post.data.featuredImage && <Image src={post.data.featuredImage} alt={post.data.title} width={650} height={366} />}
+      <Content />
+    </div>
+  </div>
+</BaseLayout>