🎨 great start on docs

app/app.config.ts

@@ -9,4 +9,7 @@ export default defineAppConfig({
       background: 'bg-red-100 dark:bg-red-900',
     },
   },
+  seo: {
+    siteName: 'fume.bio',
+  },
 })

app/app.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
+import type { ParsedContent } from '@nuxt/content'
+
 const colorMode = useColorMode()
 const color = computed(() => colorMode.value === 'dark' ? '#111827' : 'white')
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false,
+})
+
 useHead({
   meta: [
     { charset: 'utf-8' },
@@ -16,22 +25,29 @@ useHead({
   },
 })
 
-useSeoMeta({
-  titleTemplate: '%s - fume bio',
-  /*
-  ogImage: 'https://saas-template.nuxt.dev/social-card.png',
-  twitterImage: 'https://saas-template.nuxt.dev/social-card.png',
-  twitterCard: 'summary_large_image',
-  */
-})
+useSeoMeta({ titleTemplate: '%s - fume.bio' })
+
+provide('navigation', navigation)
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
+    <header-main />
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+    <layout-footer />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+
     <layout-confirm />
     <u-notifications>
       <template #title="{ title }">
@@ -43,3 +59,32 @@ useSeoMeta({
     </u-notifications>
   </div>
 </template>
+
+<style>
+.gradient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-500) / 0.25) 0, #FFF 100%);
+}
+
+.dark {
+  .gradient {
+    background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-400) / 0.1) 0, rgb(var(--color-gray-950)) 100%);
+  }
+}
+
+.overlay {
+  background-size: 100px 100px;
+  background-image:
+    linear-gradient(to right, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px),
+    linear-gradient(to bottom, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px);
+}
+.dark {
+  .overlay {
+    background-image:
+      linear-gradient(to right, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px),
+      linear-gradient(to bottom, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px);
+  }
+}
+</style>

app/components/OgImage/OgTitleDesc.vue

@@ -8,6 +8,7 @@ import { computed } from 'vue'
 const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
   title: 'title',
   description: 'description',
+  headline: 'fume.bio',
 })
 
 const title = computed(() => (props.title || '').slice(0, 60))
@@ -16,9 +17,9 @@ const description = computed(() => (props.description || '').slice(0, 200))
 
 <template>
   <div class="w-full h-full bg-black">
-    <div class="w-full h-full flex flex-col justify-center bg-sky-950/30">
+    <div class="w-full h-full flex flex-col justify-center bg-sky-950/50">
       <svg
-        class="absolute right-0 top-0"
+        class="absolute right-0 bottom-0"
         width="629"
         height="593"
         viewBox="0 0 629 593"

app/components/header/HeaderMain.vue

@@ -1,23 +1,49 @@
 <script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
 const { crumbs, actions } = useCrumb()
 const { loggedIn } = useUserSession()
+
+const { toggleContentSearch } = useUIState()
+
+const navigation = inject<NavItem[]>('navigation', [])
+
+const links = [
+  {
+    label: 'Home',
+    ico: 'i-heroicons-home',
+    to: '/',
+  },
+  {
+    label: 'Research',
+    ico: 'i-heroicons-academic-cap',
+    to: '/research',
+  },
+]
 </script>
 
 <template>
-  <u-header>
+  <u-header :links="links">
     <template #logo>
       <div class="flex items-center space-x-2">
         <logo-bio class="w-10 h-10" />
         <logo-text class="text-3xl" />
       </div>
     </template>
     <template #right>
+      <!--
+      <UContentSearchButton class="hidden lg:flex w-12 bg-red-500" />
+      -->
+      <u-button icon="i-mdi-magnify" variant="ghost" @click="toggleContentSearch" />
       <div class="flex items-center space-x-2">
-        <u-color-mode-button />
+        <u-color-mode-button color="primary" />
         <header-profile v-if="loggedIn" />
         <header-sign-in v-else />
       </div>
     </template>
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
   </u-header>
   <div class="bg-gray-100 dark:bg-gray-950">
     <div class="py-2 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">

