feat(docs): upgrade to docus v2

nuxt · Jun 28, 2023 · cee135e · cee135e
1 parent 2e71c6d
commit cee135e
Show file tree

Hide file tree

Showing 6 changed files with 282 additions and 168 deletions.
diff --git a/docs/components/content/V1DocsLinks.vue b/docs/components/content/V1DocsLinks.vue
@@ -2,17 +2,16 @@
   <div class="wrapper">
     <h4>Looking for v1 documentation ?</h4>
     <div class="links-wrapper">
-      <button-link href="/v1/getting-started/introduction" :transparent="true" color="false" size="large">
+      <button-link href="/v1/getting-started/introduction" :transparent="true" size="large">
         English
       </button-link>
-      <button-link href="/fr/v1/getting-started/introduction" :transparent="true" color="false" class="ml-2" size="large">
+      <button-link href="/fr/v1/getting-started/introduction" :transparent="true" class="ml-2" size="large">
         French
       </button-link>
-      <button-link href="/ja/v1/getting-started/introduction" :transparent="true" color="false" class="ml-2" size="large">
+      <button-link href="/ja/v1/getting-started/introduction" :transparent="true" class="ml-2" size="large">
         Japanese
       </button-link>
     </div>
-    <ellipsis />
   </div>
 </template>
 

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -2,104 +2,127 @@
 title: "Content made easy for Vue developers"
 description: "The file-based CMS for your Nuxt application, powered by Markdown and Vue components."
 navigation: false
-layout: page
+layout: basic
 ---
 
-::block-hero
+::glow
 ---
-cta:
-  - Get Started
-  - /get-started
-secondary:
-  - Star on GitHub
-  - https://github.com/nuxt/content
+top: calc(0px - var(--docus-app-header-height))
+height: calc(var(--hero-height) + var(--docus-app-header-height) + 20rem) 
+maskGradient: 
+  light: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
+  dark: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 85%)
+gradient:
+  light:
+    initial: radial-gradient(circle at 10% 50%, {color.secondary.500} 4%, {color.primary.200} 25%, {color.primary.500} 65%)
+    xl: radial-gradient(circle at 10% 50%, {color.secondary.200} 15%, {color.primary.500} 60%, {color.primary.400} 55%, {color.primary.400} 75%, {color.secondary.500} 90%)
+  dark:
+    initial: radial-gradient(circle at 10% 50%, {color.secondary.500}, {color.primary.500} 45%, {color.primary.200} 82%)
+    xl: radial-gradient(circle at 10% 50%, {color.secondary.700} 15%, {color.primary.500} 60%, {color.primary.600} 55%, {color.primary.600} 75%, {color.secondary.500} 90%)
+noise: true
+backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
 ---
+::
 
-#announce
-  ::hero-announcement
-  ---
-  label: "Discover the Document Driven mode"
-  to: /guide/writing/document-driven
-  ---
-  ::
+::container-section
+  ::hero
 
-#title
-Content made easy for Vue Developers
+  #announce
+    ::announce{href=/guide/writing/document-driven}
+    Discover the Document Driven mode
+    ::
 
