Created blog page, many improvements

2024-02-18 11:30:50 +03:00
parent cfbaf56159
commit 3853e8fa20
23 changed files with 4301 additions and 3284 deletions
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { slug } = useRoute().params
+</script>
+
+<template>
+  <article
+    class="scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
+  >
+    <ContentDoc :path="`/blog/${slug}`">
+      <template #default="{ doc }">
+        <div class="post-preamble">
+          <h3 class="alex">{{ doc.title }}</h3>
+          <img
+            draggable="false"
+            :src="doc.thumbnail"
+            :alt="doc.title"
+            class="post-preamble-thumb rounded-4"
+          />
+        </div>
+
+        <div class="post-content">
+          <ContentRenderer :value="doc" />
+        </div>
+      </template>
+
+      <template #not-found>
+        <div
+          class="d-flex flex-column justify-content-center align-items-center gap-3"
+        >
+          <span>Blog post not found 🙁</span>
+          <NuxtLink to="/blog" class="link-hi">Back to blog</NuxtLink>
+        </div>
+      </template>
+    </ContentDoc>
+  </article>
+</template>
+
+<style scoped lang="scss"></style>
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { formatDate } from 'date-fns'
+</script>
+
+<template>
+  <section>
+    <h3 class="alex">Recent posts</h3>
+    <ContentList
+      :query="{
+        path: '/blog',
+        where: [{ draft: false }],
+        limit: 3,
+        sort: [{ created: -1 }],
+      }"
+    >
+      <template #default="{ list }">
+        <div class="d-grid gap-3">
+          <NuxtLink
+            v-for="post in list"
+            :key="post._path"
+            :to="post._path"
+            class="no-decoration"
+          >
+            <article
+              class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
+            >
+              <div class="post-thumb">
+                <img
+                  draggable="false"
+                  :src="post.thumbnail"
+                  :alt="post.title"
+                  class="rounded-4"
+                />
+              </div>
+              <div>
+                <h3 class="post-title alex">{{ post.title }}</h3>
+                <p class="post-description">{{ post.description }}</p>
+
+                <div class="row">
+                  <div class="col-6 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">
+                    <iconify-icon icon="mdi:pencil" />
+                    <small class="nobr">
+                      {{ formatDate(post.updated, 'LLLL do, y &ndash; HH:mm') }}
+                    </small>
+                  </div>
+                </div>
+              </div>
+
+              <div class="post-pocket d-flex flex-row gap-1 align-items-center">
+                <iconify-icon icon="mdi:clock-outline" />
+                <small class="nobr font-monospace font-small">
+                  {{ post.readingTime.text }}
+                </small>
+              </div>
+            </article>
+          </NuxtLink>
+        </div>
+      </template>
+
+      <template #not-found>
+        <div
+          class="d-flex flex-column justify-content-center align-items-center gap-3"
+        >
+          <span>No posts found 🙁</span>
+          <NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
+        </div>
+      </template>
+    </ContentList>
+  </section>
+</template>
+
+<style scoped lang="scss"></style>