docs(new): ui pro docs

docs-pro/.env.example

@@ -0,0 +1,2 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=

docs-pro/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

docs-pro/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "@nuxtjs/eslint-config-typescript"
+  ],
+  "root": true,
+  "rules": {
+    "no-console": [2, { "allow": ["trace"] }],
+    "vue/multi-word-component-names": 0
+  }
+}

docs-pro/.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# VSC
+.history

docs-pro/.npmrc

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

docs-pro/.nuxtrc

@@ -0,0 +1,3 @@
+
+autoImport=true
+modules[]=@nuxthq/studio

docs-pro/README.md

@@ -0,0 +1,119 @@
+![nuxt-ui-pro-docs-template](https://github.com/nuxt-ui-pro/docs/assets/904724/67fc15a7-92f6-4566-95b9-fe099012473c)
+
+# Nuxt UI Pro - Docs template
+
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
+[![Nuxt Studio](https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC)](https://nuxt.studio/themes/docus)
+
+- [Live demo](https://nuxt-ui-pro-template-docs.vercel.app/)
+- [Play on Stackblitz](https://stackblitz.com/github/nuxt-ui-pro/docs)
+- [Documentation](https://ui.nuxt.com/pro/guide)
+- [Clone on Nuxt Studio](https://nuxt.studio/themes/docs)
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Nuxt Studio integration
+
+Add `@nuxthq/studio` dependency to your package.json:
+
+```bash
+# npm
+npm install --save-dev @nuxthq/studio
+
+# pnpm
+pnpm add -D @nuxthq/studio
+
+# yarn
+yarn add -D @nuxthq/studio
+
+# bun
+bun add -d @nuxthq/studio
+```
+
+Add this module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  ...
+  modules: [
+    ...
+    '@nuxthq/studio'
+  ]
+})
+```
+
+Read more on [Nuxt Studio docs](https://nuxt.studio/docs/projects/setup).
+
+## Renovate integration
+
+Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.

docs-pro/app.config.ts

@@ -0,0 +1,100 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'slate',
+
+    footer: {
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800'
+      }
+    },
+
+    icons: {
+      dark: 'i-heroicons-moon',
+      light: 'i-heroicons-sun'
+    }
+  },
+  header: {
+    logo: {
+      light: {
+        src: '/logo-nuxt-supabase-light.png'
+      },
+      dark: {
+        src: '/logo-nuxt-supabase-dark.png',
+        alt: 'Alt dark mode'
+      }
+    },
+    search: true,
+    colorMode: true,
+    links: [{
+      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/supabase',
+      target: '_blank',
+      'aria-label': 'Module on GitHub'
+    }, {
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
+      target: '_blank',
+      'aria-label': 'Nuxt official website'
+    }, {
+      icon: 'i-simple-icons-supabase',
+      to: 'https://supabase.com',
+      target: '_blank',
+      'aria-label': 'Supabase official website'
+    }]
+  },
+  footer: {
+    credits: 'Made with Nuxt Studio',
+    colorMode: false,
+    links: [{
+      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/supabase',
+      target: '_blank',
+      'aria-label': 'Module on GitHub'
+    }, {
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
+      target: '_blank',
+      'aria-label': 'Nuxt official website'
+    }, {
+      icon: 'i-simple-icons-supabase',
+      to: 'https://supabase.com',
+      target: '_blank',
+      'aria-label': 'Supabase official website'
+    }]
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      edit: 'https://github.com/nuxt-modules/supabase/edit/main/docs/content',
+      links: [{
+        icon: 'i-heroicons-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/nuxt-modules/supabase',
+        target: '_blank'
+      }, {
+        icon: 'i-simple-icons-nuxtdotjs',
+        label: 'Nuxt docs',
+        to: 'https://nuxt.com',
+        target: '_blank'
+      }, {
+        icon: 'i-simple-icons-supabase',
+        label: 'Supabase docs',
+        to: 'https://supabase.com',
+        target: '_blank'
+      }]
+    }
+  }
+})

docs-pro/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 UI Pro - Docs template',
+  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-pro/components/Footer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </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-pro/components/Header.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<NavItem[]>('navigation', [])
+
+const { header } = useAppConfig()
+const colorMode = useColorMode()
+
+const logo = computed(() => colorMode.value === 'dark' ? header?.logo?.dark : header?.logo?.light)
+</script>
+
+<template>
+  <UHeader>
+    <template #logo>
+      <template v-if="logo?.src">
+        <img v-bind="{ class: 'h-6 w-auto', ...logo }">
+      </template>
+      <template v-else>
+        Nuxt UI Pro <UBadge label="Docs" variant="subtle" class="mb-0.5" />
+      </template>
+    </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>