From d97278c34438fe6ea30e5b77266c6248b984f217 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sat, 12 Aug 2023 22:58:00 +0200
Subject: [PATCH] Artciles and Uses page

---
 nuxt.config.ts                         |   6 +-
 src/components/Footer.vue              |   6 +-
 src/components/MainBanner.vue          |   6 +-
 src/components/content/UsesSection.vue |  29 ++++++
 src/components/content/UsesSlot.vue    |  19 ++++
 src/components/header/Header.vue       |  24 ++---
 src/components/header/Logo.vue         |   6 +-
 src/components/header/MobileNavBar.vue |   4 -
 src/components/header/NavBar.vue       |   3 +-
 src/content/uses.md                    | 118 +++++++++++++-----------
 src/layouts/default.vue                |  10 +-
 src/pages/about.vue                    |   4 -
 src/pages/uses.vue                     |  19 ++--
 src/pages/writing/[slug].vue           | 121 +++++++++++++++++++++++--
 src/pages/writing/index.vue            |   2 +-
 src/server/trpc/routers/post.ts        |   3 +
 16 files changed, 267 insertions(+), 113 deletions(-)
 create mode 100644 src/components/content/UsesSection.vue
 create mode 100644 src/components/content/UsesSlot.vue
 create mode 100644 src/server/trpc/routers/post.ts

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5cb369c..6ebae66 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -26,10 +26,8 @@ export default defineNuxtConfig({
   },
 
   components: [
-    {
-      path: '~/components',
-      pathPrefix: false,
-    },
+    'components/',
+    'components/header',
   ],
 
   tailwindcss: {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index ecb9368..d7065a3 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -3,7 +3,7 @@ const year = computed(() => new Date().getFullYear())
 </script>
 
 <template>
-  <footer class="w-container flex justify-between py-6 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
+  <footer class="w-container flex justify-between py-4 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
     <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
       <p class="text-subtitle text-sm">
         © {{ year }} ArtDanjProduction
@@ -21,7 +21,3 @@ const year = computed(() => new Date().getFullYear())
     </div>
   </footer>
 </template>
-
-<style>
-
-</style>
diff --git a/src/components/MainBanner.vue b/src/components/MainBanner.vue
index 775f472..3d8735b 100644
--- a/src/components/MainBanner.vue
+++ b/src/components/MainBanner.vue
@@ -24,7 +24,7 @@ const socials = [
 </script>
 
 <template>
-  <div class="w-container lg:my-32">
+  <div class="w-container lg:my-32 mt-16">
     <div class="max-w-2xl space-y-8">
       <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
         Software engineer and mathematics lover
@@ -47,7 +47,3 @@ const socials = [
     </div>
   </div>
 </template>
-
-<style>
-
-</style>
diff --git a/src/components/content/UsesSection.vue b/src/components/content/UsesSection.vue
new file mode 100644
index 0000000..74b0aac
--- /dev/null
+++ b/src/components/content/UsesSection.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Section title',
+  },
+})
+
+const appConfig = useAppConfig()
+
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+</script>
+
+<template>
+  <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-16">
+    <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
+      <h2 class="text-sm font-semibold" :class="getColor()">
+        {{ title }}
+      </h2>
+      <div class="md:col-span-3">
+        <ul class="space-y-16">
+          <slot />
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/content/UsesSlot.vue b/src/components/content/UsesSlot.vue
new file mode 100644
index 0000000..d6c6113
--- /dev/null
+++ b/src/components/content/UsesSlot.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Slot title',
+  },
+})
+</script>
+
+<template>
+  <li class="group relative flex flex-col items-start">
+    <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      {{ title }}
+    </h3>
+    <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      <slot />
+    </p>
+  </li>
+</template>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 117571b..c9d3677 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,15 +1,17 @@
 <template>
-  <header class="w-container z-30 flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-    <Logo />
-    <NavBar />
-    <div class="flex gap-2">
-      <ClientOnly>
-        <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-          <ColorPicker />
-          <ColorModeButton />
-        </div>
-        <MobileNavBar />
-      </ClientOnly>
+  <header class="z-30 sticky top-0 left-0 w-container bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4 flex justify-between">
+      <Logo />
+      <NavBar />
+      <div class="flex gap-2">
+        <ClientOnly>
+          <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
+            <ColorPicker />
+            <ColorModeButton />
+          </div>
+          <MobileNavBar />
+        </ClientOnly>
+      </div>
     </div>
   </header>
 </template>
