✨ Posts

components/RouterLink.vue

@@ -0,0 +1,7 @@
+<template>
+  <nuxt-link v-bind="props" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ to: string; target: string }>();
+</script>

content/posts/hydrogen.md

@@ -0,0 +1,7 @@
+---
+slug: "hy"
+title: "Projecy Hydrogen"
+description: "关于我们最新项目，Hydrogen 的详细介绍。"
+thumbnail: "https://files.solsynth.dev/d/media01/202403170109556.jpg"
+date: "2024-03-16T15:50:16.202Z"
+---

content/products/solarpass.md

@@ -6,6 +6,7 @@ code: "Hydrogen.Solarpass"
 description: "The unified identity service for Solar Network."
 link: "https://id.solsynth.dev"
 source: "https://git.solsynth.dev/Hydrogen/Identity"
+date: "2024-03-16T15:50:16.202Z"
 ---
 
-I have nothing to say.
+I have nothing to say.

layouts/default.vue

@@ -8,22 +8,27 @@
         image="/favicon.svg"
       ></v-avatar>
 
-      <nuxt-link v-for="link in navbars" :to="link.to">
+      <v-btn v-for="link in navbars" variant="text" :href="link.to">
-        <v-btn variant="text">{{ link.label }}</v-btn>
+        {{ link.label }}
-      </nuxt-link>
+      </v-btn>
 
       <v-spacer></v-spacer>
     </v-container>
   </v-app-bar>
 
   <v-main class="bg-grey-lighten-3 min-h-[calc(100vh - 64px)]">
-    <slot />
+    <suspense>
+      <slot />
+    </suspense>
   </v-main>
 </template>
 
 <script setup lang="ts">
+import RouterLink from "~/components/RouterLink.vue";
+
 const navbars = [
   { label: "Home", to: "/" },
+  { label: "Posts", to: "/posts" },
   { label: "Products", to: "/products" },
 ];
 </script>

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">
+        <div class="mt-3 flex justify-between items-center">
-          <nuxt-link v-if="product?.source" :to="product?.source" target="_blank">
+          <p class="ps-3.5 text-sm">
-            <v-btn variant="text" color="info" prepend-icon="mdi-code-tags">
+            {{ 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>
+            <v-btn
-          <nuxt-link :to="product?.link" target="_blank">
+              variant="text"
-            <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
+              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
-                <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
+                variant="text"
-                  Launch
+                color="teal"
-                </v-btn>
+                prepend-icon="mdi-launch"
-              </nuxt-link>
+                target="_blank"
-              <nuxt-link :to="'/products/' + item.slug">
+                :href="item.link"
-                <v-btn variant="text" prepend-icon="mdi-page-next">
+              >
-                  Learn more
+                Launch
-                </v-btn>
+              </v-btn>
-              </nuxt-link>
+              <v-btn
+                variant="text"
+                prepend-icon="mdi-page-next"
+                :href="'/products/' + item.slug"
+              >
+                Learn more
+              </v-btn>
             </div>
           </v-col>
         </v-row>