added placeholders for tags in posts

src/content/blog/creation_of_the_website.md

@@ -3,6 +3,9 @@ title: Let's the journey begin
 description: This is the beginning of this website
 pubDate: 2024-03-20
 heroImage: /images/raiden shogun wheeze meme.webp
+tags:
+  - Palworld
+  - Review
 ---
 I started the website using bun 1.0 after few days of its released, using Astro.js , it was a seemless experience, and I was extremely surprised by the google lighthouse complete 100 score, I didn't even think that this was possible, I was happy to be wrong.
 

src/content/blog/jojo_morocco_vs_burkina_faso.md

@@ -3,6 +3,10 @@ title: Watching jojo stone ocean and Morocco Vs Burkina Faso
 description: Just A boring tiring day
 pubDate: 2024-03-22
 heroImage: /images/raiden shogun roll safe meme.webp
+tags:
+  - Genshin Impact
+  - Review
+  - Character
 ---
 today was full of work (my full time job), I arrived at home tired and just sat and watch Jojo Stone Ocean anime on Netflix, S05E13 to S05E18, I'm planning to watch more until I finish it, latest episode right now is S05E38, I've been kinda reluctant to watch it because I was too busy but also because I did read the manga way before, in the manga I stopped at the beginning chapters of jojo lands.
 I'm still conflicted over what I should make the omniversify logo look like, but it will come eventually.

src/content/blog/more_jojo_lot_of_work.md

@@ -3,6 +3,9 @@ title: Watching more jojo stone ocean
 description: Just Another boring tiring day
 pubDate: 2024-03-21
 heroImage: /images/raiden shogun aqua begging meme.webp
+tags:
+  - Rust
+  - Review
 ---
 I couldn't wake up early as I was planning, instead woke up late at 11AM with a headache, been a lot of work but I did speed up the workflow quite a bit.
 came home and watched jojo S05E18 to S05E25.

src/content/blog/testt.md

@@ -1,8 +1,11 @@
 ---
 title: testt
 description: test
-pubDate: 2024-02-29T23:00:00.000Z
+pubDate: 2024-02-29
 heroImage: /images/p60jwd1n.png
+tags:
+  - GTA V
+  - Review
 ---
 test![](</images/raiden shogun wheeze meme.webp>)
 

src/content/config.ts

@@ -9,6 +9,7 @@ const blog = defineCollection({
     pubDate: z.coerce.date(),
     updatedDate: z.coerce.date().optional(),
     heroImage: z.string().optional(),
+    tags: z.array(z.string())
   }),
 });
 

src/layouts/BlogPost.astro

@@ -1,31 +1,47 @@
 ---
 import '@fontsource/inter/latin-400.css';
 import '@fontsource/inter/latin-500.css';
-import { ViewTransitions } from 'astro:transitions';
 import type { CollectionEntry } from 'astro:content';
 import FormattedDate from '../components/home/FormattedDate.astro';
 import Layout from '../layouts/Layout.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage, tags } = Astro.props;
 ---
 
 <Layout title={title} description={description}>
   <section class="py-5 sm:py-10">
     <div class="mx-auto max-w-2xl px-4 sm:px-4 lg:max-w-7xl lg:px-8">
       <div class="flex flex-col gap-10">
-        <div class="flex flex-col items-start gap-8 sm:gap-10 max-w-none">
-          <div class="flex  flex-col items-start gap-4 sm:gap-4">
+        <div class="flex max-w-none flex-col items-start gap-8 sm:gap-10">
+          <div class="flex flex-col items-start gap-4 sm:gap-4">
             <h1 class="text-4xl font-medium tracking-tight sm:text-5xl lg:text-6xl">
               {title}
             </h1>
             <p class="text-lg text-primary-950/70 dark:text-primary-200/70 sm:text-xl">
               {description}
             </p>
-            <h1 class="text-md sm:text-md text-primary-950/70 dark:text-primary-200/70">
-              Created on: <FormattedDate date={pubDate} />
-            </h1>
+            <div class="flex w-full flex-row align-middle">
+              <div class="basis-1/2">
+                <h1 class="text-md sm:text-md py-3 text-primary-950/70 dark:text-primary-200/70">
+                  Created on: <FormattedDate date={pubDate} />
+                </h1>
+              </div>
+              <div class="basis-1/2">
+                <dl class="flex flex-wrap py-2">
+                  {
+                    tags.map((tag) => (
+                      <button onclick="">
+                        <div class="rounded-3xl border border-primary-900/10 py-1 px-3 mx-1 align-middle dark:border-primary-300/10">
+                          <dd class="text-md font-medium tracking-tight">{tag}</dd>
+                        </div>
+                      </button>
+                    ))
+                  }
+                </dl>
+              </div>
+            </div>
           </div>
         </div>
         <img
@@ -35,10 +51,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
           src={heroImage}
           alt="Hero picture"
         />
-        <div class="prose prose-stone prose-xl dark:prose-invert prose-red max-w-none prose-img:rounded-xl">
-
-            <slot />
-
+        <div
+          class="prose prose-xl prose-stone prose-red max-w-none dark:prose-invert prose-img:rounded-xl"
+        >
+          <slot />
         </div>
       </div>
     </div>