app/components/pen/PenUser.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Cartridge, Pen } from '@prisma/client'
+import type { MetapiResponse } from '~/types/metapi'
+
+const { user } = useUserSession()
+const { data: pens, refresh: pensRefresh } = await useFetch<MetapiResponse<Pen[]>>(`/api/user/${user.value.id}/pen`)
+const { data: cartridges, refresh: cartridgesRefresh } = await useFetch<MetapiResponse<Cartridge[]>>(`/api/user/${user.value.id}/cartridge`)
+const reload = async () => {
+  await pensRefresh()
+  await cartridgesRefresh()
+}
+</script>
+
+<template>
+  <div v-if="pens?.data.length === 0" class="w-full max-w-md mx-auto">
+    <u-alert
+      icon="i-mdi-clock"
+      title="Awaiting Implementation"
+      description="We are still setting up your account, check back soon!"
+      :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
+    />
+  </div>
+  <pen-list
+    v-else-if="pens && cartridges"
+    :pens="pens?.data"
+    :cartridges="cartridges?.data"
+    readonly
+    @reload="reload"
+  />
+</template>
+
+<style scoped></style>

app/layouts/default.vue

@@ -1,40 +1,9 @@
 <template>
   <div>
-    <header-main />
     <u-main class="bg-gray-100 dark:bg-gray-950 overlay flex flex-col w-full">
       <div class="py-2 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full flex-1">
         <slot />
       </div>
     </u-main>
-    <layout-footer />
   </div>
 </template>
-
-<style scoped>
-.gradient {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-500) / 0.25) 0, #FFF 100%);
-}
-
-.dark {
-  .gradient {
-    background: radial-gradient(50% 50% at 50% 50%, rgb(var(--color-primary-400) / 0.1) 0, rgb(var(--color-gray-950)) 100%);
-  }
-}
-
-.overlay {
-  background-size: 100px 100px;
-  background-image:
-    linear-gradient(to right, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px),
-    linear-gradient(to bottom, rgb(var(--color-gray-200)) 0.5px, transparent 0.5px);
-}
-.dark {
-  .overlay {
-    background-image:
-      linear-gradient(to right, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px),
-      linear-gradient(to bottom, rgb(var(--color-gray-900)) 0.5px, transparent 0.5px);
-  }
-}
-</style>

app/layouts/docs.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>
+
+<template>
+  <u-main class="bg-gray-100 dark:bg-gray-950 overlay flex flex-col w-full">
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UAside>
+            <UNavigationTree :links="mapContentNavigation(navigation[0].children)" />
+          </UAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </u-main>
+</template>

app/pages/index.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+const { data: page } = await useAsyncData('index', () => queryContent('_pages').findOne())
 
 if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 
+const { loggedIn } = useUserSession()
+
 useSeoMeta({
   titleTemplate: '',
   title: page.value.title,
   ogTitle: page.value.title,
   description: page.value.description,
   ogDescription: page.value.description,
 })
+
 defineOgImageComponent('OgLogo')
 </script>
 
 <template>
-  <div class="w-full h-full flex-1 flex items-center justify-center">
-    <u-icon
-      name="i-mdi-construction"
-      class="w-24 h-24"
-    />
+  <div>
+    <div v-if="loggedIn">
+      <pen-user />
+    </div>
   </div>
 </template>
 

app/pages/privacy.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data: page } = await useAsyncData('privacy', () => queryContent('/privacy').findOne())
+const { data: page } = await useAsyncData('privacy', () => queryContent('_pages/privacy').findOne())
 if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 
@@ -11,7 +11,10 @@ useSeoMeta({
   ogDescription: page.value.description,
 })
 
-console.log(page)
+defineOgImageComponent('OgTitleDesc', {
+  title: page.value.title,
+  description: page.value.description,
+})
 </script>
 
 <template>