up

app/components/List.vue

@@ -1,36 +1,15 @@
 <script setup lang="ts">
-type Post = {
-  title: string
-  date: string
-  description: string
-  path: string
-}
+import type { Collections } from '@nuxt/content'
 
-type ListProps = {
-  data: Post[]
-  sort?: 'asc' | 'desc'
-}
-
-const { data, sort = 'desc' } = defineProps<ListProps>()
-
-const sortedPosts = computed(() => {
-  return [...data]
-    .sort((a, b) => {
-      const dateA = new Date(a.date.split('/').reverse().join('-'))
-      const dateB = new Date(b.date.split('/').reverse().join('-'))
-
-      return sort === 'desc'
-        ? dateB.getTime() - dateA.getTime()
-        : dateA.getTime() - dateB.getTime()
-    })
-    .map((post, index) => ({ post, index }))
-})
+defineProps<{
+  posts: Collections['writing'][]
+}>()
 </script>
 
 <template>
   <div class="mt-6 flex flex-col gap-8">
     <NuxtLink
-      v-for="{ post, index } in sortedPosts"
+      v-for="(post, index) in posts"
       :key="post.title"
       :to="post.path"
       class="group relative max-w-prose"
@@ -39,7 +18,7 @@ const sortedPosts = computed(() => {
       :aria-label="`Read ${post.title}`"
     >
       <div class="font-newsreader text-lg italic opacity-50">
-        {{ post.date }}
+        {{ new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}
       </div>
       <h3 class="text-2xl font-newsreader font-medium italic decoration-accent group-hover:underline text-font-primary/80">
         {{ post.title }}

app/components/ThemeSelector.vue

@@ -10,7 +10,7 @@ const switchTheme = () => {
   colorMode.preference = colorMode.value
 }
 
-const startViewTransition = (theme) => {
+const startViewTransition = (theme: string) => {
   if (theme === colorMode.value) return
   if (reduceMotion.value) {
     switchTheme()

app/components/content/Writing.vue

@@ -18,14 +18,14 @@ async function submit() {
   }
 }
 
-const { data, error } = await useAsyncData('writings', () => queryCollection('writing').order('date', 'DESC').all())
+const { data: posts, error } = await useAsyncData('writings', () => queryCollection('writing').order('date', 'DESC').all())
 
-if (!data.value || !error.value) createError({ statusCode: 404 })
+if (!posts.value || !error.value) createError({ statusCode: 404 })
 </script>
 
 <template>
   <div class="flex font-normal flex-col gap-8">
-    <List v-if="data" :data />
+    <List v-if="posts" :posts />
     <div class="mt-10 flex flex-col gap-1">
       <p class="mb-1 text-sm">
         Subscribe to get notified about new articles

app/components/content/WritingList.vue

@@ -1,24 +1,17 @@
 <script setup lang="ts">
-const { data, error } = await useAsyncData('feed', () => queryCollection('writing').order('date', 'DESC').limit(4).all())
+const { data, error } = await useAsyncData('feed', () =>
+  queryCollection('writing')
+    .order('date', 'DESC')
+    .limit(4)
+    .all()
+)
 if (!data.value || !error.value) createError({ statusCode: 404 })
-
-const sortedPosts = computed(() => {
-  if (!data.value) return []
-  return [...data.value]
-    .sort((a, b) => {
-      const dateA = new Date(a.date.split('/').reverse().join('-'))
-      const dateB = new Date(b.date.split('/').reverse().join('-'))
-
-      return dateB.getTime() - dateA.getTime()
-    })
-    .map((post, index) => ({ post, index }))
-})
 </script>
 
 <template>
   <div class="flex flex-col gap-3">
     <NuxtLink
-      v-for="{ post, index } in sortedPosts"
+      v-for="(post, index) in data"
       :key="post.title"
       :to="post.path"
       class="link text-secondary text-lg decoration-accent hover:underline font-extralight"

app/pages/[...slug].vue

@@ -12,7 +12,7 @@ const mdcVars = ref({ ...seo, ...profile, ...socials })
 const isWriting = computed(() => route.path.includes('/writing/') || route.path.includes('/notes/'))
 
 const contentClasses = {
-  writing: 'mb-4 mt-8',
+  writing: 'enter-content mb-4 mt-8',
   default: 'mb-4 mt-8 flex flex-1 flex-col justify-around gap-8 sm:gap-12'
 }
 </script>

content/1.works/canvas.json

@@ -4,5 +4,5 @@
   "description": "A premium portfolio template, with a minimal and clean design",
   "link": "https://canvas.hrcd.fr/",
   "release": "2024",
-  "date": "10/01/2024"
+  "date": "2024-01-10"
 }

content/1.works/currencia.json

@@ -4,5 +4,5 @@
   "description": "Simple yet beautiful crypto tracker template",
   "link": "https://currencia.hrcd.fr/",
   "release": "2023",
-  "date": "2023"
+  "date": "2023-11-20"
 }

content/1.works/eslint-config.json

@@ -4,5 +4,5 @@
   "description": "My personal ESLint Flat Config, crafted for TS, Vue, and Nuxt development.",
   "link": "https://github.com/HugoRCD/eslint-config",
   "release": "2024",
-  "date": "23/03/2024"
+  "date": "2024-03-23"
 }

content/1.works/helpr.json

@@ -4,5 +4,5 @@
   "description": "Automation tools connecting various applications to create powerful workflows",
   "link": "https://helpr.hrcd.fr/",
   "release": "2023",
-  "date": "2023"
+  "date": "2023-03-23"
 }

content/1.works/inkly.json

@@ -4,5 +4,5 @@
   "description": "The most simple open-source email signature generator",
   "link": "https://inkly.hrcd.fr/",
   "release": "2024",
-  "date": "20/06/2024"
+  "date": "2024-06-20"
 }

