docs: restructure docs with sub-navigation and improved content

apps/docs/app/app.config.ts

@@ -1,4 +1,7 @@
 export default defineAppConfig({
+  navigation: {
+    sub: 'header',
+  },
   github: {
     rootDir: 'apps/docs',
   },

apps/docs/app/components/app/AppHeader.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { useSubNavigation } from '#imports'
+
 const appConfig = useAppConfig()
 const site = useSiteConfig()
 const route = useRoute()
 const { isEnabled: isAssistantEnabled } = useAssistant()
+const { subNavigationMode } = useSubNavigation()
 
 const isHome = computed(() => route.path === '/')
 const links = computed(() => appConfig.github?.url
@@ -25,6 +28,7 @@ const headerUi = computed(() => isHome.value
   <Blur v-if="isHome" position="both" class="z-10" />
   <UHeader
     :ui="headerUi"
+    :class="{ 'flex flex-col': subNavigationMode === 'header' }"
     to="/"
     :title="appConfig.header?.title || site.name"
   >
@@ -63,5 +67,12 @@ const headerUi = computed(() => isHome.value
     <template #body>
       <AppHeaderBody />
     </template>
+
+    <template
+      v-if="subNavigationMode === 'header'"
+      #bottom
+    >
+      <AppHeaderBottom />
+    </template>
   </UHeader>
 </template>

apps/docs/app/components/app/AppHeaderCenter.vue

@@ -34,26 +34,38 @@ const landingItems = [
     ]
   },
   {
-    label: 'Core Concepts',
-    to: '/core-concepts/wide-events',
+    label: 'Logging',
+    to: '/logging/overview',
     children: [
+      {
+        label: 'Simple Logging',
+        icon: 'i-lucide-terminal',
+        description: 'Fire-and-forget structured logs',
+        to: '/logging/simple-logging'
+      },
       {
         label: 'Wide Events',
         icon: 'i-lucide-rows-3',
-        description: 'One log per request, full context',
-        to: '/core-concepts/wide-events'
+        description: 'Accumulate context, emit once',
+        to: '/logging/wide-events'
       },
       {
         label: 'Structured Errors',
         icon: 'i-lucide-shield-alert',
         description: 'Errors that explain why and how to fix',
-        to: '/core-concepts/structured-errors'
+        to: '/logging/structured-errors'
       },
       {
-        label: 'Typed Fields',
-        icon: 'i-lucide-braces',
-        description: 'Type-safe log fields',
-        to: '/core-concepts/typed-fields'
+        label: 'Client Logging',
+        icon: 'i-lucide-monitor',
+        description: 'Browser-side logging and transport',
+        to: '/logging/client-logging'
+      },
+      {
+        label: 'AI SDK',
+        icon: 'i-simple-icons-vercel',
+        description: 'AI observability with token tracking',
+        to: '/logging/ai-sdk'
       }
     ]
   },
@@ -106,24 +118,6 @@ const landingItems = [
   }
 ]
 
-const docsItems = [
-  {
-    label: 'Getting Started',
-    to: '/getting-started/introduction',
-  },
-  {
-    label: 'Core Concepts',
-    to: '/core-concepts/wide-events',
-  },
-  {
-    label: 'Adapters',
-    to: '/adapters/overview',
-  },
-  {
-    label: 'Enrichers',
-    to: '/enrichers/overview',
-  }
-]
 </script>
 
 <template>
@@ -139,11 +133,11 @@ const docsItems = [
       viewportWrapper: 'w-[600px] transition-all duration-500 left-1/2 -translate-x-1/2',
     }"
   />
-  <UNavigationMenu
+  <UContentSearchButton
     v-else
-    variant="link"
-    color="neutral"
-    :items="docsItems"
-    :ui="{ linkTrailingIcon: 'hidden' }"
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{ leadingIcon: 'size-4 mr-1' }"
   />
 </template>

apps/docs/app/components/features/FeatureStructuredErrors.vue

@@ -45,7 +45,7 @@ const pills = [
             {{ pill.label }}
           </span>
         </div>
-        <NuxtLink to="/core-concepts/structured-errors" class="mt-4 inline-flex items-center gap-1.5 font-mono text-xs text-dimmed hover:text-primary transition-colors">
+        <NuxtLink to="/logging/structured-errors" class="mt-4 inline-flex items-center gap-1.5 font-mono text-xs text-dimmed hover:text-primary transition-colors">
           Learn about structured errors
           <UIcon name="i-lucide-arrow-right" class="size-3" />
         </NuxtLink>

apps/docs/content/0.landing.md

@@ -61,7 +61,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
 
   :::features-feature-client-drain
   ---
-  link: /core-concepts/client-logging
+  link: /logging/client-logging
   link-label: Client logging guide
   ---
   #headline
@@ -91,7 +91,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
 
   :::features-feature-ai-sdk
   ---
-  link: /core-concepts/ai-sdk
+  link: /logging/ai-sdk
   link-label: AI SDK integration
   ---
   #headline
@@ -107,7 +107,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   :::features-feature-performance
   ---
   link: /core-concepts/performance
-  link-label: Full benchmark results
+  link-label: Benchmark results
   ---
   #headline
   Performance
@@ -161,6 +161,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   #nextjs
   ```ts [app/api/checkout/route.ts]
   import { withEvlog, useLogger } from '@/lib/evlog'
+  import { createError } from 'evlog'
 
   export const POST = withEvlog(async (req) => {
     const log = useLogger()
@@ -217,7 +218,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
 
   #nitro
   ```ts [routes/api/checkout.post.ts]
-  import { defineHandler } from 'nitro/h3'
+  import { defineHandler, readBody } from 'nitro/h3'
   import { useLogger, createError } from 'evlog/nitro/v3'
 
   export default defineHandler(async (event) => {
@@ -312,6 +313,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   ```ts [app.module.ts]
   import { Module } from '@nestjs/common'
   import { EvlogModule } from 'evlog/nestjs'
+  import { createAxiomDrain } from 'evlog/axiom'
 
   @Module({
     imports: [
@@ -321,15 +323,12 @@ Wide events and structured errors for TypeScript. One log per request, full cont
     ],
   })
   export class AppModule {}
-
-  // In any service or controller:
-  const log = useLogger()
-  log.set({ cart: { items: cart.items.length, total: cart.total } })
   ```
 
   #express
   ```ts [src/index.ts]
   import { evlog, useLogger } from 'evlog/express'
+  import { createAxiomDrain } from 'evlog/axiom'
 
   const app = express()
   app.use(evlog({ drain: createAxiomDrain() }))
@@ -351,6 +350,7 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   #hono
   ```ts [src/index.ts]
   import { evlog, type EvlogVariables } from 'evlog/hono'
+  import { createAxiomDrain } from 'evlog/axiom'
 
   const app = new Hono<EvlogVariables>()
   app.use(evlog({ drain: createAxiomDrain() }))
@@ -371,7 +371,8 @@ Wide events and structured errors for TypeScript. One log per request, full cont
 
   #fastify
   ```ts [src/index.ts]
-  import { evlog, useLogger } from 'evlog/fastify'
+  import { evlog } from 'evlog/fastify'
+  import { createAxiomDrain } from 'evlog/axiom'
 
   const app = Fastify({ logger: false })
   await app.register(evlog, { drain: createAxiomDrain() })
@@ -392,11 +393,12 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   #elysia
   ```ts [src/index.ts]
   import { evlog, useLogger } from 'evlog/elysia'
+  import { createAxiomDrain } from 'evlog/axiom'
 
   const app = new Elysia()
     .use(evlog({ drain: createAxiomDrain() }))
-    .post('/checkout', async ({ log }) => {
-      const { cartId } = await req.body
+    .post('/checkout', async ({ log, body }) => {
+      const { cartId } = body
 
       const cart = await db.findCart(cartId)
       log.set({ cart: { items: cart.items.length, total: cart.total } })
@@ -433,11 +435,11 @@ Wide events and structured errors for TypeScript. One log per request, full cont
 
   #bun
   ```ts [scripts/migrate-users.ts]
-  import { initLogger, createRequestLogger } from 'evlog'
+  import { initLogger, createLogger } from 'evlog'
 
-  initLogger({ service: 'migrate' })
+  initLogger({ env: { service: 'migrate' } })
 
-  const log = createRequestLogger({ task: 'user-migration' })
+  const log = createLogger({ task: 'user-migration' })
 
   const users = await db.query('SELECT * FROM legacy_users')
   log.set({ found: users.length })