feat(studio): integration (#2836)

Author: larbish

docs/app/layouts/docs.vue

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 const nav = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const navigation = computed(() => nav?.value.find(item => item.path === '/docs')?.children || [])
+const navigation = computed(() => nav?.value?.find(item => item.path === '/docs')?.children || [])
 </script>
 
 <template>

docs/app/pages/docs/[...slug].vue

@@ -20,25 +20,29 @@ if (!data.value || !data.value.page) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const headline = computed(() => findPageHeadline(navigation.value, data.value.page))
+const page = computed(() => data.value?.page)
+const surround = computed(() => data.value?.surround)
+const title = computed(() => page.value?.navigation?.title || page.value?.title)
+
+const headline = computed(() => findPageHeadline(navigation.value, page.value))
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt Content v3',
-  title: data.value.page.navigation?.title || data.value.page.title,
-  ogTitle: `${data.value.page.navigation?.title || data.value.page.title} - Nuxt Content v3`,
-  description: data.value.page.description,
-  ogDescription: data.value.page.description,
+  title: title.value,
+  ogTitle: `${title.value} - Nuxt Content v3`,
+  description: page.value?.description,
+  ogDescription: page.value?.description,
 })
 
 defineOgImageComponent('Docs', {
   headline: headline.value,
-  title: data.value.page.title,
+  title: title.value,
 })
 
 const communityLinks = computed(() => [{
   icon: 'i-lucide-pencil',
   label: 'Edit this page',
-  to: `https://github.com/nuxt/content/edit/v3/docs/content/${data.value.page.stem}.${data.value.page.extension}`,
+  to: `https://github.com/nuxt/content/edit/v3/docs/content/${page.value?.stem}.${page.value?.extension}`,
   target: '_blank',
 }, {
   icon: 'i-lucide-star',
@@ -49,43 +53,43 @@ const communityLinks = computed(() => [{
 </script>
 
 <template>
-  <UPage v-if="data.page">
+  <UPage v-if="page">
     <UPageHeader
-      :title="data.page.title"
-      :links="data.page.links"
+      :title="page.title"
+      :links="page.links"
       :headline="headline"
     >
       <template #description>
         <MDC
-          v-if="data.page.description"
-          :value="data.page.description"
+          v-if="page.description"
+          :value="page.description"
           unwrap="p"
         />
       </template>
     </UPageHeader>
 
     <UPageBody>
       <ContentRenderer
-        v-if="data.page.body"
-        :value="data.page"
+        v-if="page.body"
+        :value="page"
       />
 
       <USeparator />
 
-      <UContentSurround :surround="(data.surround as any)" />
+      <UContentSurround :surround="surround" />
     </UPageBody>
 
     <template
-      v-if="data.page?.body?.toc?.links?.length"
+      v-if="page?.body?.toc?.links?.length"
       #right
     >
       <UContentToc
-        :links="data.page.body.toc.links"
+        :links="page.body.toc.links"
         class="z-[2]"
       >
         <template #bottom>
           <USeparator
-            v-if="data.page.body?.toc?.links?.length"
+            v-if="page.body.toc.links.length"
             type="dashed"
           />
 

docs/app/pages/index.vue

@@ -7,10 +7,10 @@ if (!page.value) {
 }
 
 useSeoMeta({
-  title: page.value.title,
-  description: page.value.description,
-  ogTitle: page.value.title,
-  ogDescription: page.value.description,
+  title: page.value.seo?.title,
+  description: page.value.seo?.description,
+  ogTitle: page.value.seo?.title,
+  ogDescription: page.value.seo?.description,
   ogImage: `${siteConfig.url}/social.png`,
   twitterImage: `${siteConfig.url}/social.png`,
 })

docs/content/index.yml

@@ -1,5 +1,6 @@
-title: The git-based CMS for Nuxt projects.
-description: Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then query and display it in their application.
+seo:
+  title: The git-based CMS for Nuxt projects.
+  description: Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then query and display it in their application.
 hero:
   title: The git-based CMS for<br> Nuxt projects.
   description: Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then query and display it in their application.

docs/nuxt.config.ts

@@ -39,6 +39,9 @@ export default defineNuxtConfig({
       // url: process.env.TURSO_DATABASE_URL!,
       // authToken: process.env.TURSO_AUTH_TOKEN!,
     },
+    studio: {
+      enabled: true,
+    },
   },
 
   mdc: {

docs/nuxt.schema.ts

@@ -0,0 +1,44 @@
+import { field, group } from '@nuxt/content/studio'
+
+export default defineNuxtSchema({
+  appConfig: {
+    ui: group({
+      title: 'UI',
+      description: 'UI Customization.',
+      icon: 'i-lucide-palette',
+      fields: {
+        colors: group({
+          title: 'Colors',
+          description: 'Customize color aliases',
+          icon: 'i-lucide-brush',
+          fields: {
+            primary: field({
+              type: 'string',
+              title: 'Primary',
+              description: 'Primary color of your UI.',
+              icon: 'i-lucide-brush',
+              default: 'green',
+              required: ['sky', 'mint', 'rose', 'amber', 'violet', 'emerald', 'fuchsia', 'indigo', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow', 'green', 'blue', 'cyan', 'gray', 'white', 'black'],
+            }),
+            secondary: field({
+              type: 'string',
+              title: 'Secondary',
+              description: 'Secondary color of your UI.',
+              icon: 'i-lucide-brush',
+              default: 'sky',
+              required: ['sky', 'mint', 'rose', 'amber', 'violet', 'emerald', 'fuchsia', 'indigo', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow', 'green', 'blue', 'cyan', 'gray', 'white', 'black'],
+            }),
+            neutral: field({
+              type: 'string',
+              title: 'Neutral',
+              description: 'Neutral color of your UI.',
+              icon: 'i-lucide-brush',
+              default: 'slate',
+              required: ['slate', 'cool', 'zinc', 'neutral', 'stone'],
+            }),
+          },
+        }),
+      },
+    }),
+  },
+})

package.json

@@ -19,6 +19,11 @@
       "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
+    },
+    "./studio": {
+      "types": "./dist/studio.d.ts",
+      "import": "./dist/studio.mjs",
+      "require": "./dist/studio.cjs"
     }
   },
   "main": "./dist/module.cjs",
@@ -51,6 +56,7 @@
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "fast-glob": "^3.3.2",
+    "git-url-parse": "^15.0.0",
     "jiti": "^2.4.0",
     "knitwork": "^1.1.0",
     "listhen": "^1.9.0",
@@ -62,12 +68,16 @@
     "micromark-util-resolve-all": "^2.0.1",
     "micromark-util-sanitize-uri": "^2.0.1",
     "micromatch": "^4.0.8",
+    "nuxt-component-meta": "^0.9.0",
     "ohash": "^1.1.4",
+    "parse-git-config": "^3.0.0",
     "pathe": "^1.1.2",
+    "pkg-types": "^1.2.1",
     "remark-mdc": "latest",
     "scule": "^1.3.0",
     "shiki": "^1.23.1",
     "slugify": "^1.6.6",
+    "socket.io-client": "^4.8.1",
     "tar": "^7.4.3",
     "typescript": "^5.6.3",
     "ufo": "^1.5.4",
@@ -110,5 +120,20 @@
     "@nuxt/content": "workspace:*",
     "vue": "^3.5.12"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "unbuild": {
+    "entries": [
+      "./src/module",
+      "./src/studio"
+    ],
+    "externals": [
+      "untyped"
+    ],
+    "rollup": {
+      "output": {
+        "exports": "named"
+      },
+      "emitCJS": true
+    }
+  }
 }