Artciles and Uses page

2026-01-14 12:14:42 +01:00 · 2023-08-12 22:58:00 +02:00
parent b90829a543
commit d97278c344
16 changed files with 267 additions and 113 deletions
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -26,10 +26,8 @@ export default defineNuxtConfig({
  },

  components: [
-    {
-      path: '~/components',
-      pathPrefix: false,
-    },
+    'components/',
+    'components/header',
  ],

  tailwindcss: {
--- 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>
--- 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>
--- a/src/components/content/UsesSection.vue
+++ 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>
--- a/src/components/content/UsesSlot.vue
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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
+  :::
+
+::
--- 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>
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -7,7 +7,3 @@
    ABOUT
  </div>
 </template>
-
-<style>
-
-</style>
--- 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>
--- 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>
--- 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">
--- a/src/server/trpc/routers/post.ts
+++ b/src/server/trpc/routers/post.ts
@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return 'Hello post'
+})