✨ Posts

pages/index.vue

@@ -96,7 +96,7 @@
         <div class="mt-4 flex justify-center gap-2">
           <v-tooltip v-for="item in products" location="top">
             <template #activator="{ props }">
-              <v-card v-bind="props" hover class="w-24 h-24">
+              <v-card v-bind="props" hover class="w-24 h-24" :href="'/products/' + item.slug">
                 <div class="h-full w-full flex justify-center items-center">
                   <img :src="item.icon" width="64" height="64" class="block" />
                 </div>

pages/posts/[slug].vue

@@ -0,0 +1,48 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto">
+      <v-card>
+        <v-img
+          v-if="post?.thumbnail"
+          cover
+          class="align-end"
+          height="180"
+          :src="post?.thumbnail"
+        />
+
+        <div class="pa-5">
+          <v-card-text class="pt-0 pb-1">
+            <h2 class="text-xl font-medium">{{ post?.title }}</h2>
+            <p class="opacity-80">{{ post?.description }}</p>
+          </v-card-text>
+
+          <v-divider class="mx-[-20px] my-3 border-opacity-75" />
+
+          <v-card-text>
+            <content-renderer :value="post">
+              <template #empty>
+                <p>No content found.</p>
+              </template>
+            </content-renderer>
+          </v-card-text>
+
+          <v-divider class="mx-[-20px] my-4 border-opacity-75" />
+
+          <div class="mt-3 flex justify-between items-center">
+            <p class="ps-3.5 text-sm">
+              {{ new Date(post?.date).toLocaleString() }}
+            </p>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: post } = await useAsyncData("post", () =>
+  queryContent("posts").where({ slug: route.params.slug }).findOne()
+);
+</script>

pages/posts/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto flex flex-col gap-2">
+      <v-card v-for="item in posts">
+        <v-img
+          v-if="item.thumbnail"
+          cover
+          class="align-end"
+          height="180"
+          :src="item.thumbnail"
+        />
+        <div class="py-5 px-7">
+          <h2 class="text-xl font-medium">{{ item.title }}</h2>
+          <p class="mt-3 opacity-80">{{ item.description }}</p>
+          <div class="mt-3 flex justify-end">
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-page-next"
+              :href="'/posts/' + item.slug"
+            >
+              Read more
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { data: posts } = await useAsyncData("posts", () =>
+  queryContent("posts").find()
+);
+</script>

pages/products/[slug].vue

@@ -18,19 +18,34 @@
           </content-renderer>
         </v-card-text>
 
-        <v-divider class="mx-[-20px] my-3 border-opacity-75" />
+        <v-divider class="mx-[-20px] my-4 border-opacity-75" />
 
-        <div class="mt-3 flex justify-end">
-          <nuxt-link v-if="product?.source" :to="product?.source" target="_blank">
-            <v-btn variant="text" color="info" prepend-icon="mdi-code-tags">
+        <div class="mt-3 flex justify-between items-center">
+          <p class="ps-3.5 text-sm">
+            {{ new Date(product?.date).toLocaleString() }}
+          </p>
+
+          <div>
+            <v-btn
+              v-if="product?.source"
+              variant="text"
+              color="info"
+              prepend-icon="mdi-code-tags"
+              target="_blank"
+              :href="product?.source"
+            >
               Source code
             </v-btn>
-          </nuxt-link>
-          <nuxt-link :to="product?.link" target="_blank">
-            <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
+            <v-btn
+              variant="text"
+              color="teal"
+              prepend-icon="mdi-launch"
+              target="_blank"
+              :href="product?.link"
+            >
               Launch
             </v-btn>
-          </nuxt-link>
+          </div>
         </div>
       </v-card>
     </div>

pages/products/index.vue

@@ -11,16 +11,22 @@
             <p class="font-mono text-sm">{{ item.code }}</p>
             <p class="mt-3 opacity-80">{{ item.description }}</p>
             <div class="mt-3 flex justify-end">
-              <nuxt-link :to="item.link" target="_blank">
-                <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
-                  Launch
-                </v-btn>
-              </nuxt-link>
-              <nuxt-link :to="'/products/' + item.slug">
-                <v-btn variant="text" prepend-icon="mdi-page-next">
-                  Learn more
-                </v-btn>
-              </nuxt-link>
+              <v-btn
+                variant="text"
+                color="teal"
+                prepend-icon="mdi-launch"
+                target="_blank"
+                :href="item.link"
+              >
+                Launch
+              </v-btn>
+              <v-btn
+                variant="text"
+                prepend-icon="mdi-page-next"
+                :href="'/products/' + item.slug"
+              >
+                Learn more
+              </v-btn>
             </div>
           </v-col>
         </v-row>