feat: new docs (#2740)

* feat: new docs

* chore: ignore docs from linting

* chore: Nuxt UI Pro + Nuxt Content starter

* chore: refresh lockfile

* chore: update app metadata

* chore: update header title

* refactor: update index page

* feat: the logo

* feat: navigation links

* docs: installation page

* docs: add getting started icon

* docs: update installation page

* docs: usage page

* docs: add /guide content

* style: add '.env' file icons

* chore: spacing

* chore: change 'alert' to 'callout'

* fix: pin '@nuxt/content' to 2.8.2

* docs: options page

* docs: api

* docs: roadmap page

* chore: add ts-expect-error

* docs: v7

* chore: remove duplicate title

* refactor: separate v8 & v7 docs pages

* style: disallow opening multiple accordions

* chore: refresh lockfile

* chore: add oss license

* feat: implement VersionSelect to switch module versions

* refactor: move all docs under '/docs' route

* docs: update homepage links

* refactor: match page name to its title

* feat: add code group in homepage

* feat: dynamically show full or truncate i18n ero title

* feat: og image

* refactor: remove redundant props

* chore: cleanup

* refactor: cleanup

* refactor: remove empty 'logo' object

* chore: remove redundant 'viewport' as it's automatically added

* refactor: set `titleTemplate` in app.vue

* refactor: `usePageMeta` composable

* chore: avoid using single-name components

* refactor: set header 'links' props to optional

* refactor: add 'ts-expect-error'

* refactor: remove redundant 'v7' page

* chore: rename first pages to index

* fix: broken link

* chore: update relative links

* chore: fix broken links

* chore: add `strict-peer-dependencies` to docs npmrc

* chore: remove redundant 'vue' resolution

* chore: add 'shamefully-hoist' & 'strict-peer-dependencies' to root .npmrc

* chore: bump nuxt content and ui pro

* chore: organize a bit

* chore: remove 'asciidoc name from codeblocks

* chore: replace 'env' with 'shell'

* fix: 'env' icons are not rendered

* chore: refresh lockfile

* chore: highlight `jsonc` code blocks

---------

Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>

.npmrc

@@ -1 +1,3 @@
 shell-emulator=true
+shamefully-hoist=true
+strict-peer-dependencies=false

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,5 @@
-# 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,27 @@
-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
+
+# VSC
+.history

docs/.npmrc

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

docs/README.md

@@ -0,0 +1,125 @@
+![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/docs)
+
+- [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)
+
+## Quick Start
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/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/app.config.ts

@@ -1,49 +1,58 @@
 export default defineAppConfig({
-  docus: {
-    title: '@nuxtjs/i18n',
-    description: 'I18n (Internationalization) module for Nuxt',
-    url: 'https://i18n.nuxtjs.org',
-    layout: 'default',
-    image: '/cover.png',
-    socials: {
-      github: 'nuxt-modules/i18n'
-    },
-    github: {
-      branch: 'main',
-      repo: 'i18n',
-      owner: 'nuxt-modules',
-      dir: 'docs/content',
-      edit: true
-    },
-    aside: {
-      level: 1
-    },
-    cover: {
-      src: '/cover.png',
-      alt: 'I18n module for Nuxt'
-    },
-    header: {
-      logo: true,
-      showLinkIcon: false
-    },
+  ui: {
+    primary: 'green',
+    gray: 'slate',
     footer: {
-      credits: {
-        icon: 'IconDocus',
-        text: 'Powered by Docus',
-        href: 'https://docus.com'
-      },
-      icons: [
-        {
-          label: 'Nuxt',
-          href: 'https://nuxt.com',
-          component: 'IconNuxt'
-        },
-        {
-          label: 'Vue Telescope',
-          href: 'https://vuetelescope.com',
-          component: 'IconVueTelescope'
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800'
+      }
+    },
+    content: {
+      prose: {
+        code: {
+          icon: {
+            env: 'vscode-icons:file-type-dotenv'
+          }
         }
-      ]
+      }
+    }
+  },
+  seo: { siteName: '@nuxtjs/i18n' },
+  header: {
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/nuxt-modules/i18n',
+        target: '_blank',
+        'aria-label': 'Nuxt i18n module'
+      }
+    ]
+  },
+  footer: {
+    credits: `Copyright © ${new Date().getFullYear()}`,
+    colorMode: false,
+    links: [
+      {
+        icon: 'i-simple-icons-nuxtdotjs',
+        to: 'https://nuxt.com',
+        target: '_blank',
+        'aria-label': 'Nuxt Website'
+      },
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/nuxt-modules/i18n',
+        target: '_blank',
+        'aria-label': 'Nuxt i18n module'
+      }
+    ]
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      edit: 'https://github.com/nuxt-modules/i18n/docs/edit/main/content'
     }
   }
 })

docs/app.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// @ts-expect-error This is because we're using Nuxt Content v2.8.2 instead of the new version which includes these types. We're using the old version because the latest has issues with highlighting
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { PageLink } from '#ui-pro/types'
+
+// Seo
+const { seo } = useAppConfig()
+useHead({ htmlAttrs: { lang: 'en' }, link: [{ rel: 'icon', href: '/favicon.ico' }] })
+useSeoMeta({
+  titleTemplate: `%s - ${seo.siteName}`,
+  ogSiteName: seo.siteName,
+  twitterCard: 'summary_large_image'
+})
+
+// Navigation Data
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+provide('navigation', navigation)
+
+// Search
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false
+})
+
+// Header
+const route = useRoute()
+const links: PageLink[] = [
+  {
+    label: 'Docs',
+    to: `/docs/getting-started`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/docs')
+  },
+  {
+    label: 'Roadmap',
+    to: '/roadmap',
+    icon: 'i-heroicons-map'
+  }
+]
+</script>
+
+<template>
+  <div>
+    <TheHeader :links="links" />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <TheFooter />
+
+    <ClientOnly>
+      <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>