Bunch of updates

pages/blog/[post].vue

@@ -13,7 +13,10 @@
         <div class="pt-4"></div>
         <div class="mx-auto max-w-3xl px-4 blog">
             <h1>{{ page.title }}</h1>
-            <h2 class="text-zinc-500 pb-3">Posted on: {{ page.date }}</h2>
+            <p class="text-zinc-500 pb-2">
+                {{ page.description }}
+                <span class="float-right">{{ page.date }}</span>
+            </p>
             <!-- <ContentDoc /> -->
             <ContentRenderer :key="page._id" :value="page" />
         </div>
@@ -30,38 +33,55 @@
                 <!-- <p>{{ post }}</p> -->
             </a>
         </div>
+        <div class="hidden">
+            <img src="" alt="" class="banner" />
+        </div>
     </div>
 </template>
 
 <script setup>
-    // Find other pages and list them
-    const { data } = await useAsyncData("blog", () => queryContent("/").find());
-    // Find current page content
-    const { page } = useContent();
-    // console.log(page.value);
-    // console.log(data.value);
+// Find current page content
+const { page } = useContent();
+
+// Find other pages and list them
+const { data } = await useAsyncData("blog", () => queryContent("/").find());
+
+onMounted(() => {
+    document.title = "Projects | Max Gialanella";
+});
 </script>
 
 <style>
-    .blog {
-        @apply leading-9 text-base;
-    }
-    .blog a {
-        @apply text-blue-700;
-    }
-    .blog h1 {
-        @apply pt-5 text-3xl border-zinc-300;
-    }
-    .blog h3 {
-        @apply pt-5 mb-2 text-xl border-b border-zinc-300;
-    }
-    .blog img {
-        @apply my-3 shadow-sm;
-    }
-    .blog p + P {
-        @apply pt-4;
-    }
-    .blog ul {
-        @apply list-disc ml-10;
-    }
+r .blog {
+    @apply leading-9 text-base;
+}
+.blog a {
+    @apply text-blue-700;
+}
+.blog h1 {
+    @apply pt-5 text-3xl border-zinc-300;
+}
+.blog h3 {
+    @apply pt-5 mb-2 text-xl border-b border-zinc-300;
+}
+.blog img {
+    @apply my-3 shadow-md;
+}
+.blog p + P {
+    @apply pt-4;
+}
+.blog ul {
+    @apply list-disc ml-10;
+}
+.blog .banner {
+    background-color: #ebebeb;
+    width: 100%;
+    padding: 15px 0;
+    max-height: 150px;
+}
+.blog .banner2 {
+    text-align: center;
+    max-height: 150px;
+    width: auto;
+}
 </style>