docs: add meta tags and generate sitemap (#841)

Author: zoey-kaiser

.github/workflows/ci.yaml

@@ -62,7 +62,7 @@ jobs:
         run: pnpm i && pnpm dev:prepare
 
       # Build docs
-      - run: cd docs && pnpm docs:build
+      - run: pnpm docs:build
 
   test-playground-local:
     runs-on: ubuntu-latest

.github/workflows/deploy-docs.yml

@@ -51,7 +51,7 @@ jobs:
         run: pnpm i
 
       - name: Build with VitePress
-        run: cd docs/ && pnpm docs:build
+        run: pnpm docs:build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

docs/.vitepress/config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { routes as navRoutes } from './routes/navbar'
 import { routes as sidebarRoutes } from './routes/sidebar'
+import { headConfig, sitemapConfig } from './head'
 
 export default defineConfig({
   title: 'NuxtAuth',
@@ -11,7 +12,8 @@ export default defineConfig({
   lang: 'en-US',
   appearance: 'dark',
   lastUpdated: true,
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: headConfig,
+  sitemap: sitemapConfig,
   themeConfig: {
     logo: '/lock.png',
     outline: { level: 'deep' },

docs/.vitepress/head.ts

@@ -0,0 +1,20 @@
+import type { HeadConfig } from "vitepress"
+
+const HOST_NAME = 'https://auth.sidebase.io'
+const OG_IMAGE_URL = `${HOST_NAME}/nuxt-auth-og.jpg`
+
+export const sitemapConfig = {
+  hostname: HOST_NAME
+}
+
+export const headConfig: HeadConfig[] = [
+  ['link', { rel: 'icon', href: '/favicon.ico' }],
+  ['meta', { name: 'theme-color', content: '#30A36C' }],
+  ['meta', { property: 'og:title', content: 'NuxtAuth | Authentication for Nuxt 3' }],
+  ['meta', { property: 'og:description', content: 'User authentication and sessions via authjs' }],
+  ['meta', { property: 'og:site_name', content: 'NuxtAuth' }],
+  ['meta', { property: 'og:type', content: 'website' }],
+  ['meta', { property: 'og:locale', content: 'en' }],
+  ['meta', { property: 'og:image', content: OG_IMAGE_URL }],
+  ['meta', { property: 'og:url', content: HOST_NAME }],
+]

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,29 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import GithubStarsButton from './components/GithubStarsButton.vue'
+import Banner from './components/Banner.vue'
+
+const { Layout } = DefaultTheme
+
+// Banner Configuration
+const bannerConfig = {
+  // Leave text empty to disable the banner
+  text: '✨ NuxtAuth v0.8.0 has been released! ✨',
+  button: {
+    href: 'https://github.com/sidebase/nuxt-auth/releases/tag/0.8.0',
+    text: 'View release notes'
+  }
+}
+</script>
+
+<template>
+  <Layout>
+    <template #nav-bar-content-after>
+      <GithubStarsButton owner="sidebase" repo="nuxt-auth" />
+    </template>
+
+    <template #home-hero-before>
+      <Banner v-bind="bannerConfig" />
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,32 +1,9 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
 
 // Styles
 import './style.css'
 
-// Custom Components
-import GithubStarsButton from './components/GithubStarsButton.vue'
-import Banner from './components/Banner.vue'
-
-// Configuration
-const bannerConfig = {
-  // Leave text empty to disable the banner
-  text: '✨ NuxtAuth v0.8.0 has been released! ✨',
-  button: {
-    href: 'https://github.com/sidebase/nuxt-auth/releases/tag/0.8.0',
-    text: 'View release notes'
-  }
-}
-
-export default {
-  extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      'nav-bar-content-after': h(GithubStarsButton, { owner: 'sidebase', repo: 'nuxt-auth' }),
-      'home-hero-before': h(Banner, bannerConfig)
-    })
-  },
-} satisfies Theme
+export default { extends: DefaultTheme, Layout } satisfies Theme

docs/package.json

@@ -27,7 +27,9 @@
     "typecheck": "nuxi prepare playground-local && tsc --noEmit",
     "typecheck:refresh": "nuxi prepare playground-refresh && tsc --noEmit",
     "dev:prepare": "nuxt-module-build build --stub",
-    "docs:dev": "cd ./docs && pnpm docs:dev"
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.4",
@@ -51,6 +53,7 @@
     "ofetch": "^1.3.4",
     "ts-essentials": "^9.4.2",
     "typescript": "^5.5.4",
+    "vitepress": "^1.3.1",
     "vue-tsc": "^2.0.29"
   },
   "overrides": {