docs: migrate to @nuxt/ui-pro (#369)

docs/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

docs/.env.example

@@ -1,3 +1,4 @@
-# Create one with no scope selected on https://github.com/settings/tokens/new
-# This token is used for fetching the repository releases.
-GITHUB_TOKEN=
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
+# Public URL, used for OG Image when running nuxt generate
+NUXT_PUBLIC_SITE_URL=

docs/.gitignore

@@ -1,12 +1,24 @@
-node_modules
-*.iml
-.idea
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
-.vscode
-.DS_Store
-coverage
+.nitro
+.cache
 dist
-sw.*
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
 .env
-.output
+.env.*
+!.env.example

docs/README.md

@@ -1,31 +1,40 @@
-![docus preview](./static/preview.png)
+# Nuxt Strapi - Docs
 
-# Docus Starter
-
-Starter template for [Docus](https://docus.dev).
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
 
 ## Setup
 
-Install dependencies:
+Make sure to install the dependencies in the `docs/` directory:
 
 ```bash
-yarn install
+pnpm install
 ```
 
-## Development
+## Development Server
+
+Start the development server on `http://localhost:3000`:
 
 ```bash
-yarn dev
+# npm
+npm run dev
 ```
 
-## Static Generation
+## Production
+
+Make sure to add your [Nuxt UI Pro](https://ui.nuxt.com/pro) license in the `.env` file before building the application.
 
-This will create the `dist/` directory for publishing to static hosting:
+Build the application for production:
 
 ```bash
-yarn build
+# npm
+npm run generate
 ```
 
-To preview the static generated app, run `yarn start`
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+```
 
-For detailed explanation on how things work, checkout [Docus](https://docus.dev).
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

docs/app.config.ts

@@ -1,32 +1,64 @@
 export default defineAppConfig({
-  docus: {
-    title: 'Nuxt Strapi',
-    layout: {
-      fluid: true
-    },
-    url: 'https://strapi.nuxtjs.org',
-    description: '@nuxtjs/strapi is a Nuxt module for first class integration with Strapi.',
-    socials: {
-      github: 'nuxt-modules/strapi',
-      twitter: 'nuxt_js'
-    },
-    image: '/cover.png',
-    header: {
-      logo: true
-    },
+  ui: {
+    primary: 'strapi',
+    gray: 'slate',
     footer: {
-      iconLinks: [
-        {
-          label: 'Nuxt',
-          href: 'https://nuxt.com',
-          icon: 'simple-icons:nuxtdotjs'
-        },
-        {
-          label: 'Strapi',
-          href: 'https://strapi.io',
-          icon: 'simple-icons:strapi'
-        }
-      ]
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800'
+      }
+    }
+  },
+  header: {
+    search: true,
+    colorMode: true,
+    links: [{
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt-modules/strapi',
+      target: '_blank',
+      'aria-label': '@nuxtjs/strapi on GitHub'
+    }]
+  },
+  footer: {
+    colorMode: false,
+    links: [{
+      icon: 'i-simple-icons-discord',
+      to: 'https://discord.com/invite/ps2h6QT',
+      target: '_blank',
+      'aria-label': 'Nuxt UI on Discord'
+    }, {
+      icon: 'i-simple-icons-x',
+      to: 'https://x.com/nuxt_js',
+      target: '_blank',
+      'aria-label': 'Nuxt on X'
+    }, {
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt-modules/strapi',
+      target: '_blank',
+      'aria-label': '@nuxtjs/strapi on GitHub'
+    }]
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
+      links: [{
+        icon: 'i-heroicons-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/nuxt-modules/strapi',
+        target: '_blank',
+      }, {
+        icon: 'i-simple-icons-nuxtdotjs',
+        label: 'Nuxt docs',
+        to: 'https://nuxt.com/docs/getting-started/introduction',
+        target: '_blank',
+      }, {
+        icon: 'i-simple-icons-strapi',
+        label: 'Strapi docs',
+        to: 'https://docs.strapi.io/dev-docs/intro',
+        target: '_blank',
+      }]
     }
   }
 })

docs/app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+useSeoMeta({
+  ogSiteName: 'Nuxt Strapi',
+  twitterCard: 'summary_large_image'
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <div>
+    <Header />
+
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <Footer />
+
+    <ClientOnly>
+      <LazyUDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>

docs/components/Footer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      <span class="text-sm text-gray-500 dark:text-gray-400">
+        Made with <NuxtLink to="https://ui.nuxt.com/pro" target="_blank" class="text-primary font-semibold relative group hover:underline hover:underline-offset-4">
+          Nuxt UI Pro
+
+          <UIcon name="i-heroicons-arrow-up-right-20-solid" class="w-3 h-3 absolute top-0 -right-3.5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400" />
+        </NuxtLink>
+      </span>
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>

docs/components/Header.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<NavItem[]>('navigation', [])
+
+const { header } = useAppConfig()
+</script>
+
+<template>
+  <UHeader>
+    <template #logo>
+      <Logo class="h-7 w-auto text-primary" />
+    </template>
+
+    <template v-if="header?.search" #center>
+      <UDocsSearchButton class="hidden lg:flex" />
+    </template>
+
+    <template #right>
+      <UDocsSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>

docs/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
+    <div class="relative">
+      <h1 class="text-8xl mb-4 text-white">
+        {{ title }}
+      </h1>
+      <p class="text-5xl text-gray-200 leading-tight">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>