Change writing to portfolio

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
+Add a new `.md` file in `/content/portfolio/` and follow the same pattern as the other articles. Add images in `/public/portflio/`.
-in `/public/writings/`.
 
 ### Uses
 

app/components/AppHeader.vue

@@ -25,10 +25,10 @@ const navs = [
   },
   {
     label: {
-      en: 'writings',
+      en: 'portfolio',
       fr: 'écrits',
     },
-    to: '/writings',
+    to: '/portfolio',
     icon: 'books-duotone',
   },
   {

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>

app/pages/portfolio/index.vue

@@ -7,8 +7,8 @@ useSeoMeta({
   description: t('description'),
 })
 
-const { data: writings } = await useAsyncData('all-writings', () =>
+const { data: writings } = await useAsyncData('all-portfolio', () =>
-  queryContent('/writings').sort({ published: -1 }).without('body').find())
+  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
+              <div
-                class="text-sm text-neutral-500 duration-300"
+                class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
               >
-                {{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} · {{ writing.readingTime }}min long
+                <UIcon name="ph:calendar-duotone" size="16" />
-              </p>
+                <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 }}

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.