Implement blog

app/app.vue

@@ -10,7 +10,7 @@ useSeoMeta({
   <AppBackground />
   <UContainer class="z-50 relative">
     <AppHeader />
-    <NuxtPage class="mt-24" />
+    <NuxtPage class="mt-12" />
     <AppFooter />
   </UContainer>
 </template>
@@ -18,7 +18,7 @@ useSeoMeta({
 <style>
 body {
   font-family: 'DM Sans', sans-serif;
-  @apply h-full w-full text-[#374151] dark:text-[#d1d5db];
+  @apply h-full w-full !text-gray-600 dark:!text-gray-400;
 }
 
 .sofia {

app/components/AppHeader.vue

@@ -31,10 +31,13 @@ const navs = [
 </script>
 
 <template>
-  <header class="flex justify-between my-8">
-    <div>
-      Logo
-    </div>
+  <header class="flex items-center justify-between my-8">
+    <NuxtLink
+      class="handwriting text-3xl flex gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
+      to="/"
+    >
+      Arthur Danjou
+    </NuxtLink>
     <nav class="flex gap-2 items-center">
       <div
         v-for="nav in navs"
@@ -62,15 +65,13 @@ const navs = [
             @click="isDark = !isDark"
           />
         </UTooltip>
-        <UTooltip text="open menu">
-          <UButton
-            color="gray"
-            icon="i-ph-command-duotone"
-            size="sm"
-            variant="link"
-          />
-        </UTooltip>
       </ClientOnly>
     </nav>
   </header>
 </template>
+
+<style>
+.handwriting {
+  font-family: 'Dancing Script', cursive;
+}
+</style>

app/components/AppTitle.vue

@@ -18,7 +18,7 @@ defineProps({
     >
       {{ title }}
     </h1>
-    <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
+    <p class="mt-6 text-base">
       {{ description }}
     </p>
   </div>

app/components/content/Activity.vue

@@ -17,10 +17,16 @@ useIntervalFn(async () => await refresh(), 5000)
     class="flex items-start gap-2"
   >
     <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
-      <div
-        :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
-        class="h-3 w-3 inline-flex rounded-full cursor-help mt-2"
-      />
+      <div class="relative flex h-3 w-3 mt-2">
+        <div
+          v-if="codingActivity.state.toLowerCase().includes('editing')"
+          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
+        />
+        <div
+          :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
+          class="relative inline-flex rounded-full h-3 w-3"
+        />
+      </div>
     </UTooltip>
     <span v-if="codingActivity.state.toLowerCase().includes('editing')">
       I'm actually working on <strong>{{ codingActivity.details }}</strong>,

app/components/uses/Item.vue

@@ -15,7 +15,7 @@ defineProps({
     <p class="text-base font-semibold text-black dark:text-white">
       {{ item.name }}
     </p>
-    <p class="text-sm text-gray-600 dark:text-gray-400">
+    <p class="text-sm">
       {{ item.description }}
     </p>
   </li>

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>

content/index.md

@@ -1,5 +1,3 @@
-# Arthur Danjou
-
 Hey, I'm Arthur Danjou, a mathematics student at the Paris-Saclay Faculty of Science in France.
 
 With a **deep understanding of emerging technologies**, I'm at the heart of a rapidly expanding field. My background in **mathematics** gives me a head start in understanding the concepts and theories behind these **technologies** and in designing them effectively.

content/writings/how-does-my-website-work.md

@@ -0,0 +1,39 @@
+---
+slug: how-does-my-website-work
+title: 'How does my website work?'
+description: 'My new website is using a fantastical stack and I am explaining how my playground works'
+publishedAt: '2024/06/21'
+readingTime: 7
+---
+
+## Ideas and Goals
+
+### A playground for ideas
+
+Testing frameworks (new nuxt 3), improving css style, discovering new technologies and frameworks
+
+### Fast
+
+Faster than the old one thanks to the new version
+
+## FrontEnd & BackEnd with Nuxt 3
+
+### Nuxt3 & NuxtUI, Tailwind
+
+### Database & Deployment
+
+NuxtHub & Cloudflare
+
+### Editing
+
+Nuxt Studio
+
+## How much everything costs
+
+0 thanks to nuxt free plan
+
+## What's next
+
+### Performance
+
+### Style & Animation

nuxt.config.ts

@@ -57,7 +57,8 @@ export default defineNuxtConfig({
     families: {
       'Inter': [400, 500, 600, 700, 800, 900],
       'Sofia Sans': [400],
-      'DM Sans': [400, 500, 600, 700, 800, 900]
+      'DM Sans': [400, 500, 600, 700, 800, 900],
+      'Dancing Script': [400, 700]
     }
   },