feat: studio compatibility (#13)

Author: larbish

.env.example

@@ -1,4 +1,2 @@
-# Specify the path of @nuxt/ui-pro locally
-NUXT_UI_PRO_PATH=
-# License to build Nuxt UI Pro in production, https://ui.nuxt.com/pro/purchase
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
 NUXT_UI_PRO_LICENSE=

.eslintignore

@@ -1,2 +1,4 @@
-.nuxt/
-node_modules/
+dist
+node_modules
+.output
+.nuxt

.eslintrc

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxt/eslint-config'
+  ],
+  rules: {
+    // Global
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'quote-props': ['error', 'as-needed'],
+    // Vue
+    'vue/multi-word-component-names': 0,
+    'vue/max-attributes-per-line': 'off',
+    'vue/no-v-html': 0
+  }
+}

.eslintrc.cjs

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# VSC
+.history

.gitignore

@@ -1,7 +1,9 @@
-# Nuxt UI Pro: Docs template
+# Nuxt UI Pro - Docs template
 
 Look at [Nuxt docs](https://nuxt.com/docs/getting-started/introduction) and [Nuxt UI Pro docs](https://ui.nuxt.com/pro) to learn more.
 
+Clone and play on [Nuxt Studio](https://nuxt.studio/themes/docs).
+
 ## Setup
 
 Make sure to install the dependencies:

.nuxtrc

@@ -1,32 +1,50 @@
 export default defineAppConfig({
   ui: {
-    primary: 'emerald',
+    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'
+      }
+    }
   },
   header: {
+    logo: {
+      src: ''
+    },
+    search: true,
+    colorMode: true,
     links: [{
-      icon: 'i-heroicons-book-open',
-      to: 'https://ui.nuxt.com/getting-started',
-      target: '_blank',
-      'aria-label': 'Nuxt UI docs'
-    }, {
       icon: 'i-simple-icons-github',
       to: 'https://github.com/nuxt-ui-pro/docs',
       target: '_blank',
       'aria-label': 'Docs template on GitHub'
     }]
   },
   footer: {
+    credits: 'Copyright © 2023',
+    colorMode: false,
     links: [{
-      icon: 'i-simple-icons-github',
-      to: 'https://github.com/nuxt-ui-pro/docs',
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
       target: '_blank',
-      'aria-label': 'Nuxt UI Pro Docs on GitHub'
+      'aria-label': 'Nuxt Website'
+    }, {
+      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/ui',
+      target: '_blank',
+      'aria-label': 'Nuxt UI on GitHub'
     }]
   }
-})
+})

README.md

@@ -1,55 +1,48 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
-useSeoMeta({
-  ogSiteName: 'Nuxt UI Pro - Docs template',
-  twitterCard: 'summary_large_image'
+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'
   }
 })
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
-  default: () => [],
-  server: false
+useSeoMeta({
+  ogSiteName: 'Nuxt UI Pro - Docs template',
+  twitterCard: 'summary_large_image'
 })
 
 provide('navigation', navigation)
 </script>
 
 <template>
   <div>
-    <span v-if="$route.path === '/'" class="gradient" />
-
-    <AppHeader />
+    <Header />
 
     <UMain>
-      <UContainer>
+      <NuxtLayout>
         <NuxtPage />
-      </UContainer>
+      </NuxtLayout>
     </UMain>
 
-    <AppFooter />
+    <Footer />
 
     <ClientOnly>
       <LazyUDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
+
+    <UNotifications />
   </div>
-</template>
-
-<style scoped>
-.gradient {
-  position: fixed;
-  top: 25vh;
-  width: 100%;
-  height: 30vh;
-  background: radial-gradient(50% 50% at 50% 50%, #00DC82 0%, rgba(0, 220, 130, 0) 100%);
-  filter: blur(180px);
-  opacity: 0.6;
-  z-index: -1;
-}
-</style>
+</template>

app.config.ts

@@ -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>

app.vue

@@ -9,24 +9,28 @@ const { header } = useAppConfig()
 <template>
   <UHeader>
     <template #logo>
-      <Logo class="hidden sm:block h-5 w-auto self-center" />
-      <LogoOnly class="sm:hidden h-5 w-auto self-center" />
-      <LogoBadge>Docs template</LogoBadge>
+      <template v-if="header?.logo?.src">
+        <img v-bind="{ class: 'h-6 w-auto', ...header.logo }">
+      </template>
+      <template v-else>
+        Nuxt UI Pro <UBadge label="Docs" variant="subtle" class="mb-0.5" />
+      </template>
     </template>
 
-    <template #center>
+    <template v-if="header?.search" #center>
       <UDocsSearchButton class="hidden lg:flex" />
     </template>
 
     <template #right>
-      <UDocsSearchButton label="" class="lg:hidden" />
+      <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="link"
-          color="gray"
-          variant="ghost"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
         />
       </template>
     </template>

components/AppFooter.vue

@@ -3,23 +3,27 @@ title: 'Introduction'
 description: 'Welcome to Nuxt UI Pro documentation template.'
 ---
 
-## Introduction
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
 
-1. Open https://github.com/nuxt-ui-pro/docs
-2. Click on "Use this template" button
-3. Enter repository name and click on "Create repository from template" button
-4. Clone your new repository
-5. Install dependencies with your favorite package manager
-6. Start development server
+There are already many websites based on this template:
+
+- [Nuxt](https://nuxt.com) - The Nuxt website
+- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
+- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
+- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
+- [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
 
 ## Features
 
-- Write pages in Markdown with [Nuxt Content](https://content.nuxt.com)
-- Auto-generated sidebar navigation
-- Beautiful Typography
-- Surround navigation
-- Multi-level sidebar
 - Powered by [Nuxt 3](https://nuxt.com)
+- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
+- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com)
+- Compatible with [Nuxt Studio](https://nuxt.studio)
+- Auto-generated sidebar navigation
+- Full-Text Search out of the box
+- Beautiful Typography styles
+- Dark mode support
 - And more...
 
 ## Play online