diff --git a/src/components/header/Logo.vue b/src/components/header/Logo.vue
index 61b254e..f3272ea 100644
--- a/src/components/header/Logo.vue
+++ b/src/components/header/Logo.vue
@@ -3,11 +3,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="flex items-center">
     LOGO
   </div>
 </template>
-
-<style>
-
-</style>
diff --git a/src/components/header/MobileNavBar.vue b/src/components/header/MobileNavBar.vue
index 4311495..1b28010 100644
--- a/src/components/header/MobileNavBar.vue
+++ b/src/components/header/MobileNavBar.vue
@@ -105,7 +105,3 @@ function isRoute(path: string) {
     </USlideover>
   </div>
 </template>
-
-<style>
-
-</style>
diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue
index 03153ba..4cd4683 100644
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const route = useRoute()
 const items = [
   [{
     label: 'Talents',
@@ -27,7 +28,7 @@ const items = [
       <UButton to="/about" size="sm" variant="ghost" color="white">
         About
       </UButton>
-      <UButton to="/writing" size="sm" variant="ghost" color="white">
+      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
         Articles
       </UButton>
       <UButton to="/work" size="sm" variant="ghost" color="white">
diff --git a/src/content/uses.md b/src/content/uses.md
index 5baae21..59405ce 100644
--- a/src/content/uses.md
+++ b/src/content/uses.md
@@ -1,63 +1,79 @@
----
-title: 'My Uses — Arthur Danjou'
-description: 'This is my uses page'
----
+::uses-section{title="Computers"}
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique erat semper mi dictum, in ornare tellus dapibus. Vestibulum accumsan arcu diam, et tincidunt nisl dignissim id. Sed nec ullamcorper sem, sed consequat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae velit nec mauris venenatis dapibus. Cras eget nulla sit amet enim condimentum pellentesque vitae et lacus. Nullam hendrerit feugiat porttitor. Praesent cursus nunc porttitor auctor ultrices.
+  :::uses-slot{title="MacBook Pro 13'"}
+    I use this for code
+  :::
 
-## Computers
+  :::uses-slot{title="Specs..."}
+    I use this for valorant
+  :::
 
-I mainly use a [MacBook Pro 13"](https://www.apple.com/macbook-pro-13/) for conding and I also use a custom computer for gaming and Windows with the following configuration:
+::
 
-| Name | Detail |
-| :----- | -----: |
-| OS | Windows 11 Pro 64-bit |
-| Processor | Intel Core i5-10400F |
-| RAM | 16Go DDR4 |
-| GPU | RTX 2060 |
+::uses-section{title="Peripherals"}
 
-## Peripherals
+  :::uses-slot{title="MacBook Pro 13'"}
+    I use this for code
+  :::
 
-| Name | Detail |
-| :----- | -----: |
-| Phone | [Iphone XR](https://www.apple.com/iphone-xr/) |
-| Tablet | [Ipad Air](https://www.apple.com/ipad-air/) |
-| Wireless Headphone | [Airpods 3rd Gen](https://www.apple.com/airpods/) |
-| Desktop Headphone | [Beats Studio 3](https://www.beatsbydre.com/headphones/studio3-wireless) |
-| Microphone | xxx |
+  :::uses-slot{title="My gaming computer"}
+    Windows 11, Intel Core i5-10400F, 16Go DDR4, RTX 2060
+  :::
 
-## Editors
+  :::uses-slot{title="Phone, Sound & Other"}
+    Iphone 14 Pro, Ipad Air, AirPods Pro, Beats Studio 3
+  :::
 
-| Name | Detail |
-| :----- | -----: |
-| Coding | [Visual Studio Code](https://code.visualstudio.com/) |
-| Font | [JetBrains Mono](https://www.jetbrains.com/lp/mono/) |
-| Settings | [Warp](https://www.warp.dev/) |
-| Extensions | [Beats Studio 3](https://www.beatsbydre.com/headphones/studio3-wireless) |
+::
 
-## Software and Applications
+::uses-section{title="Editors"}
 
-| Name | Detail |
-| :----- | -----: |
-| Terminal | [Warp](https://www.warp.dev/) |
-| Mail Client | [Apple Mail](https://www.apple.com/macos/mail/) |
-| Calendar | [Apple Calendar](https://www.apple.com/macos/calendar/) |
-| Reminders | [Apple Reminders](https://www.apple.com/macos/reminders/) |
-| Notes | [Notion](https://notion.so/) |
-| Main Browser | [Google Chrome](https://www.google.com/chrome/) |
-| Second Brower | [Arc](https://arc.net/) |
-| Chat Client | [Discord](https://discordapp.com/) |
-| Music Player | [Spotify](https://www.spotify.com/) |
-| Launcher | [RayCast](https://raycast.com/) | 
+  :::uses-slot{title="Visual Studio Code"}
+    I use this for code
+  :::
 
-## Favorite Stack
+  :::uses-slot{title="JetBrains Mono"}
+    I use this for valorant
+  :::
 
-| Name | Detail |
-| :----- | -----: |
-| Main language for Front & Back | [Typescript](https://www.typescriptlang.org/) |
-| Frontend Framework | [Vue 3](https://vuejs.org/) with [Nuxt 3](https://v3.nuxtjs.org/)|
-| CSS Framework | [TailwindCss](https://tailwindcss.com/) |
-| Main ORM | [Prisma](https://www.prisma.io/) |
-| Backend Framework | [AdonisJS](https://adonisjs.com/) |
-| Auth Manager | [Supabase](https://supabase.io/) |
-| End-to-end typesafe APIs | [TRPC.io](https://trpc.io/) |
+::
+
+::uses-section{title="Software and Applications"}
+
+  :::uses-slot{title="Warp"}
+    I use this for code
+  :::
+
+  :::uses-slot{title="Apple Apps"}
+    Music, mail, reminders, calendar
+  :::
+
+  :::uses-slot{title="Notion"}
+    I use this for valorant
+  :::
+  
+  :::uses-slot{title="Google Chrome & Arc"}
+    I use this for valorant
+  :::
+
+  :::uses-slot{title="Discord"}
+    I use this for valorant
+  :::
+
+  :::uses-slot{title="RayCast"}
+    I use this for valorant
+  :::
+
+::
+
+::uses-section{title="Favorite Stack"}
+
+  :::uses-slot{title="FrontEnd"}
+    TS, Vue 3 with Nuxt 3, TailwindCss, Nuxt UI
+  :::
+
+  :::uses-slot{title="BackEnd"}
+    Prisma, AdonisJs, Supabase, TRPC.io
+  :::
+
+::
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index ffbeb79..5677fdd 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,17 +1,17 @@
 <template>
   <CommandPalette />
   <section class="fixed inset-0 flex justify-center sm:px-8">
-    <div class="flex w-full max-w-7xl lg:px-8">
+    <div class="flex w-full max-w-7xl">
       <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
     </div>
   </section>
-  <UContainer class="relative z-50">
+  <div class="relative z-50">
     <Header />
-    <main class="min-h-screen">
+    <UContainer>
       <NuxtPage />
-    </main>
+    </UContainer>
     <Footer />
-  </UContainer>
+  </div>
 
   <UNotifications />
 </template>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 5cc2afb..348b707 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -7,7 +7,3 @@
     ABOUT
   </div>
 </template>
-
-<style>
-
-</style>
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
index 48b4ee2..6da57ce 100644
--- a/src/pages/uses.vue
+++ b/src/pages/uses.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 useHead({
-  title: 'My uses — Arthur Danjou',
+  title: 'My Uses — Arthur Danjou',
 })
 </script>
 
 <template>
-  <div class="w-container lg:my-32 my-16">
-    <div class="max-w-3xl space-y-8">
+  <div class="w-container lg:my-24 my-16">
+    <div class="max-w-2xl space-y-8">
+      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+        Software I use, Hardware I own, and my favorite stack
+      </h1>
+      <p class="leading-relaxed text-subtitle">
+        I get often asked what I use to create software, to play games or to work and learn. Here's a big list of all my favourite things.
+      </p>
       <ContentDoc
-        class="my-16 prose leading-6 prose-table:w-full md:prose-table:w-4/5 lg:prose-table:w-3/5 max-w-none
-             dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
+        class="my-16"
         path="/uses"
       />
     </div>
   </div>
 </template>
-
-<style>
-
-</style>
diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue
index 8238f21..05f4f26 100644
--- a/src/pages/writing/[slug].vue
+++ b/src/pages/writing/[slug].vue
@@ -2,15 +2,120 @@
 import type { Post } from '../../../types'
 
 const route = useRoute()
-const { data: postContent } = await useAsyncData<Post>(`blog:post-content:${route.params.id}`, async () => await queryContent<Post>(`/posts/${route.params.id}`).findOne())
+const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne())
+
+useHead({
+  title: `${postContent.value?.title} — Arthur Danjou's shelf`,
+})
+
+function top() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: 'smooth',
+  })
+}
+
+const { copy, copied } = useClipboard({
+  source: `https://arthurdanjou.fr/writing/${route.params.slug}`,
+  copiedDuring: 4000,
+})
+
+const router = useRouter()
 </script>
 
 <template>
-  <div>
-    {{ postContent }}
-  </div>
+  <section v-if="postContent">
+    <div class="w-container lg:mt-24 mt-16">
+      <div class="lg:relative">
+        <div class="max-w-3xl space-y-8 mx-auto">
+          <div class="mx-auto max-w-2xl">
+            <UButton
+              icon="i-ph-arrow-circle-left-bold"
+              variant="soft"
+              size="lg"
+              :ui="{ rounded: 'rounded-full' }"
+              class="lg:absolute left-0 mb-8"
+              @click.prevent="router.back()"
+            />
+            <article>
+              <header class="flex flex-col space-y-6">
+                <time class="flex items-center text-base text-zinc-400 dark:text-zinc-500">
+                  <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+                  <div class="ml-3 flex gap-3">
+                    <div>
+                      {{ postContent.publishedAt }}
+                    </div>
+                    <span>•</span>
+                    <div>{{ postContent.readingMins }} min</div>
+                    <span>•</span>
+                    <div>x views</div>
+                  </div>
+                </time>
+                <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+                  {{ postContent.title }}
+                </h1>
+                <p class="text-subtitle">
+                  {{ postContent.description }}
+                </p>
+              </header>
+              <div class="w-full rounded-md my-8">
+                {{ postContent.cover }}
+              </div>
+              <ContentRenderer
+                class="mt-12 prose leading-6 prose-table:w-full md:prose-table:w-3/4 lg:prose-table:w-2/5 max-w-none
+                 dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
+                :value="postContent || undefined"
+              />
+              <footer class="my-8 space-y-4">
+                <p class="text-subtitle">
+                  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 flex-wrap">
+                  <UButton
+                    label="x"
+                    icon="i-ph-heart-bold"
+                    size="lg"
+                    variant="soft"
+                    @click.prevent=""
+                  />
+                  <UButton
+                    label="Go to top"
+                    icon="i-ph-arrow-up-bold"
+                    size="lg"
+                    variant="soft"
+                    @click.prevent="top()"
+                  />
+                  <UButton
+                    label="Share on Twitter"
+                    icon="i-ph-twitter-logo-bold"
+                    size="lg"
+                    variant="soft"
+                    @click.prevent="copy()"
+                  />
+                  <UButton
+                    v-if="copied"
+                    label="Link copied"
+                    icon="i-lucide-clipboard-check"
+                    color="green"
+                    size="lg"
+                    variant="soft"
+                    @click.prevent="copy()"
+                  />
+                  <UButton
+                    v-else
+                    label="Copy link"
+                    icon="i-lucide-clipboard"
+                    size="lg"
+                    variant="soft"
+                    @click.prevent="copy()"
+                  />
+                </div>
+              </footer>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
-
-<style>
-
-</style>
diff --git a/src/pages/writing/index.vue b/src/pages/writing/index.vue
index 98d2a84..164cdfc 100644
--- a/src/pages/writing/index.vue
+++ b/src/pages/writing/index.vue
@@ -13,7 +13,7 @@ const { data: posts } = await usePosts()
 </script>
 
 <template>
-  <div class="w-container lg:my-32 my-16">
+  <div class="w-container lg:my-24 my-16">
     <div class="max-w-3xl space-y-8">
       <div>
         <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
diff --git a/src/server/trpc/routers/post.ts b/src/server/trpc/routers/post.ts
new file mode 100644
index 0000000..eb0bb1e
--- /dev/null
+++ b/src/server/trpc/routers/post.ts
@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return 'Hello post'
+})