Merge pull request #560 from Baroshem/docs/#558

docs-#558: refactor docs new version

docs/.env.example

@@ -0,0 +1,5 @@
+# To use Nuxt UI Pro in production
+NUXT_UI_PRO_LICENSE=
+
+# Used when pre-rendering the docs for dynamic OG images
+NUXT_PUBLIC_SITE_URL=

docs/.gitignore

@@ -10,4 +10,3 @@ dist
 sw.*
 .env
 .output
-yarn.lock

docs/.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+strict-peer-dependencies=false

docs/README.md

@@ -0,0 +1,35 @@
+# Nuxt Security docs
+
+Docs template with [Nuxt UI](https://ui.nuxt.com).
+
+## Setup
+
+Install dependencies inside `docs/`:
+
+```bash
+yarn
+```
+
+## Development
+
+```bash
+yarn dev
+```
+
+## Static Generation
+
+Use the `generate` command to build your application.
+
+The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
+
+```bash
+yarn generate
+```
+
+## Preview build
+
+You might want to preview the result of your build locally, to do so, run the following command:
+
+```bash
+yarn preview
+```

docs/app.config.ts

@@ -1,41 +1,28 @@
 export default defineAppConfig({
-  github: {
-    owner: 'Baroshem',
-    repo: 'nuxt-security',
-    branch: 'main'
-  },
-  docus: {
-    title: 'Nuxt Security',
-    description: '🛡️ Security Module for Nuxt based on HTTP Headers and Middleware',
-    image: '/preview.jpg',
-    url: 'https://nuxt-security.vercel.app',
-    socials: {
-      twitter: 'jacobandrewsky',
-      github: 'baroshem/nuxt-security',
-      nuxt: {
-        label: 'Nuxt',
-        icon: 'simple-icons:nuxtdotjs',
-        href: 'https://nuxt.com'
-      }
-    },
-    aside: {
-      level: 1
-    },
-    github: {
-      dir: 'docs/content',
-      root: 'docs/content',
-      edit: true,
-      releases: true,
-      owner: 'baroshem',
-      repo: 'nuxt-security',
-      branch: 'main'
+  ui: {
+    primary: 'green',
+    gray: 'slate',
+    button: {
+      color: {
+        white: {
+          link: 'text-white dark:text-white hover:text-gray-300 dark:hover:text-gray-300 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 transition-all duration-200',
+        },
+        transparent: {
+          outline: 'ring-1 ring-inset ring-gray-700 text-white dark:text-white hover:bg-gray-900 disabled:bg-gray-300 dark:hover:bg-gray-900 dark:disabled:bg-gray-300 focus-visible:ring-2 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-400',
+        },
+      },
     },
-    cover: {
-      src: '/preview.png',
-      alt: 'Security Module for Nuxt based on HTTP Headers and Middleware'
+  },
+  elements: {
+    variables: {
+      light: {
+        background: '255 255 255',
+        foreground: 'var(--color-gray-700)',
+      },
+      dark: {
+        background: 'var(--color-gray-950)',
+        foreground: 'var(--color-gray-200)',
+      },
     },
-    header: {
-      logo: true
-    }
-  }
+  },
 })

docs/app.vue

@@ -0,0 +1,138 @@
+<script setup>
+useServerSeoMeta({
+  ogSiteName: 'Nuxt Security',
+  twitterCard: 'summary_large_image',
+})
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+const links = [
+  {
+    label: 'Documentation',
+    to: '/getting-started/installation',
+  },
+  {
+    label: 'Playground',
+    to: '/playground',
+  },
+  {
+    label: 'Releases',
+    to: 'https://github.com/Baroshem/nuxt-security/releases',
+    target: '_blank',
+  },
+]
+const { data: files } = useLazyFetch('/api/search.json', {
+  default: () => [],
+  server: false,
+})
+const { data: navigation } = await useAsyncData('navigation', () =>
+  fetchContentNavigation(),
+)
+
+// Provide
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UHeader :links="links">
+    <template #logo>
+      <Logo />
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="!$colorMode.forced" />
+      <UButton
+        aria-label="Nuxt Website"
+        icon="i-simple-icons-nuxtdotjs"
+        to="https://nuxt.com"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt on X"
+        icon="i-simple-icons-x"
+        to="https://x.com/nuxt_js"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt Security on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/Baroshem/nuxt-security"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+    </template>
+    <!-- Mobile panel -->
+    <template
+      v-if="$route.path !== '/'"
+      #panel
+    >
+      <LazyUDocsSearchButton
+        size="md"
+        class="mb-4 w-full"
+      />
+      <LazyUNavigationTree
+        :links="mapContentNavigation(navigation)"
+        default-open
+        :multiple="false"
+      />
+    </template>
+  </UHeader>
+
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+
+  <UFooter :links="links">
+    <template #left>
+      <span class="text-sm">
+        Published under
+        <NuxtLink
+          to="https://github.com/Baroshem/nuxt-security"
+          target="_blank"
+          class="underline"
+        >MIT License</NuxtLink>
+      </span>
+    </template>
+    <template #right>
+      <UColorModeButton v-if="!$colorMode.forced" />
+      <UButton
+        aria-label="Nuxt Website"
+        icon="i-simple-icons-nuxtdotjs"
+        to="https://nuxt.com"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt on X"
+        icon="i-simple-icons-x"
+        to="https://x.com/nuxt_js"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt Security on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/Baroshem/nuxt-security"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+    </template>
+  </UFooter>
+  <ClientOnly>
+    <LazyUDocsSearch
+      :files="files"
+      :navigation="navigation"
+      :links="links"
+    />
+  </ClientOnly>
+</template>

docs/components/content/Illustration.vue → docs/components/Illustration.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <svg
     width="403"

docs/components/content/Logo.vue → docs/components/Logo.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <svg
     class="text-[#18181B] dark:text-white"