✨ Posts

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>