feat: improve blogs visual

Author: HigherOrderLogic

app/layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="w-full font-normal font-[Inter_Variable] prose-neutral dark:prose-invert">
     <div>
       <navbar />
-      <div class="mx-a lt-md:px-4 md:prose" :class="[$style.dashed_link]">
+      <div class="mx-a lt-md:px-4 md:prose" :class="[$style.dashed_link, $style.no_header_underline]">
         <slot />
         <div class="h-8" />
         <cd />
@@ -17,4 +17,12 @@
     --at-apply: "underline-dashed hover:underline-solid"
   }
 }
+
+.no_header_underline {
+  h1, h2, h3, h4, h5, h6 {
+    a {
+      --at-apply: 'no-underline'
+    }
+  }
+}
 </style>

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

@@ -1,4 +1,32 @@
 <script setup lang="ts">
+import type { MarkdownNode, ParsedContent } from '@nuxt/content'
+
+function parseNode(node: MarkdownNode): number {
+  let wordCount = 0
+
+  if (node.type === 'text' && node.value) {
+    wordCount += node.value.split(' ').length
+  }
+
+  for (const child of node.children ?? []) {
+    wordCount += parseNode(child)
+  }
+
+  return wordCount
+}
+
+function getWordCount(parsedContent: ParsedContent): number {
+  let wordCount = 0
+
+  if (parsedContent.body) {
+    for (const child of parsedContent.body.children) {
+      wordCount += parseNode(child)
+    }
+  }
+
+  return wordCount
+}
+
 const ContentNotFound = defineComponent({
   setup() {
     showError({
@@ -14,8 +42,9 @@ const ContentNotFound = defineComponent({
     <template #default="{ doc }">
       <div class="pb-4">
         <h1>{{ doc.title }}</h1>
-        <p class="op-70">
-          {{ useDateFormat(doc.date, 'ddd, DD MMM YYYY') }}
+        <p class="op-70 divide-x *:px-2 first:*:pl-0">
+          <span>{{ useDateFormat(doc.date, 'ddd, DD MMMM YYYY') }}</span>
+          <span>{{ getWordCount(doc) }} words</span>
         </p>
       </div>
       <content-renderer :value="doc" />

app/pages/blogs/index.vue

@@ -13,14 +13,14 @@ useHead({ title: 'Blogs' })
           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)">
+          <div class="flex flex-col items-start py-2 md:flex-row">
             <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">
-              {{ useDateFormat(blog.date, 'DD MMM YYYY') }}
+            <p class="my-0 op-70 md:(my-a ml-12 min-w-fit)">
+              {{ useDateFormat(blog.date, 'DD MMMM YYYY') }}
             </p>
           </div>
         </template>

nuxt.config.ts

@@ -65,6 +65,7 @@ export default defineNuxtConfig({
     },
     manifest: {
       background_color: '#FFF',
+      theme_color: '#000',
       display: 'minimal-ui',
       lang: 'en',
       orientation: 'portrait-primary',