all contents using md

app/app.config.ts

@@ -50,10 +50,10 @@ export default defineAppConfig({
   mockline: {
     darkCode: false,
     components: {
-      proseH1: 'text-2xl sm:text-3xl text-font-primary font-newsreader italic font-[600]',
-      proseH2: 'text-xl sm:text-2xl text-font-primary font-[550]',
-      proseH3: 'text-lg sm:text-xl text-font-primary font-[500]',
-      proseH4: 'text-base sm:text-lg text-font-primary font-[400]',
+      proseH1: 'text-2xl sm:text-3xl text-font-primary font-newsreader italic font-[500]',
+      proseH2: 'text-xl sm:text-2xl text-font-primary font-[450]',
+      proseH3: 'text-lg sm:text-xl text-font-primary font-[400]',
+      proseH4: 'text-base sm:text-lg text-font-primary font-[350]',
       proseP: 'text-secondary/70 mt-0',
       proseLi: 'text-secondary/70',
     }

app/components/content/Notes.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const password = ref('')
+const loading = ref(false)
+const isAuthorized = useState<boolean>('authorized', () => false)
+
+const { data: notes, error, execute } = await useAsyncData('notes', () =>
+  queryCollection('content')
+    .where('path', 'LIKE', '%/notes/%')
+    .order('date', 'DESC').all(), {
+  immediate: isAuthorized.value
+})
+if (!notes.value || !error.value) createError({ statusCode: 404 })
+
+const { data, refresh } = useFetch('/api/verify', {
+  method: 'POST',
+  body: {
+    password
+  },
+  watch: false,
+  immediate: false
+})
+
+async function verifyPassword() {
+  loading.value = true
+  try {
+    await refresh()
+
+    if (data.value?.status === 200) {
+      await execute()
+      isAuthorized.value = true
+      toast.success('Welcome to my hidden notes!')
+    } else {
+      toast.error('Invalid password')
+      password.value = ''
+    }
+  } catch (error) {
+    toast.error('Invalid password')
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-8">
+    <span v-if="!isAuthorized" class="font-newsreader text-lg font-light italic">
+      You've stumbled upon my private notes section. If you know me, you might figure out the password.
+      If not, well... these thoughts are probably not meant for you anyway. But hey, feel free to try.
+    </span>
+    <form v-if="!isAuthorized" class="flex gap-4" @submit.prevent="verifyPassword">
+      <input v-model="password" type="password" placeholder="Password" class="input">
+      <MButton class="flex items-center cursor-pointer justify-center gap-2 bg-accent hover:bg-accent/90 px-2 text-white" type="submit" rounded="none" label="Verify" :loading />
+    </form>
+    <div v-if="isAuthorized" class="mt-6 flex flex-col gap-8">
+      <NuxtLink
+        v-for="(post, index) in notes"
+        :key="post.title"
+        :to="post.path"
+        class="group relative max-w-prose"
+        data-animate
+        :aria-label="`Read ${post.title}`"
+        :style="{ '--stagger': index }"
+      >
+        <div class="font-newsreader text-lg italic opacity-75">
+          {{ post.date }}
+        </div>
+        <h3 class="text-2xl font-newsreader font-medium italic decoration-accent group-hover:underline">
+          {{ post.title }}
+        </h3>
+        <p
+          class="!text-sm"
+        >
+          {{ post.description }}
+        </p>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

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

@@ -41,8 +41,6 @@ const props = defineProps({
     <h1>{{ item }}</h1>
   </div>
 </template>
-
-
 ```
 
 ## API Handler Template: `!api`

content/notes.md

@@ -0,0 +1,9 @@
+---
+title: Notes
+description: Some thoughts are meant to be discovered, not shown..
+---
+
+::section-item{:number='1' title="Notes"}
+:::notes
+:::
+::

content/writing.md

@@ -4,6 +4,6 @@ description: Some writings about all the things I've learned in my coding journe
 ---
 
 ::section-item{:number='1' size="w-full" title="Writing"}
-:::writing
-:::
+  :::writing
+  :::
 ::