feat: docs rework with Nuxt UI (#2310)

* feat: rework landing with elements (wip) * feat: update docs * chore: linter * up * up * chore: small improvements * chore: update content * docs: update name * docs: update deps * docs: force h3 version until unstorage new version is out * more improvements * docs: improvements * chore: up * up * update to new domain * up * chore: optimize images * fix 404 * fix: examples for v1 * up * docs: update * chore: update redirects * chore: move to UI Pro * chore: update gradient * ready * fix og image --------- Co-authored-by: Sébastien Chopin <seb@nuxt.com>
nuxt · Sep 21, 2023 · f2dae5b · f2dae5b
1 parent c3183ec
commit f2dae5b
Show file tree

Hide file tree

Showing 191 changed files with 6,814 additions and 11,503 deletions.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,6 +1,6 @@
 contact_links:
   - name: 📚 Documentation
-    url: https://content.nuxtjs.org/
+    url: https://content.nuxt.com/
     about: Check documentation for usage
   - name: 💬 Discussions
     url: https://github.com/nuxt/content/discussions

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![nuxt-content-social-card](https://github.com/nuxt/content/assets/904724/1cedd2ef-94fc-4210-aa84-5ab0dc449228)](https://content.nuxtjs.org)
+[![nuxt-content-social-card](https://github.com/nuxt/content/assets/904724/1cedd2ef-94fc-4210-aa84-5ab0dc449228)](https://content.nuxt.com)
 
 # Nuxt Content
 
@@ -8,29 +8,29 @@
 [![Nuxt][nuxt-src]][nuxt-href]
 [![Volta][volta-src]][volta-href]
 
-Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` or `.json` files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
+Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` or `.json` files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the [MDC syntax](https://content.nuxt.com/usage/markdown).
 
-- [📖 &nbsp;Read the documentation](https://content.nuxtjs.org)
+- [📖 &nbsp;Read the documentation](https://content.nuxt.com)
 - [👾 &nbsp;Playground](https://stackblitz.com/github/nuxt/content/tree/main/examples/essentials/hello-world?file=app.vue)
 - [✨ &nbsp;Intro video](https://www.youtube.com/watch?v=o9e12WbKrd8)
 - [✍️ &nbsp;Nuxt Studio](https://nuxt.studio)
 
 ## Features
 
 - [**Nuxt 3**](https://nuxt.com) support
-- A Markdown syntax made for Vue components ([**MDC**](https://content.nuxtjs.org/guide/writing/mdc))
+- A Markdown syntax made for Vue components ([**MDC**](https://content.nuxt.com/usage/markdown))
 - Navigation generation
-- Code highlighting with [**Shiki**](https://shiki.matsu.io)
+- Code highlighting with [**Shikiji**](https://github.com/antfu/shikiji)
 - Blazing fast hot module replacement in development
 - Powerful query builder (MongoDB like)
 - Table of contents generation
 - Also handles CSV, YAML and JSON(5)
 - Extend with hooks and content plugins
-- [... and more](https://content.nuxtjs.org)
+- [... and more](https://content.nuxt.com)
 
 ## Nuxt 2
 
-Nuxt 2 is supported with Content v1, documentation is on <https://content.nuxtjs.org/content-v1> and the code on the [v1](https://github.com/nuxt/content/tree/v1) branch.
+Nuxt 2 is supported with Content v1, documentation is on <https://content.nuxt.com/v1> and the code on the [v1](https://github.com/nuxt/content/tree/v1) branch.
 
 ## 💻 Development
 

diff --git a/docs/.env.example b/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=
+# To use Nuxt Elements in production
+NUXT_ELEMENTS_TOKEN=
+
+# Used when pre-rendering the docs for dynamic OG images
+NUXT_PUBLIC_SITE_URL=
diff --git a/docs/README.md b/docs/README.md
@@ -1,8 +1,8 @@
-[![nuxt-content](/docs/public/cover_dark.png "@nuxt/content image")](https://content.nuxtjs.org)
+[![nuxt-content](/docs/public/cover_dark.png "@nuxt/content image")](https://content.nuxt.com)
 
 # Documentation
 
-This documentation uses [Docus](https://github.com/nuxt-themes/docus).
+This documentation uses [Nuxt UI](https://ui.nuxt.com) Pro.
 
 ## 💻 Development
 

diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -1,54 +1,28 @@
 export default defineAppConfig({
-  github: {
-    owner: 'nuxt',
-    repo: 'content',
-    branch: 'main'
-  },
-  docus: {
-    title: 'Nuxt Content',
-    description: 'Write pages in markdown, use Vue components and enjoy the power of Nuxt with a blazing fast developer experience.',
-    image: 'https://content.nuxtjs.org/preview.png',
-    url: 'https://content.nuxtjs.org',
-    socials: {
-      twitter: '@nuxt_js',
-      github: 'nuxt/content'
-    },
-    github: {
-      dir: 'docs/content',
-      root: 'docs/content',
-      edit: true,
-      releases: true,
-      owner: 'nuxt',
-      repo: 'content',
-      branch: 'main'
-    },
-    cover: {
-      src: '/cover.jpg',
-      alt: 'Content made easy for Vue developers'
-    },
-    aside: {
-      level: 1
-    },
-    layout: {
-      fluid: true
-    },
-    header: {
-      logo: 'Logo',
-      exclude: ['/v1', '/content-v1', '/fr', '/ja', '/ru']
-    },
-    footer: {
-      iconLinks: [
-        {
-          label: 'NuxtJS',
-          href: 'https://nuxtjs.org',
-          icon: 'IconNuxt'
+  ui: {
+    primary: 'green',
+    gray: 'slate',
+    button: {
+      color: {
+        white: {
+          link: 'text-white dark:text-white hover:text-gray-300 dark:hover:text-gray-300 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 transition-all duration-200'
         },
-        {
-          label: 'Vue Telescope',
-          href: 'https://vuetelescope.com',
-          icon: 'IconVueTelescope'
+        transparent: {
+          outline: 'ring-1 ring-inset ring-gray-700 text-white dark:text-white hover:bg-gray-900 disabled:bg-gray-300 dark:hover:bg-gray-900 dark:disabled:bg-gray-300 focus-visible:ring-2 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-400'
         }
-      ]
+      }
+    }
+  },
+  elements: {
+    variables: {
+      light: {
+        background: '255 255 255',
+        foreground: 'var(--color-gray-700)'
+      },
+      dark: {
+        background: 'var(--color-gray-950)',
+        foreground: 'var(--color-gray-400)'
+      }
     }
   }
 })
diff --git a/docs/app.vue b/docs/app.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const route = useRoute()
+
+useServerSeoMeta({
+  ogSiteName: 'Nuxt Content',
+  twitterCard: 'summary_large_image'
+})
+
+useHead({
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+const links = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open-solid',
+  to: '/get-started/installation'
+}, {
+  label: 'Playground',
+  icon: 'i-ph-play-duotone',
+  to: '/playground'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxt/content/releases',
+  target: '_blank'
+}]
+
+const { data: files } = useLazyFetch('/api/search.json', {
+  default: () => [],
+  server: false
+})
+
+const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+const navigation = computed(() => {
+  const main = nav.value.filter(item => item._path !== '/v1')
+  const v1 = nav.value.find(item => item._path === '/v1')?.children
+
+  return route.path.startsWith('/v1/') ? v1 : main
+})
+
+// Provide
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UHeader :links="links">
+    <template #logo>
+      <Logo class="h-5 w-auto" />
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="!$colorMode.forced" />
+      <UButton
+        aria-label="Nuxt Website"
+        icon="i-simple-icons-nuxtdotjs"
+        to="https://nuxt.com"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt on X"
+        icon="i-simple-icons-x"
+        to="https://x.com/nuxt_js"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt Content on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/nuxt/content"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+    </template>
+    <!-- Mobile panel -->
+    <template v-if="$route.path !== '/'" #panel>
+      <LazyUDocsSearchButton size="md" class="mb-4 w-full" />
+      <LazyUNavigationTree :links="mapContentNavigation(navigation)" default-open :multiple="false" />
+    </template>
+  </UHeader>
+
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+
+  <UFooter :links="links">
+    <template #left>
+      <span class="text-sm">
+        Published under <NuxtLink to="https://github.com/nuxt/content" target="_blank" class="underline">
+          MIT License
+        </NuxtLink>
+      </span>
+    </template>
+    <template #right>
+      <UColorModeButton v-if="!$colorMode.forced" />
+      <UButton
+        aria-label="Nuxt Website"
+        icon="i-simple-icons-nuxtdotjs"
+        to="https://nuxt.com"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt on X"
+        icon="i-simple-icons-x"
+        to="https://x.com/nuxt_js"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt Devtools on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/nuxt/content"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+    </template>
+  </UFooter>
+  <ClientOnly>
+    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+  </ClientOnly>
+</template>
+
+<style>
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--s-dark) !important;
+  background-color: var(--s-dark-bg) !important;
+}
+</style>
diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="193" height="24" viewBox="0 0 193 24" fill="none">
+    <path
+      fill="currentColor"
+      d="M45.24 24c.26 0 .48-.215.48-.48V12.36s.6 1.08 1.68 2.88l4.68 8.04c.214.449.69.72 1.08.72h3.24V6h-3.24c-.216 0-.48.18-.48.48v11.28l-2.16-3.84L46.2 6.6c-.21-.373-.663-.6-1.08-.6H42v18h3.24ZM87.12 11.04h1.56a.72.72 0 0 0 .72-.72V7.2h3.36v3.84H96v2.88h-3.24v5.16c0 1.26.607 1.8 1.68 1.8H96V24h-2.04c-2.766 0-4.56-1.791-4.56-4.8v-5.28h-2.28v-2.88ZM70.92 11.04v7.44c0 1.68-.63 3.097-1.56 4.08-.93.983-2.212 1.44-3.96 1.44-1.748 0-3.15-.457-4.08-1.44-.913-.983-1.56-2.4-1.56-4.08v-7.44h1.92c.41 0 .812.075 1.08.36.268.27.36.428.36.84v6.24c0 .967.055 1.564.48 2.04.425.46.95.6 1.8.6.866 0 1.255-.14 1.68-.6.425-.476.48-1.073.48-2.04v-6.24c0-.412.092-.675.36-.96.235-.25.483-.245.84-.24h2.16ZM81.12 17.28l4.08-6.24h-3.12c-.393 0-.743.141-.96.48L79.2 14.4l-1.8-2.76c-.217-.339-.687-.6-1.08-.6h-3l4.08 6.12L72.96 24h3.12c.39 0 .742-.386.96-.72l2.16-3.24 2.28 3.36c.218.335.57.6.96.6h3.12l-4.44-6.72Z"
+    />
+    <path
+      fill="#00DC82"
+      d="M20.16 24h13.32c.425 0 .832-.15 1.2-.36s.748-.475.96-.84c.212-.365.36-.779.36-1.2 0-.421-.147-.835-.36-1.2l-9-15.48a2.189 2.189 0 0 0-.84-.84 2.9 2.9 0 0 0-1.32-.36c-.425 0-.832.15-1.2.36s-.628.475-.84.84l-2.28 3.96L15.6 1.2c-.213-.365-.472-.75-.84-.96-.368-.21-.775-.24-1.2-.24-.425 0-.832.03-1.2.24s-.747.595-.96.96L.24 20.4c-.213.365-.24.779-.24 1.2 0 .421.028.835.24 1.2s.592.63.96.84c.368.21.775.36 1.2.36h8.4c3.328 0 5.751-1.493 7.44-4.32l4.08-7.08 2.16-3.72 6.6 11.28h-8.76L20.16 24Zm-9.48-3.84H4.8l8.76-15.12L18 12.6l-2.941 5.127c-1.122 1.834-2.4 2.433-4.379 2.433ZM105 23.04c1.296.642 2.749.96 4.32.96 1.441 0 2.706-.235 3.84-.72a6.959 6.959 0 0 0 2.76-2.16c.696-.891 1.103-1.842 1.2-3h-2.791c-.468 0-.851.348-1.063.764-.253.496-.66.916-1.186 1.276-.761.516-1.675.72-2.76.72-.923 0-1.775-.193-2.52-.6-.729-.407-1.379-1.002-1.8-1.8-.421-.813-.6-1.738-.6-2.88s.299-2.082.72-2.88c.421-.813.976-1.453 1.705-1.86.745-.422 1.572-.54 2.495-.54 1.069 0 1.999.188 2.76.72.498.348.81.753.997 1.227.177.448.562.813 1.043.813h3c-.146-1.173-.487-2.228-1.2-3.12-.696-.891-1.61-1.555-2.76-2.04-1.134-.485-2.431-.72-3.84-.72-1.555 0-3.024.319-4.32.96-1.296.642-2.343 1.613-3.12 2.88-.761 1.267-1.08 2.777-1.08 4.56 0 1.783.319 3.293 1.08 4.56a7.46 7.46 0 0 0 3.12 2.88Z"
+    />
+    <path
+      fill="#00DC82"
+      fill-rule="evenodd"
+      d="M121.56 23.16c.988.516 2.009.84 3.24.84a7.244 7.244 0 0 0 3.36-.84c.988-.532 1.729-1.237 2.28-2.16.551-.938.84-1.962.84-3.12 0-1.157-.289-2.197-.84-3.12a5.529 5.529 0 0 0-2.28-2.16 7.06 7.06 0 0 0-3.36-.84c-1.231 0-2.252.308-3.24.84a5.529 5.529 0 0 0-2.28 2.16c-.551.923-.84 1.963-.84 3.12 0 1.158.289 2.182.84 3.12.551.923 1.292 1.628 2.28 2.16Zm5.52-2.88c-.567.61-1.373.84-2.28.84-.907 0-1.593-.23-2.16-.84-.567-.61-.84-1.43-.84-2.4 0-.985.273-1.79.84-2.4.567-.61 1.253-.96 2.16-.96.907 0 1.713.35 2.28.96.567.61.84 1.415.84 2.4 0 .97-.273 1.79-.84 2.4Z"
+      clip-rule="evenodd"
+    />
+    <path
+      fill="#00DC82"
+      d="M133.2 12h3.36v1.56a3.222 3.222 0 0 1 1.44-1.32c.648-.328 1.438-.48 2.28-.48.907 0 1.72.21 2.4.6.696.391 1.188.976 1.56 1.68.389.704.6 1.493.6 2.4V24h-2.88a.48.48 0 0 1-.48-.48v-6.36c0-.72-.283-1.346-.72-1.8-.437-.47-.984-.72-1.68-.72-.745 0-1.33.34-1.8.84-.47.485-.72 1.034-.72 1.8v6.24a.48.48 0 0 1-.48.48h-2.88V12ZM151.92 8.4h-3.36v2.88a.72.72 0 0 1-.72.72h-1.68v2.64h2.4v5.04c0 1.361.374 2.49 1.2 3.24.842.751 1.935 1.08 3.36 1.08h2.04v-2.76h-1.56c-1.15 0-1.68-.553-1.68-1.68v-4.92h3.24V12h-3.24V8.4ZM173.04 24h-3V12h3.48v1.56a3.222 3.222 0 0 1 1.44-1.32c.648-.328 1.438-.48 2.28-.48.907 0 1.72.21 2.4.6.696.391 1.187.976 1.56 1.68.389.704.6 1.493.6 2.4V24h-2.88a.48.48 0 0 1-.48-.48v-6.36c0-.72-.283-1.346-.72-1.8-.437-.47-.984-.72-1.68-.72-.745 0-1.33.22-1.8.72-.47.485-.72 1.154-.72 1.92v6.24a.48.48 0 0 1-.48.48ZM188.88 8.4h-3.36v2.88a.72.72 0 0 1-.72.72h-1.68v2.64h2.4l-.02 5.066c0 1.361.413 2.417 1.239 3.168.842.75 1.976 1.126 3.401 1.126h1.98v-2.76h-1.56c-1.15 0-1.68-.553-1.68-1.68v-4.92h3.24V12h-3.24V8.4Z"
+    />
+    <path
+      fill="#00DC82"
+      fill-rule="evenodd"
+      d="M166.32 22.8c1.053-.777 1.681-1.834 1.92-3.12H165c-.128.508-.409.93-.84 1.2-.431.254-1.01.36-1.68.36-.83 0-1.513-.244-2.04-.72-.511-.492-.832-1.183-.96-2.04h8.28a.501.501 0 0 0 .48-.48c-.002-.14-.001-.262-.001-.391l.001-.209c0-.984-.169-1.871-.6-2.76-.415-.889-1.146-1.588-2.04-2.16-.894-.571-2.019-.84-3.36-.84-1.293 0-2.33.253-3.24.84-.894.587-1.593 1.344-2.04 2.28-.431.936-.6 1.937-.6 3 0 1.047.241 2.048.72 3a5.619 5.619 0 0 0 2.04 2.28c.942.587 2.051.96 3.36.96 1.484 0 2.787-.422 3.84-1.2Zm-5.88-8.16c.447-.397 1.034-.6 1.8-.6.782 0 1.457.14 1.92.6.463.444.672 1.102.72 1.8h-5.28c.144-.825.393-1.419.84-1.8Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  image: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-between items-start bg-[#020420] p-20 pt-26 pb-16">
+    <div
+      style="position: absolute;width: 1156px;height: 1000px;left: -215px;top: -337px;background: radial-gradient(50% 50% at 50% 50%, #00DC82 0%, rgba(0, 220, 130, 0) 100%);filter: blur(180.5px);opacity: 0.5;"
+    />
+    <div>
+      <h1 class="text-8xl mb-4 text-white flex items-center">
+        <span>{{ title }}</span>
+        <img v-if="image" :src="image" class="h-20 w-20 rounded ml-8">
+      </h1>
+      <p class="text-gray-200 leading-tight pr-10" :class="description?.length > 100 ? 'text-4xl' : 'text-5xl'">
+        {{ description }}
+      </p>
+    </div>
+    <Logo class="w-[482px] h-[60px] text-white" />
+  </div>
+</template>
+
+<style scoped>
+._gradient {
+
+}
+</style>