docs: restore landing page

Author: onmax

docs/app/components/content/landing/LandingHero.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { MDCParserResult } from '@nuxtjs/mdc'
 import { useElementSize } from '@vueuse/core'
 import { motion, MotionConfig } from 'motion-v'
 import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
 // @ts-expect-error yaml is not typed
 import hero from './hero.yml'
 
@@ -26,6 +28,13 @@ function getLang(filename: string) {
 function getCodeBlock(tab: { name: string, code: string }) {
   return `\`\`\`${getLang(tab.name)}\n${tab.code.trim()}\n\`\`\``
 }
+
+const codeBlocks = await Promise.all(
+  tabs.map(tab => parseMarkdown(getCodeBlock(tab), {
+    contentHeading: false,
+    toc: false,
+  }) as Promise<MDCParserResult>),
+)
 </script>
 
 <template>
@@ -91,17 +100,17 @@ function getCodeBlock(tab: { name: string, code: string }) {
             </div>
 
             <!-- CTA Buttons -->
-            <div class="mt-4 flex w-fit flex-col gap-4 font-sans md:flex-row md:justify-center lg:justify-start items-center">
+            <div class="mt-4 flex w-full max-w-sm items-center gap-3 font-sans min-[390px]:w-fit md:max-w-none md:gap-4 md:justify-center lg:justify-start">
               <NuxtLink
                 to="/getting-started/installation"
-                class="border-2 border-black bg-white px-4 py-1.5 text-sm uppercase text-black shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] transition duration-200 md:px-8 hover:shadow-sm dark:border-stone-400 dark:hover:shadow-sm dark:shadow-[1px_1px_rgba(120,113,108),2px_2px_rgba(120,113,108),3px_3px_rgba(120,113,108),4px_4px_rgba(120,113,108),5px_5px_0px_0px_rgba(120,113,108)]"
+                class="shrink-0 border-2 border-black bg-white px-4 py-1.5 text-sm uppercase text-black shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] transition duration-200 hover:shadow-sm dark:border-stone-400 dark:hover:shadow-sm dark:shadow-[1px_1px_rgba(120,113,108),2px_2px_rgba(120,113,108),3px_3px_rgba(120,113,108),4px_4px_rgba(120,113,108),5px_5px_0px_0px_rgba(120,113,108)] md:px-8"
               >
                 Get Started
               </NuxtLink>
               <NuxtLink
                 to="https://github.com/onmax/nuxt-better-auth"
                 target="_blank"
-                class="group relative hidden p-px text-xs font-semibold leading-6 text-white no-underline md:inline-block"
+                class="group relative inline-block min-w-0 p-px text-xs font-semibold leading-6 text-white no-underline"
               >
                 <span class="absolute inset-0 overflow-hidden rounded-sm">
                   <span class="absolute inset-0 rounded-sm bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
@@ -112,24 +121,15 @@ function getCodeBlock(tab: { name: string, code: string }) {
                 </span>
                 <span class="absolute bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-stone-800/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
               </NuxtLink>
-              <!-- Mobile GitHub button -->
-              <NuxtLink
-                to="https://github.com/onmax/nuxt-better-auth"
-                target="_blank"
-                class="flex items-center gap-2 rounded-none bg-zinc-950 px-4 py-2 text-xs font-semibold text-white ring-1 ring-white/10 md:hidden"
-              >
-                <UIcon name="i-simple-icons-github" class="size-4" />
-                <span>GitHub</span>
-              </NuxtLink>
             </div>
           </div>
         </div>
 
         <!-- Right: Code preview -->
         <div class="relative md:block lg:static xl:pl-10">
           <div class="relative">
-            <div class="from-sky-300 via-sky-300/70 to-blue-300 absolute inset-0 rounded-none bg-gradient-to-tr opacity-0 dark:opacity-5 blur-lg" />
-            <div class="from-stone-300 via-stone-300/70 to-blue-300 absolute inset-0 rounded-none bg-gradient-to-tr opacity-0 dark:opacity-5" />
+            <div class="pointer-events-none from-sky-300 via-sky-300/70 to-blue-300 absolute inset-0 rounded-none bg-gradient-to-tr opacity-0 dark:opacity-5 blur-lg" />
+            <div class="pointer-events-none from-stone-300 via-stone-300/70 to-blue-300 absolute inset-0 rounded-none bg-gradient-to-tr opacity-0 dark:opacity-5" />
 
             <!-- Code Preview Card -->
             <MotionConfig :transition="{ duration: 0.3, ease: 'easeInOut' }">
@@ -138,8 +138,8 @@ function getCodeBlock(tab: { name: string, code: string }) {
                 class="code-preview relative overflow-hidden rounded-sm backdrop-blur-lg"
               >
                 <div ref="contentRef">
-                  <div class="absolute -top-px left-0 right-0 h-px" />
-                  <div class="absolute -bottom-px left-11 right-20 h-px" />
+                  <div class="pointer-events-none absolute -top-px left-0 right-0 h-px" />
+                  <div class="pointer-events-none absolute -bottom-px left-11 right-20 h-px" />
                   <div class="pl-4 pt-4">
                     <!-- Traffic lights -->
                     <svg aria-hidden="true" viewBox="0 0 42 10" fill="none" class="h-2.5 w-auto stroke-slate-500/30">
@@ -149,10 +149,11 @@ function getCodeBlock(tab: { name: string, code: string }) {
                     </svg>
 
                     <!-- Tabs with layoutId animation -->
-                    <div class="mt-4 flex space-x-2 text-xs">
+                    <div class="relative z-10 mt-4 flex space-x-2 text-xs">
                       <button
                         v-for="(tab, index) in tabs"
                         :key="tab.name"
+                        type="button"
                         class="relative isolate flex h-6 cursor-pointer items-center justify-center rounded-full px-2.5 transition-colors"
                         :class="currentTab === index ? 'text-stone-300' : 'text-slate-500'"
                         @click="currentTab = index"
@@ -161,7 +162,7 @@ function getCodeBlock(tab: { name: string, code: string }) {
                         <motion.div
                           v-if="currentTab === index"
                           layout-id="tab-code-preview"
-                          class="bg-stone-800 absolute inset-0 -z-10 rounded-full"
+                          class="pointer-events-none bg-stone-800 absolute inset-0 -z-10 rounded-full"
                         />
                       </button>
                     </div>
@@ -188,9 +189,8 @@ function getCodeBlock(tab: { name: string, code: string }) {
                                 </div>
                               </div>
 
-                              <!-- Code via MDC - all rendered during SSR -->
                               <div class="hero-code">
-                                <MDC :value="getCodeBlock(tab)" tag="div" />
+                                <MDCRenderer :body="codeBlocks[index].body" />
                               </div>
                             </div>
                           </div>

docs/app/pages/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Collections } from '@nuxt/content'
+
+const route = useRoute()
+const { locale, isEnabled } = useDocusI18n()
+
+const collectionName = computed(() => isEnabled.value ? `landing_${locale.value}` : 'landing')
+
+const { data: page } = await useAsyncData(collectionName.value, () => queryCollection(collectionName.value as keyof Collections).path(route.path).first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeo({
+  title,
+  description,
+  type: 'website',
+  ogImage: page.value?.seo?.ogImage as string | undefined,
+})
+
+if (!page.value?.seo?.ogImage) {
+  defineOgImage('Landing', {
+    title: title?.slice(0, 60),
+    description: formatOgDescription(title, description),
+  })
+}
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+  />
+</template>

docs/content.config.ts

@@ -2,6 +2,10 @@ import { defineCollection, defineContentConfig } from '@nuxt/content'
 
 export default defineContentConfig({
   collections: {
+    landing: defineCollection({
+      type: 'page',
+      source: 'index.md',
+    }),
     content: defineCollection({
       type: 'page',
       source: '**/*',

docs/content/index.md

@@ -4,70 +4,8 @@ description: Seamless Better Auth integration for Nuxt with automatic route prot
 navigation: false
 ---
 
-Nuxt Better Auth is a Nuxt 4 module that wraps [Better Auth](https://www.better-auth.com/) with Nuxt-native configuration, route protection, SSR-safe session access, and optional NuxtHub schema generation.
+::landing-hero
+::
 
-## Start here
-
-Use the docs in this order if you are setting up the module for the first time:
-
-1. [Quickstart](/getting-started)
-2. [Installation](/getting-started/installation)
-3. [Configuration](/getting-started/configuration)
-4. [Client setup](/getting-started/client-setup)
-5. [Route protection](/core-concepts/route-protection)
-
-You should finish that path with a working `/api/auth/*` backend, a client config, and a login flow that can read session state through `useUserSession()`.
-
-## Choose the right setup
-
-| If you want to... | Start here |
-| --- | --- |
-| Get a database-backed setup running quickly | [NuxtHub](/integrations/nuxthub) |
-| Plug Better Auth into your own database stack | [Custom database](/guides/custom-database) |
-| Reuse an external Better Auth server | [External auth backend](/guides/external-auth-backend) |
-| Avoid a database and accept stateless session tradeoffs | [Database-less mode](/guides/database-less-mode) |
-| Migrate from `nuxt-auth-utils` | [Migration guide](/guides/migrate-from-nuxt-auth-utils) |
-
-## What the module adds on top of Better Auth
-
-- `server/auth.config.ts` and `app/auth.config.ts` helpers
-- auto-imported client and server auth utilities
-- route protection through `routeRules` and page meta
-- SSR-aware session hydration
-- typed `AuthUser` and `AuthSession` inference from your config
-- optional NuxtHub database and schema integration
-
-## Documentation map
-
-### Getting started
-
-- [Quickstart](/getting-started)
-- [Installation](/getting-started/installation)
-- [Configuration](/getting-started/configuration)
-- [Client setup](/getting-started/client-setup)
-- [Type augmentation](/getting-started/type-augmentation)
-- [Schema generation](/getting-started/schema-generation)
-
-### Core concepts
-
-- [Server auth](/core-concepts/server-auth)
-- [Sessions](/core-concepts/sessions)
-- [Route protection](/core-concepts/route-protection)
-- [Auto-imports and aliases](/core-concepts/auto-imports-aliases)
-- [Security and caveats](/core-concepts/security-caveats)
-
-### Guides and integrations
-
-- [Role-based access](/guides/role-based-access)
-- [OAuth providers](/guides/oauth-providers)
-- [Two-factor authentication](/guides/two-factor-auth)
-- [Production deployment](/guides/production-deployment)
-- [NuxtHub](/integrations/nuxthub)
-- [i18n](/integrations/i18n)
-
-### API reference
-
-- [Composables](/api/composables)
-- [Server utilities](/api/server-utils)
-- [Components](/api/components)
-- [Types](/api/types)
+::landing-features
+::

docs/nuxt.config.ts

@@ -33,6 +33,7 @@ export default defineNuxtConfig({
 
   mdc: {
     highlight: {
+      noApiRoute: false,
       theme: { default: 'synthwave-84', dark: 'synthwave-84', light: 'one-light' },
       langs: ['bash', 'json', 'js', 'ts', 'vue', 'html', 'css', 'yaml', 'sql'],
     },

docs/package.json

@@ -16,12 +16,13 @@
     "@vercel/speed-insights": "^1.3.1",
     "@vueuse/core": "^14.2.1",
     "motion-v": "^2.0.0",
-    "nuxt": "^4.3.1"
+    "nuxt": "^4.3.1",
+    "satori": "^0.26.0"
   },
   "devDependencies": {
     "@iconify-json/solar": "^1.2.5",
     "@rollup/plugin-yaml": "^4.1.2",
     "@vueuse/nuxt": "^14.2.1",
-    "docus": "^5.8.1"
+    "docus": "^5.11.0"
   }
 }