feat: improve blog list page

Author: HigherOrderLogic

app/layouts/default.vue

@@ -2,11 +2,19 @@
   <div class="w-full font-normal font-[Inter_Variable] prose-neutral dark:prose-invert">
     <div>
       <navbar />
-      <div class="m-a lt-md:px-4 lg:prose">
+      <div class="m-a lt-md:px-4 lg:prose" :class="[$style.dashed_link]">
         <slot />
         <div class="h-8" />
         <cd />
       </div>
     </div>
   </div>
 </template>
+
+<style lang="scss" module>
+.dashed_link {
+  a {
+  --at-apply: "underline-dashed hover:underline-solid"
+}
+}
+</style>

app/pages/blogs/[...slugs].vue

@@ -12,8 +12,12 @@ const ContentNotFound = defineComponent({
 <template>
   <content-doc>
     <template #default="{ doc }">
-      <h1>{{ doc.title }}</h1>
-      <p>{{ useDateFormat(doc.date, 'ddd, DD MMM YYYY') }}</p>
+      <div class="pb-4">
+        <h1>{{ doc.title }}</h1>
+        <p class="op-70">
+          {{ useDateFormat(doc.date, 'ddd, DD MMM YYYY') }}
+        </p>
+      </div>
       <content-renderer :value="doc" />
     </template>
     <template #not-found>

app/pages/blogs/index.vue

@@ -4,18 +4,27 @@ useHead({ title: 'Blogs' })
 
 <template>
   <div>
-    <h1>Blogs</h1>
+    <h1 class="pb-4">
+      Blogs
+    </h1>
     <content-list v-slot="{ list }" path="/blogs">
-      <template v-for="blog in list.sort((a, b) => +new Date(a.date) - +new Date(b.date))" :key="blog._path">
-        <h3>
-          <nuxt-link :to="blog._path">
-            {{ blog.title }}
-          </nuxt-link>
-        </h3>
-        <p>
-          {{ useDateFormat(blog.date, 'DD MMM YYYY') }}
-        </p>
-      </template>
+      <div class="divide-y divide-gray divide-op-20 dark:(divide-zinc divide-op-25)">
+        <template
+          v-for="blog in list.sort((a, b) => +new Date(b.date) - +new Date(a.date))"
+          :key="blog._path"
+        >
+          <div class="flex flex-col items-start py-3 md:(grid-cols-[75%,auto] flex-row pt-2)">
+            <h3 class="my-2 flex-auto md:m-a">
+              <nuxt-link :to="blog._path">
+                {{ blog.title }}
+              </nuxt-link>
+            </h3>
+            <p class="my-0 op-70 md:(m-a flex-shrink-1)">
+              {{ useDateFormat(blog.date, 'DD MMM YYYY') }}
+            </p>
+          </div>
+        </template>
+      </div>
     </content-list>
   </div>
 </template>

content/blogs/a-new-home.md

@@ -1,6 +1,5 @@
 ---
 title: A new home
-description: A new home.
 date: 2023-01-01 00:00:00 UTC
 ---