docs: Add recipes section and copy old recipes (#868)

docs/.vitepress/config.mts

@@ -14,6 +14,7 @@ export default defineConfig({
   lastUpdated: true,
   head: headConfig,
   sitemap: sitemapConfig,
+  ignoreDeadLinks: 'localhostLinks',
   themeConfig: {
     logo: '/lock.png',
     outline: { level: 'deep' },

docs/.vitepress/routes/navbar.ts

@@ -18,15 +18,17 @@ export const routes: DefaultTheme.Config['nav'] = [
       },
     ],
   },
-  // TODO: Add full API docs
-  // { text: 'API', link: '/api/overview' },
   {
     text: 'Resources',
     items: [
       {
         text: 'Overview',
         link: '/resources/overview',
       },
+      {
+        text: 'Recipes',
+        link: '/recipes/introduction/welcome',
+      },
       {
         text: 'Security',
         link: '/resources/security',

docs/.vitepress/routes/sidebar/guide.ts

@@ -0,0 +1,101 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const routes: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'Getting started',
+    base: '/guide/getting-started',
+    items: [
+      {
+        text: 'Introduction',
+        link: '/introduction',
+      },
+      {
+        text: 'Installation',
+        link: '/installation',
+      },
+      {
+        text: 'Choosing the provider',
+        link: '/choose-provider',
+      },
+    ],
+  },
+  {
+    text: 'Application side',
+    base: '/guide/application-side',
+    items: [
+      {
+        text: 'Configuration',
+        link: '/configuration',
+      },
+      {
+        text: 'Session access',
+        link: '/session-access',
+      },
+      {
+        text: 'Protecting pages',
+        link: '/protecting-pages',
+      },
+    ],
+  },
+  {
+    text: 'AuthJS Provider',
+    base: '/guide/authjs',
+    items: [
+      {
+        text: 'Quick Start',
+        link: '/quick-start',
+      },
+      {
+        text: 'NuxtAuthHandler',
+        link: '/nuxt-auth-handler',
+      },
+      {
+        text: 'Custom pages',
+        link: '/custom-pages',
+      },
+      {
+        text: 'Session data',
+        link: '/session-data',
+      },
+      {
+        text: 'Server side',
+        collapsed: true,
+        items: [
+          { text: 'Session access', link: '/server-side/session-access' },
+          { text: 'JWT access', link: '/server-side/jwt-access' },
+          { text: 'Rest API', link: '/server-side/rest-api' },
+        ],
+      },
+    ],
+  },
+  {
+    text: 'Local / Refresh Provider',
+    base: '/guide/local',
+    items: [
+      {
+        text: 'Quick Start',
+        link: '/quick-start',
+      },
+      {
+        text: 'Session data',
+        link: '/session-data',
+      }
+    ],
+  },
+  {
+    text: 'Advanced',
+    base: '/guide/advanced',
+    items: [
+      {
+        text: 'Deployment',
+        collapsed: true,
+        items: [
+          { text: 'Self-hosted', link: '/deployment/self-hosted' },
+          { text: 'Vercel', link: '/deployment/vercel' },
+          { text: 'Netlify', link: '/deployment/netlify' },
+        ],
+      },
+      { text: 'Caching', link: '/caching' },
+    ],
+  },
+]

docs/.vitepress/routes/sidebar/index.ts

@@ -0,0 +1,9 @@
+import type { DefaultTheme } from 'vitepress'
+
+import { routes as guideRoutes } from './guide'
+import { routes as recipesRoutes } from './recipes'
+
+export const routes: DefaultTheme.Config['sidebar'] = {
+  '/guide': guideRoutes,
+  '/recipes': recipesRoutes
+}

docs/.vitepress/routes/sidebar/recipes.ts

@@ -0,0 +1,46 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const routes: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'Introduction',
+    base: '/recipes/introduction',
+    items: [
+      {
+        text: 'Welcome',
+        link: '/welcome',
+      },
+      {
+        text: 'Adding your recipe',
+        link: '/adding-your-recipe',
+      }
+    ],
+  },
+  {
+    text: 'Official',
+    base: '/recipes/official',
+    items: [
+      {
+        text: 'Mocking with Vitest',
+        link: '/mocking-with-vitest',
+      },
+    ],
+  },
+  {
+    text: 'Community',
+    base: '/recipes/community',
+    items: [
+      {
+        text: 'Strapi',
+        link: '/strapi'
+      },
+      {
+        text: 'Directus',
+        link: '/directus',
+      },
+      {
+        text: 'Laravel Passport',
+        link: '/laravel-passport'
+      }
+    ],
+  },
+]

docs/.vitepress/theme/Layout.vue → docs/.vitepress/theme/components/Layout.vue

@@ -1,7 +1,7 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
-import GithubStarsButton from './components/GithubStarsButton.vue'
-import Banner from './components/Banner.vue'
+import GithubStarsButton from './GithubStarsButton.vue'
+import Banner from './Banner.vue'
 
 const { Layout } = DefaultTheme
 

docs/.vitepress/theme/components/RecipeHeader.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import Tag from './Tag.vue'
+
+type RecipeType = 'official' | 'community'
+type RecipeProviders = 'authjs' | 'local' | 'refresh'
+
+withDefaults(defineProps<{
+  type?: RecipeType
+  providers?: RecipeProviders[]
+  tags?: string[]
+  author?: string
+}>(), {
+  type: 'community',
+  providers: () => ['authjs', 'local', 'refresh'],
+  tags: () => []
+})
+</script>
+
+<template>
+  <hr>
+  <div class="RecipeHeader">
+    <div class="Tags">
+      <Tag v-if="type === 'official'" text="official" type="official" />
+      <Tag v-else text="community" type="community" />
+      <Tag v-for="provider in providers" :key="provider" :text="provider" :type="provider" />
+      <Tag v-for="tag in tags" :key="tag" :text="tag" type="info" />
+    </div>
+    <a v-if="author" class="Avatar" :href="`https://github.com/${author}`" target="_blank" rel="noreferrer noopener">
+      <span>{{ author }}</span>
+      <img :src="`https://github.com/${author}.png?size=100`" />
+    </a>
+  </div>
+  <hr>
+</template>
+
+<style scoped>
+.RecipeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 0.5rem;
+
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.Avatar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 0.5rem;
+}
+.Avatar span {
+  font-size: 14px;
+  font-weight: 600;
+}
+.Avatar img {
+  border-radius: 50%;
+  height: 25px;
+  width: 25px;
+}
+.Tags {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 0.1rem;
+}
+</style>