🎨 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

@@ -2,6 +2,8 @@
 const colorMode = useColorMode()
 const color = computed(() => colorMode.value === 'dark' ? '#111827' : 'white')
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
 useHead({
   meta: [
     { charset: 'utf-8' },
@@ -16,22 +18,21 @@ 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 />
     <layout-confirm />
     <u-notifications>
       <template #title="{ title }">
@@ -43,3 +44,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/header/HeaderMain.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 const { crumbs, actions } = useCrumb()
 const { loggedIn } = useUserSession()
+
+const links = [
+  {
+    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" />

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,19 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <template #left>
+        <UAside>
+          <UNavigationTree :links="mapContentNavigation(navigation[0].children)" />
+        </UAside>
+      </template>
+
+      <slot />
+    </UPage>
+  </UContainer>
+</template>

app/pages/home.vue

@@ -4,7 +4,7 @@ import type { MetapiResponse } from '~/types/metapi'
 
 useCrumb().clear()
 
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+const { data: page } = await useAsyncData('index', () => queryContent('.page/').findOne())
 
 if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })

app/pages/index.vue

@@ -1,5 +1,5 @@
 <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 })

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>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { withoutTrailingSlash } from 'ufo'
+
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+const { toc, seo } = useAppConfig()
+
+const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+
+if (!page.value)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent()
+  .where({ _extension: 'md', navigation: { $ne: false } })
+  .only(['title', 'description', '_path'])
+  .findSurround(withoutTrailingSlash(route.path)))
+
+useSeoMeta({
+  title: page.value.title,
+  ogTitle: `${page.value.title} - ${seo?.siteName}`,
+  description: page.value.description,
+  ogDescription: page.value.description,
+})
+
+defineOgImage({
+  component: 'OgTitleDesc',
+  title: page.value.title,
+  description: page.value.description,
+})
+
+const headline = computed(() => findPageHeadline(page.value))
+
+const links = computed(() => [toc?.bottom?.edit && {
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page',
+  to: `${toc.bottom.edit}/${page?.value?._file}`,
+  target: '_blank',
+}, ...(toc?.bottom?.links || [])].filter(Boolean))
+</script>
+
+<template>
+  <UPage>
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :headline="headline"
+    />
+
+    <UPageBody prose>
+      <ContentRenderer
+        v-if="page.body"
+        :value="page"
+      />
+
+      <hr v-if="surround?.length">
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page.toc !== false"
+      #right
+    >
+      <UContentToc
+        title="Table of Contents"
+        :links="page.body?.toc?.links"
+      />
+    </template>
+  </UPage>
+</template>

app/pages/terms.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data: page } = await useAsyncData('terms', () => queryContent('/terms').findOne())
+const { data: page } = await useAsyncData('terms', () => queryContent('_pages/terms').findOne())
 if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 

content/1.research/1.peptides/2.tirzepatide.md

@@ -0,0 +1,8 @@
+---
+title: Tirzepatide
+description: Tirzepatide is a once-weekly, long-acting glucagon-like peptide-1 receptor agonist (GLP-1 RA) and glucose-dependent insulinotropic polypeptide (GIP) receptor agonist (GIPRA) in development for the treatment of type 2 diabetes.
+---
+
+## title 1
+
+## title 2

content/1.research/1.peptides/3.cagrilintide.md

@@ -0,0 +1,7 @@
+---
+title: Cagrilintide
+description: 1000 Units/ml Injection, Solution
+---
+
+## title 1
+## title 2

content/1.research/1.peptides/4.retatrutide.md

@@ -0,0 +1,8 @@
+---
+title: Retatrutide
+description: 100% natural, safe and effective weight loss supplement.
+---
+
+## title 1
+
+## title 2

content/1.research/1.peptides/_index.md

@@ -0,0 +1,14 @@
+---
+title: Peptides
+description: Learn about peptides, their structure, and their role in the body.
+---
+
+::card-group
+  ::card
+  ---
+  title: Tirzepatide
+  to: /peptides/tirzepatide
+  ---
+  Explore the benefits of Tirzepatide
+  ::
+::

content/1.research/_dir.yml

@@ -0,0 +1 @@
+title: Research

content/1.research/index.md

@@ -0,0 +1,17 @@
+---
+title: Research
+description: fume.bio research documentation
+navigation: false
+---
+
+::card-group
+  ::card
+  ---
+  title: Tirzepatide
+  to: /peptides/tirzepatide
+  ---
+  Explore the benefits of Tirzepatide
+  ::
+::
+
+## title 2