Remove v-if prop anti-pattern, clean up, add reader mode

pages/about.vue

@@ -43,14 +43,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">About me</h3>
-    <hr />
+    <Separator />
     <p>
       <strong>🚧 This page is currently under construction.</strong> Expect a
       lot more content to be added as time passes.
       <em>Please report all bugs you encounter via the link in the footer</em>,
       I will make sure to sand them down.
     </p>
-    <hr />
+    <Separator />
     <p>
       Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
       Russia. I have been developing software since I was 10, and I have always

pages/blog/index.vue

@@ -32,20 +32,36 @@ import { formatDate } from 'date-fns'
                   class="rounded-4"
                 />
               </div>
-              <div>
+              <div class="w-100">
                 <h3 class="post-title alex">{{ post.title }}</h3>
-                <p class="post-description">{{ post.description }}</p>
+                <p class="post-description mb-0">{{ post.description }}</p>
 
-                <div class="row">
-                  <div class="col-6 d-flex flex-row gap-1 align-items-center">
+                <div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
+                  <span
+                    v-for="(tag, index) in post.tags.slice(0, 3)"
+                    :key="index"
+                    class="nobr"
+                  >
+                    {{ tag }}
+                  </span>
+                  <span v-if="post.tags.length > 3" class="nobr">
+                    {{ post.tags.length - 3 }} more
+                  </span>
+                </div>
+
+                <Separator class="m-0" />
+
+                <div class="post-details py-2">
+                  <div class="d-flex flex-row gap-1 align-items-center">
                     <iconify-icon icon="mdi:calendar" />
                     <small class="nobr">
                       {{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
                     </small>
                   </div>
-                </div>
-                <div v-if="post.updated" class="row">
-                  <div class="col-12 d-flex flex-row gap-1 align-items-center">
+                  <div
+                    v-if="post.updated"
+                    class="d-flex flex-row gap-1 align-items-center"
+                  >
                     <iconify-icon icon="mdi:pencil" />
                     <small class="nobr">
                       {{ formatDate(post.updated, 'LLLL do, y &ndash; HH:mm') }}
@@ -54,7 +70,9 @@ import { formatDate } from 'date-fns'
                 </div>
               </div>
 
-              <div class="post-pocket d-flex flex-row gap-1 align-items-center">
+              <div
+                class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
+              >
                 <iconify-icon icon="mdi:clock-outline" />
                 <small class="nobr font-monospace font-small">
                   {{ post.readingTime.text }}

pages/projects.vue

@@ -69,14 +69,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Projects</h3>
-    <hr />
+    <Separator />
     <p>
       <strong>🚧 This page is currently under construction.</strong> Expect a
       lot more content to be added as time passes.
       <em>Please report all bugs you encounter via the link in the footer</em>,
       I will make sure to sand them down.
     </p>
-    <hr />
+    <Separator />
     <p><strong>My current projects are:</strong></p>
     <ul>
       <li v-for="(item, index) in projects" :key="index">

pages/social.vue

@@ -117,14 +117,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Online presence</h3>
-    <hr />
+    <Separator />
     <p>
       <strong>🚧 This page is currently under construction.</strong> Expect a
       lot more content to be added as time passes.
       <em>Please report all bugs you encounter via the link in the footer</em>,
       I will make sure to sand them down.
     </p>
-    <hr />
+    <Separator />
     <div class="row">
       <div class="col-12 col-md-3">
         <h5 class="alex">Social media</h5>