content/1.works/maison-hochard.json

@@ -4,5 +4,5 @@
   "description": "Luxury graphic design and web development communication agency",
   "link": "https://mh.hrcd.fr/",
   "release": "2022",
-  "date": "2022"
+  "date": "2022-11-20"
 }

content/1.works/nuppets.json

@@ -4,5 +4,5 @@
   "description": "A universal hub for Nuxt and Vue snippets - Available for Raycast, VS Code, and more",
   "link": "https://nuppets.dev",
   "release": "2025",
-  "date": "08/02/2025"
+  "date": "2025-02-08"
 }

content/1.works/nuxt-ui-pro.json

@@ -3,5 +3,5 @@
   "category": "ecosystem",
   "description": "The most complete Nuxt / Vue UI library",
   "link": "https://ui3.nuxt.dev/getting-started",
-  "date": "2025"
+  "date": "2025-01-06"
 }

content/1.works/nuxt-ui.json

@@ -3,5 +3,5 @@
   "category": "ecosystem",
   "description": "The most complete Nuxt / Vue UI library",
   "link": "https://ui3.nuxt.dev/getting-started",
-  "date": "2025"
+  "date": "2025-01-06"
 }

content/1.works/nuxt-visitors.json

@@ -4,5 +4,5 @@
   "description": "Add real-time visitor tracking to your Nuxt app with one line of code. WebSocket made easy",
   "link": "https://nuxt-visitors.nuxt.dev/",
   "release": "2025",
-  "date": "28/01/2025"
+  "date": "2025-01-28"
 }

content/1.works/nuxtlog.json

@@ -4,5 +4,5 @@
   "description": "A changelog, newsletter and blog template made for Nuxt",
   "link": "https://nuxtlog.hrcd.fr/",
   "release": "2024",
-  "date": "2024"
+  "date": "2024-01-18"
 }

content/1.works/shelve.json

@@ -4,5 +4,5 @@
   "description": "Easily kick off and oversee team projects with just a few clicks!",
   "link": "https://shelve.cloud/",
   "release": "2024",
-  "date": "29/02/2024"
+  "date": "2024-02-29"
 }

content/2.writing/5-amazing-raycast-nuxt-snippets.md

@@ -2,7 +2,7 @@
 title: 5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects
 description: Discover 5 powerful Raycast snippets that can transform your Nuxt
   and Vue development workflow, saving time and enhancing productivity.
-date: 22/01/2024
+date: 2024-01-22
 ---
 
 # 5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects

content/2.writing/from-local-to-production-containerizing-your-nuxt-app.md

@@ -4,7 +4,7 @@ description: Learn how to properly containerize and deploy a Nuxt application
   using the latest versions of Nuxt UI and Content. Set up Docker with best
   practices, automate builds with GitHub Actions, and deploy your application
   anywhere.
-date: 15/01/2025
+date: 2025-01-15
 ---
 
 # From Local to Production: Deploy the Latest Nuxt Stack with Docker :prose-icon{align name="simple-icons:nuxtdotjs" size="30px"}

content/2.writing/how-raycast-became-my-ultimate-sidekick.md

@@ -3,7 +3,7 @@ title: How Raycast Became My Ultimate Sidekick
 description: Let me take you on a journey through the magical land of Raycast –
   an app that has completely revolutionized my workflow and made me wonder how I
   ever survived without it.
-date: 05/03/2024
+date: 2024-03-05
 ---
 
 # How Raycast Became My Ultimate Sidekick ?

content/2.writing/how-to-securely-share-environment-variables-with-your-team.md

@@ -3,7 +3,7 @@ title: How To Securely Share Environment Variables With Your Team
 description: Learn how to avoid critical security risks in environment variable
   management and discover how Shelve provides a modern, secure solution for
   development teams.
-date: 24/10/2024
+date: 2024-10-24
 ---
 
 # How To Securely Share Environment Variables With Your Team

content/2.writing/not-an-impostor.md

@@ -2,7 +2,7 @@
 title: You are not an impostor
 description: Your story is worth telling, and you are not alone in this journey.
   Here's how to overcome the trap of perfection and embrace your authenticity.
-date: 11/01/2024
+date: 2024-01-11
 ---
 
 # Your story is worth telling