Blog slowly looming over

pages/blog/[slug].vue

@@ -1,24 +1,111 @@
 <script setup lang="ts">
+import { formatDate } from 'date-fns'
 const { slug } = useRoute().params
+
+const config = useAppConfig()
+const content = useContent()
+
+const meta = {
+  title: `${content.page.title}`,
+  description: content.page.description,
+  image: content.page.thumbnail,
+  url: `${config.url}/blog`,
+}
+
+defineOgImage()
+
+// Hydrate the rendered items.
+onMounted(() => {
+  document.querySelectorAll('pre').forEach((pre) => {
+    const icon = document.createElement('iconify-icon')
+
+    icon.setAttribute('icon', 'mdi:content-copy')
+    icon.setAttribute('inline', 'true')
+
+    icon.classList.add('button')
+
+    pre.appendChild(icon)
+  })
+
+  document
+    .querySelectorAll('code:not(pre *), pre > iconify-icon.button')
+    .forEach((code) => {
+      if (code instanceof HTMLElement) {
+        code.onclick = () => {
+          const area = document.createElement('textarea')
+
+          area.textContent =
+            code.nodeName && code.nodeName.toLowerCase() === 'code'
+              ? code.textContent
+              : code.parentElement!.textContent
+
+          // It's necessary to create the textarea element every time you copy to get access to the select() method.
+          area.setSelectionRange(0, 99999) // An iOS gotcha.
+          area.select()
+
+          // Copy the text inside the textarea.
+          navigator.clipboard.writeText(area.value)
+
+          // TODO: Alert the user text has been successfully copied.
+
+          // Remove the textarea element.
+          area.remove()
+        }
+      }
+    })
+})
+
+onUnmounted(() => {
+  document.querySelectorAll('code').forEach((code) => {
+    code.onclick = null
+  })
+
+  document.querySelectorAll('pre').forEach((pre) => {
+    pre.querySelector('.clipboard')?.remove()
+  })
+})
 </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"
+    class="post 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
+          class="post-preamble"
+          :style="{ backgroundImage: 'url(' + doc.thumbnail + ')' }"
+        >
+          <div class="p-2">
+            <h3 class="alex">{{ doc.title }}</h3>
+            <div class="d-flex flex-row row-gap-0 column-gap-2 flex-wrap">
+              <div class="d-flex flex-row gap-1 align-items-center">
+                <iconify-icon icon="mdi:calendar" />
+                <strong class="nobr font-small">
+                  {{ formatDate(doc.created, 'LLLL do, y &ndash; HH:mm') }}
+                </strong>
+              </div>
+              <div class="d-flex flex-row gap-1 align-items-center">
+                <iconify-icon icon="mdi:clock-outline" />
+                <strong class="nobr font-small">
+                  {{ doc.readingTime.text.split(' ')[0] + ' minutes to read' }}
+                </strong>
+              </div>
+            </div>
+          </div>
+          <NuxtLink
+            :href="`https://twitter.com/share?url=${config.url}/blog/${slug}&text=${doc.title}&hashtags=${doc.tags.slice(0, 3).join(',').replace(/ /g, '')}`"
+            target="_blank"
+            class="link post-preamble-share px-2 py-1"
+          >
+            <iconify-icon icon="mdi:twitter"></iconify-icon>
+          </NuxtLink>
+          <NuxtLink to="/blog" class="link post-preamble-control px-2 py-1">
+            <iconify-icon icon="icon-park-solid:back"></iconify-icon>
+          </NuxtLink>
         </div>
-
         <div class="post-content">
+          <Separator class="mt-0" />
           <ContentRenderer :value="doc" />
         </div>
       </template>

pages/blog/index.vue

@@ -1,5 +1,42 @@
 <script setup lang="ts">
 import { formatDate } from 'date-fns'
+
+const config = useAppConfig()
+const meta = {
+  title: 'The Enderchest',
+  description:
+    'A blog about software development, scientific research and Windows quirks.',
+  image: `${config.url}/images/chest.png`,
+  url: `${config.url}/blog`,
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'The Enderchest',
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
 </script>
 
 <template>