-#description
-Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` and `.json` files to create a powerful data layer for your application. Use Vue components in Markdown with the [MDC syntax](/guide/writing/mdc).
+  #title
+  Content made easy for Vue Developers
+
+  #description
+  Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` and `.json` files to create a powerful data layer for your application. Use Vue components in Markdown with the [MDC syntax](/guide/writing/mdc).
+
+  #actions
+    ::button-link{href=/get-started size=medium}
+    Get started
+    ::
+    ::button-link{href=https://github.com/nuxt/content size=medium color=gray ghost blank}
+    Open on GitHub →
+    ::
+
+  #support
+  :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" .border-2 .u-border-gray-100 .shadow-lg .h-64}
+  ::
 
-#support
-:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" .border-2 .u-border-gray-100 .shadow-lg .h-64}
 ::
 
-::card-grid
-#title
-Powerful Features
 
+::container-section{margin="{space.24} 0" padding="{space.24} 0"}
 #default
-  ::card
-  ---
-  icon: simple-icons:nuxtdotjs
-  ---
-  #title
-  Built for Nuxt 3
-  #description
-  Take advantage of Nuxt 3 features: Vue 3, Auto-imports, Vite and Nitro server.
-  ::
+  :section-header{title="What's included" subtitle="Features"}
+
+  ::card-grid
 
-  ::card
-  ---
-  icon: ph:file
-  ---
-  #title
-  File-based CMS
-  #description
-  Write your content in Markdown, YML, CSV or JSON and query it in your components.
-  ::
+  #default
+    ::card
+    ---
+    icon: simple-icons:nuxtdotjs
+    ---
+    #title
+    Built for Nuxt 3
+    #description
+    Take advantage of Nuxt 3 features: Vue 3, Auto-imports, Vite and Nitro server.
+    ::
 
-  ::card
-  ---
-  icon: ph:funnel
-  ---
-  #title
-  Query Builder
-  #description
-  Query your content with a MongoDB-like API to fetch the right data at the right time.
-  ::
+    ::card
+    ---
+    icon: ph:file
+    ---
+    #title
+    File-based CMS
+    #description
+    Write your content in Markdown, YML, CSV or JSON and query it in your components.
+    ::
 
-  ::card
-  ---
-  icon: IconMarkdown
-  ---
-  #title
-  MDC Syntax
-  #description
-  Use your Vue components in Markdown files, supporting props, slots and nested components.
-  ::
+    ::card
+    ---
+    icon: ph:funnel
+    ---
+    #title
+    Query Builder
+    #description
+    Query your content with a MongoDB-like API to fetch the right data at the right time.
+    ::
 
-  ::card
-  ---
-  icon: ph:scan
-  ---
-  #title
-  Code highlighting
-  #description
-  Display beautiful code blocks on your website with the Shiki integration supporting VS Code themes.
-  ::
+    ::card
+    ---
+    icon: IconMarkdown
+    ---
+    #title
+    MDC Syntax
+    #description
+    Use your Vue components in Markdown files, supporting props, slots and nested components.
+    ::
 
-  ::card
-  ---
-  icon: ph:rocket-launch
-  ---
-  #title
-  Deploy everywhere.
-  #description
-  Nuxt Content support both Static or Node server hosting.
-  ::
+    ::card
+    ---
+    icon: ph:scan
+    ---
+    #title
+    Code highlighting
+    #description
+    Display beautiful code blocks on your website with the Shiki integration supporting VS Code themes.
+    ::
 
-#root
-:ellipsis
+    ::card
+    ---
+    icon: ph:rocket-launch
+    ---
+    #title
+    Deploy everywhere.
+    #description
+    Nuxt Content support both Static or Node server hosting.
+    ::
 ::
 
 :v1-docs-links
diff --git a/docs/content/9.content-v1.md b/docs/content/9.content-v1.md
@@ -4,22 +4,20 @@ layout: docs-page
 fluid: true
 ---
 
-::div{.w-full .min-h-page .relative .text-center .overflow-x-hidden}
+::div
   # @nuxt/content v1 documentation is still available!
 
-  ::div{.flex .justify-center}
+  ::div
     ::button-link{href="/v1/getting-started/introduction" size="large"}
     English
     ::
 
-    ::button-link{href="/fr/v1/getting-started/introduction" .ml-2 size="large"}
+    ::button-link{href="/fr/v1/getting-started/introduction" size="large"}
     French
     ::
 
-    ::button-link{href="/ja/v1/getting-started/introduction" .ml-2 size="large"}
+    ::button-link{href="/ja/v1/getting-started/introduction" size="large"}
     Japanese
     ::
   ::
-
-  :ellipsis{.-z-[1]}
 ::
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -75,16 +75,6 @@ export default defineNuxtConfig({
       documentDriven: {
         host: 'https://content.nuxtjs.org'
       }
-    },
-    public: {
-      algolia: {
-        applicationId: '',
-        apiKey: '',
-        langAttribute: 'lang',
-        docSearch: {
-          indexName: 'content-nuxtjs'
-        }
-      }
     }
   }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.1",
-    "@nuxt-themes/docus": "^1.12.3",
+    "@nuxt-themes/docus": "^2.0.0-beta.13",
     "@nuxthq/studio": "^0.13.2",
     "@nuxtlabs/github-module": "^1.6.3",
     "monaco-editor-core": "^0.39.0",