Fixing article layout

Author: shawn-mcgee

idea/test.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Developing a Website Using Astro/MDX"
 author: "Shawn McGee"
+pubDate: "2025-03-18"
 tags: [
   "this",
   "is",

src/components/idea/Author.astro renamed to src/components/article/Author.astro

@@ -6,6 +6,6 @@ export type Props = {
 const { author } = Astro.props
 ---
 
-<div class="flex flex-row justify-center">
+<div class="flex flex-row justify-center p-0">
   <span class="text-xl text-center">{author}</span>
 </div>

src/components/article/Date.astro

@@ -0,0 +1,11 @@
+---
+export type Props = {
+  pubDate: Date | undefined
+}
+
+const { pubDate } = Astro.props
+---
+<div class="flex flex-row justify-center">
+  <span class="text-center text-xl">{pubDate?.toDateString()}</span>
+</div>
+

src/components/idea/Tag.astro renamed to src/components/article/Tag.astro

@@ -2,11 +2,11 @@
 import { getCollection, render } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Drawer from "@layouts/Drawer.astro";
-import Article from "@layouts/Article.astro";
 
-import Tags from "@components/idea/Tags.astro";
-import Title from "@components/idea/Title.astro";
-import Author from "@components/idea/Author.astro";
+import Tags from "@components/article/Tags.astro";
+import Title from "@components/article/Title.astro";
+import Author from "@components/article/Author.astro";
+import Date from "@components/article/Date.astro";
 
 export async function getStaticPaths() {
   const ideas = await getCollection("ideas");
@@ -27,11 +27,20 @@ const { Content } = await render(idea);
 
 <Layout>
   <Drawer>
-    <Article>
-      <Author author={idea.data.author}/>
-      <Title title={idea.data.title}/>      
-      <Tags tags={idea.data.tags}/>
-      <Content/>
-    </Article>
+    <div class="flex flex-col w-full items-center">
+      <div class="flex flex-col w-[960px] min-h-dvh items-center">
+        <div class="flex flex-col w-full items-center p-4">
+          <Title title={idea.data.title}/>
+          <div class="flex flex-row w-full justify-center text-xl gap-2">
+            <Author author={idea.data.author}/>|
+            <Date pubDate={idea.data.pubDate}/>
+          </div>
+          <Tags tags={idea.data.tags}/>
+        </div>
+        <div class="flex flex-col w-full p-8 prose shadow-lg flex-1">
+          <Content/>
+        </div>
+      </div>
+    </div>
   </Drawer>
 </Layout>