improvement

app/components/CopyLink.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
-const runtimeConfig = useRuntimeConfig()
-const { siteUrl } = runtimeConfig.public
+const route = useRoute()
 
 function copyArticleLinkToClipboard() {
-  const input = document.createElement('input')
-  input.setAttribute('value', siteUrl + useRoute().path)
-  document.body.appendChild(input)
-  input.select()
-  document.execCommand('copy')
-  document.body.removeChild(input)
-  toast.success('Article link copied to clipboard !')
+  useClipboard({
+    toCopy: `${window.location.origin}${route.path}`,
+    callback: () => toast.success('Article link copied to clipboard !')
+  })
 }
 </script>
 
@@ -23,7 +19,3 @@ function copyArticleLinkToClipboard() {
     </span>
   </div>
 </template>
-
-<style scoped>
-
-</style>

app/components/Toc.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content'
+
+const { title = 'Table of Contents', links = [] } = defineProps<{
+  title?: string
+  links: TocLink[]
+}>()
+</script>
+
+<template>
+  <nav class="overflow-y-auto">
+    <div>
+      <button v-if="links?.length" tabindex="-1" class="group flex w-full items-center gap-1.5 lg:cursor-text lg:select-text">
+        <span class="truncate text-sm/6 font-newsreader italic font-light font-semibold">{{ title }}</span>
+      </button>
+      <TocLinks :links />
+    </div>
+  </nav>
+</template>

app/components/TocLinks.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content'
+import { useScrollspy, useNuxtApp, useRouter } from '#imports'
+
+const { activeHeadings, updateHeadings } = useScrollspy()
+
+type ContentTocProps = {
+  title?: string
+  links: TocLink[]
+  active?: string
+}
+
+
+const { title = 'Table of Contents', links = [] } = defineProps<ContentTocProps>()
+
+const nuxtApp = useNuxtApp()
+const router = useRouter()
+
+nuxtApp.hooks.hookOnce('page:finish', () => {
+  updateHeadings([
+    ...document.querySelectorAll('h2'),
+    ...document.querySelectorAll('h3')
+  ])
+})
+
+const emit = defineEmits(['move'])
+
+const scrollToHeading = (id: string): void => {
+  const encodedId = encodeURIComponent(id)
+  router.push(`#${encodedId}`)
+  emit('move', id)
+}
+</script>
+
+<template>
+  <ul v-if="links?.length">
+    <li v-for="link in links" :key="link.text" :class="link.depth === 3 ? 'ml-3' : ''">
+      <a
+        class="block truncate text-xs/6"
+        :class="activeHeadings.includes(link.id) ? 'text-accent' : 'text-tertiary hover:text-gray-700 dark:hover:text-gray-200'"
+        :href="`#${link.id}`"
+        @click.prevent="scrollToHeading(link.id)"
+      >
+        {{ link.text }}
+      </a>
+
+      <TocLinks v-if="link.children" :links="link.children" />
+    </li>
+  </ul>
+</template>

app/components/content/About.vue

@@ -12,6 +12,4 @@
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/components/content/ContactForm.vue

@@ -82,6 +82,4 @@ onMounted(() => {
   </form>
 </template>
 
-<style scoped>
 
-</style>

app/components/content/SectionItem.vue

@@ -40,6 +40,4 @@ defineProps({
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/components/content/Socials.vue

@@ -17,6 +17,4 @@ const { socials } = useAppConfig()
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/components/content/Works.vue

@@ -41,6 +41,4 @@ const { data: works } = await useAsyncData('works', () =>
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/components/content/Writings.vue

@@ -88,6 +88,4 @@ if (!data.value || !error.value) createError({ statusCode: 404 })
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/components/layout/LetterCard.vue

@@ -7,6 +7,4 @@
   </div>
 </template>
 
-<style scoped>
 
-</style>

app/layouts/default.vue

@@ -22,7 +22,9 @@ const route = useRoute()
       close-button
       :toast-options="{
         style: {
-          backgroundColor: 'var(--color-primary)'
+          backgroundColor: 'var(--color-primary)',
+          borderColor: 'var(--color-main)',
+          color: 'var(--color-font-primary)',
         }
       }"
     />

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

@@ -10,15 +10,16 @@ const route = useRoute()
 
 const { data: page } = await useAsyncData(`${route.path}`, () => queryContent(route.path).findOne())
 
-if (!page.value) {
+if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found' })
-}
 
 useContentHead(page.value)
 
 const { link } = useAppConfig()
 const { name } = useSiteConfig()
 
+const isWriting = computed(() => route.path.includes('/writing/'))
+
 useSeoMeta({
   ogSiteName: 'Hugo Richard',
   author: 'Hugo Richard',
@@ -34,7 +35,7 @@ useHead({
   titleTemplate(title) {
     if (route.path === '/')
       return title || name
-    if (route.path.includes('/writing/'))
+    if (isWriting.value)
       return title
     return `${title} | ${name}`
   },
@@ -47,8 +48,13 @@ const contentClass = 'content mb-4 mt-8 flex flex-1 flex-col justify-around gap-
 
 <template>
   <Html lang="en">
-    <MApp class="bg-transparent">
-      <ContentRenderer v-if="page?.body" :value="page" :class="route.path.includes('/writing/') ? writingClass : contentClass" />
+    <MApp class="relative bg-transparent">
+      <div v-if="isWriting" class="max-sm:hidden fixed z-50 scale-50 hover:scale-100 transition-transform duration-200 ease-in-out right-4 top-1/2 -translate-y-1/2 origin-right">
+        <div class="bg-primary p-4 shadow-md w-fit rounded-md mx-auto border border-secondary/20">
+          <Toc :links="page?.body?.toc?.links!" />
+        </div>
+      </div>
+      <ContentRenderer v-if="page?.body" :value="page" :class="isWriting ? writingClass : contentClass" />
     </MApp>
   </Html>
 </template>

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

@@ -128,5 +128,5 @@ Get Started with Shelve on GitHub
 ::
 
 ::prose-a{href="https://dub.sh/shelve" target="_blank"}
-Try Shelve Live Demo
+Try Shelve
 ::

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

@@ -58,9 +58,7 @@ const props = defineProps({
   </div>
 </template>
 
-<style scoped>
 
-</style>
 ```
 
 ## API Handler Template: `!api`

nuxt.config.ts

@@ -36,10 +36,6 @@ export default defineNuxtConfig({
     '@nuxt/scripts',
   ],
 
-  mockline: {
-    content: true
-  },
-
   runtimeConfig: {
     public: {
       siteUrl: '',
@@ -62,6 +58,13 @@ export default defineNuxtConfig({
     markdown: {
       anchorLinks: false,
     },
+    highlight: {
+      theme: {
+        default: 'github-light',
+        dark: 'github-dark',
+        light: 'github-light',
+      }
+    },
     sources: {
       github: {
         prefix: '/notes',