From 8b0cbd89f2e1b1009b15a3525b30d3250aa6ff85 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 25 Nov 2024 23:13:47 +0100
Subject: [PATCH] Change writing to portfolio

---
 README.md                                         |  5 ++---
 app/components/AppHeader.vue                      |  4 ++--
 app/pages/{writings => portfolio}/[slug].vue      | 10 +++++-----
 app/pages/{writings => portfolio}/index.vue       | 15 +++++++++------
 .../how-my-website-works.md                       |  6 +++---
 5 files changed, 21 insertions(+), 19 deletions(-)
 rename app/pages/{writings => portfolio}/[slug].vue (93%)
 rename app/pages/{writings => portfolio}/index.vue (83%)
 rename content/{writings => portfolio}/how-my-website-works.md (97%)

diff --git a/README.md b/README.md
index 8843a6b..4a78429 100644
--- a/README.md
+++ b/README.md
@@ -22,10 +22,9 @@
 
 ## 🍱 Adding content
 
-### Writings
+### Portfolio
 
-Add a new `.md` file in `/content/writings/` and follow the same pattern as the other articles. Add images
-in `/public/writings/`.
+Add a new `.md` file in `/content/portfolio/` and follow the same pattern as the other articles. Add images in `/public/portflio/`.
 
 ### Uses
 
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 186f3cb..eebeec0 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -25,10 +25,10 @@ const navs = [
   },
   {
     label: {
-      en: 'writings',
+      en: 'portfolio',
       fr: 'écrits',
     },
-    to: '/writings',
+    to: '/portfolio',
     icon: 'books-duotone',
   },
   {
diff --git a/app/pages/writings/[slug].vue b/app/pages/portfolio/[slug].vue
similarity index 93%
rename from app/pages/writings/[slug].vue
rename to app/pages/portfolio/[slug].vue
index 1c82b17..072f1dd 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/portfolio/[slug].vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 const route = useRoute()
-const { data: post } = await useAsyncData(`writing:${route.params.slug}`, () => queryContent(`/writings/${route.params.slug}`).findOne())
+const { data: post } = await useAsyncData(`portfolio:${route.params.slug}`, () => queryContent(`/portfolio/${route.params.slug}`).findOne())
 const {
   data: postDB,
   refresh,
-} = await useAsyncData(`writing:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
+} = await useAsyncData(`portfolio:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
 
 const { locale, locales } = useI18n()
 const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
@@ -22,7 +22,7 @@ function top() {
 }
 
 const { copy, copied } = useClipboard({
-  source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
+  source: `https://arthurdanjou.fr/portfolio/${route.params.slug}`,
   copiedDuring: 4000,
 })
 
@@ -60,7 +60,7 @@ async function handleLike() {
     <div class="flex">
       <NuxtLinkLocale
         class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
-        to="/writings"
+        to="/portfolio"
       >
         <UIcon
           class="group-hover:-translate-x-1 transform duration-300"
@@ -103,7 +103,7 @@ async function handleLike() {
       class="w-full rounded-md my-8"
     >
       <NuxtImg
-        :src="`/writings/${post.cover}`"
+        :src="`/portfolio/${post.cover}`"
         alt="Writing cover"
       />
     </div>
diff --git a/app/pages/writings/index.vue b/app/pages/portfolio/index.vue
similarity index 83%
rename from app/pages/writings/index.vue
rename to app/pages/portfolio/index.vue
index cd846d6..fc7ab65 100644
--- a/app/pages/writings/index.vue
+++ b/app/pages/portfolio/index.vue
@@ -7,8 +7,8 @@ useSeoMeta({
   description: t('description'),
 })
 
-const { data: writings } = await useAsyncData('all-writings', () =>
-  queryContent('/writings').sort({ published: -1 }).without('body').find())
+const { data: writings } = await useAsyncData('all-portfolio', () =>
+  queryContent('/portfolio').sort({ published: -1 }).without('body').find())
 </script>
 
 <template>
@@ -42,11 +42,14 @@ const { data: writings } = await useAsyncData('all-writings', () =>
               >
                 {{ writing.title }}
               </h1>
-              <p
-                class="text-sm text-neutral-500 duration-300"
+              <div
+                class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
               >
-                {{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} · {{ writing.readingTime }}min long
-              </p>
+                <UIcon name="ph:calendar-duotone" size="16" />
+                <p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>·
+                <UIcon name="ph:timer-duotone" size="16" />
+                <p>{{ writing.readingTime }}min long</p>
+              </div>
             </div>
             <h3>
               {{ writing.description }}
diff --git a/content/writings/how-my-website-works.md b/content/portfolio/how-my-website-works.md
similarity index 97%
rename from content/writings/how-my-website-works.md
rename to content/portfolio/how-my-website-works.md
index 25494b0..257eb67 100644
--- a/content/writings/how-my-website-works.md
+++ b/content/portfolio/how-my-website-works.md
@@ -11,7 +11,7 @@ My personal website is an overengineered playground where I tinker, explore new
 
 While it's still fresh in my mind, I wanted to document how this version of the site works, the tools I used to build it, and the challenges I overcame to bring it to its current state.
 
-![Website](/writings/how-my-website-works/website.png)
+![Website](/portfolio/how-my-website-works/website.png)
 
 ## Ideas and Goals
 
@@ -61,7 +61,7 @@ Nuxt UI aims to provide everything you need for the UI when building a Nuxt app,
 
 #### NuxtHub & Cloudflare workers
 
-![NuxtHub](/writings/how-my-website-works/nuxt-hub.png)
+![NuxtHub](/portfolio/how-my-website-works/nuxt-hub.png)
 
 NuxtHub is an innovative deployment and management platform tailored for Nuxt, leveraging the power of Cloudflare. Deploy your application effortlessly with database, key-value, and blob storage—all configured seamlessly within your Cloudflare account.
 
@@ -79,7 +79,7 @@ One word : `If you know SQL — you know Drizzle.`
 
 #### Nuxt Studio
 
-![Nuxt Studio](/writings/how-my-website-works/nuxt-studio.png)
+![Nuxt Studio](/portfolio/how-my-website-works/nuxt-studio.png)
 
 Nuxt Studio introduces a fresh editing experience for your Nuxt Content website, providing limitless customization and a user-friendly interface. Edit your website effortlessly with our editor reminiscent of Notion, fostering seamless collaboration between developers and copywriters. It offers a rich text editor, markdown support, and a live preview, enabling you to create and edit content with ease.