Implement blog

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="!max-w-none prose dark:prose-invert mt-12">
+  <main class="!max-w-none prose dark:prose-invert">
     <ContentDoc path="/" />
   </main>
 </template>

app/pages/uses.vue

@@ -50,9 +50,9 @@ const ide = items.value!.filter(item => item.category === 'ide')
         <li class="w-2/3 mx-auto">
           <NuxtImg
             alt="My IntelliJ IDE"
-            src="/jetbrains.png"
+            src="/uses/jetbrains.png"
           />
-          <p class="text-center text-gray-600 dark:text-gray-400 text-sm mt-2 italic">
+          <p class="text-center text-sm mt-2 italic">
             My IntelliJ Idea Ultimate IDE
           </p>
         </li>

app/pages/writings/[slug].vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { data: post } = await useAsyncData(`writing:${route.params.slug}`, () => queryContent(`/writings/${route.params.slug}`).findOne())
+
+function top() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: 'smooth'
+  })
+}
+
+const { copy, copied } = useClipboard({
+  source: `https://arthurdanjou.fr/writing/${route.params.slug}`,
+  copiedDuring: 4000
+})
+</script>
+
+<template>
+  <main v-if="post">
+    <div class="flex">
+      <NuxtLink
+        class="flex items-center gap-2 mb-4 group text-sm hover:text-black dark:hover:text-white duration-300"
+        to="/writings"
+      >
+        <UIcon
+          class="group-hover:-translate-x-1 transform duration-300"
+          name="i-ph-arrow-left-duotone"
+          size="20"
+        />
+        Go back
+      </NuxtLink>
+    </div>
+    <AppTitle
+      :description="post.description"
+      :title="post.title ?? 'Untitled'"
+    />
+    <div
+      v-if="post.cover"
+      class="w-full rounded-md my-8"
+    >
+      <NuxtImg
+        :src="`/writings/${post.cover}`"
+        alt="Writing cover"
+      />
+    </div>
+    <article class="mt-8">
+      <ContentRenderer :value="post">
+        <ContentRendererMarkdown
+          :value="post"
+          class="!max-w-none prose dark:prose-invert"
+        />
+      </ContentRenderer>
+      <UDivider
+        class="my-16"
+        icon="i-ph-hands-clapping-duotone"
+      />
+      <div class="space-y-8">
+        <p>
+          Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't
+            forget to leave a like!</strong>
+        </p>
+        <div class="flex gap-4 items-center">
+          <UButton
+            color="gray"
+            icon="i-ph-arrow-fat-lines-up-duotone"
+            label="Go to top"
+            size="lg"
+            variant="ghost"
+            @click.prevent="top()"
+          />
+          <UButton
+            v-if="copied"
+            color="green"
+            icon="i-ph-check-square-duotone"
+            label="Link copied"
+            size="lg"
+            variant="ghost"
+            @click.prevent="copy()"
+          />
+          <UButton
+            v-else
+            color="gray"
+            icon="i-ph-square-duotone"
+            label="Copy link"
+            size="lg"
+            variant="ghost"
+            @click.prevent="copy()"
+          />
+        </div>
+      </div>
+    </article>
+  </main>
+</template>
+
+<style>
+.prose h2 a,
+.prose h3 a {
+  @apply no-underline;
+}
+</style>

app/pages/writings/index.vue

@@ -4,6 +4,10 @@ useSeoMeta({
   title: 'My Shelf | Arthur Danjou',
   description
 })
+
+const { data: writings } = await useAsyncData('all-writings', () =>
+  queryContent('/writings').sort({ published: -1 }).without('body').find()
+)
 </script>
 
 <template>
@@ -12,5 +16,30 @@ useSeoMeta({
       :description="description"
       title="Writing on my life, development and my passions."
     />
+    <ul class="mt-12 space-y-24">
+      <li
+        v-for="(writing, id) in writings"
+        :key="id"
+      >
+        <NuxtLink
+          :to="writing._path"
+          class="group"
+        >
+          <article>
+            <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
+              {{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} - {{ writing.readingTime }}min.
+            </div>
+            <h1
+              class="font-bold my-2 text-lg duration-300 text-gray-600 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white"
+            >
+              {{ writing.title }}
+            </h1>
+            <h3>
+              {{ writing.description }}
+            </h3>
+          </article>
+        </NuxtLink>
+      </li>
+    </ul>
   </main>
 </template>