feat: move to pinceau (#645)

Co-authored-by: Yaël GUILLOUX <[email protected]>

.docs/app.config.ts

@@ -0,0 +1,32 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Docus',
+    description: 'The best place to start your documentation.',
+    image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+    socials: {
+      twitter: '_docus',
+      github: 'nuxt-themes/docus',
+    },
+    aside: {
+      level: 1,
+      exclude: []
+    },
+    header: {
+      logo: true,
+      showLinkIcon: true,
+      exclude: []
+    },
+    footer: {
+      iconLinks: [
+        {
+          href: 'https://nuxt.com',
+          icon: 'IconNuxtLabs'
+        },
+        {
+          href: 'https://vuetelescope.com',
+          icon: 'IconVueTelescope'
+        }
+      ]
+    }
+  }
+})

template/content/0.index.md → .docs/content/0.index.md

@@ -9,7 +9,7 @@ fuild: true
 ---
 cta:
   - Get started
-  - /get-started
+  - /introduction/getting-started
 secondary:
   - Open on GitHub →
   - https://github.com/nuxtlabs/docus
@@ -21,6 +21,16 @@ The best place to start your documentation.
 
 #description
 Write pages in markdown, use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxtjs.org) with a blazing fast developer experience.
+
+#extra
+  ::list
+  - **+50 Components** ready to build rich documentations
+  - **Layouts**: landing, docs, blog, ...
+  - Generated navigation
+  - Table of contents support
+  - Configurable design system integration
+  - Light & Dark mode integration
+  ::
 ::
 
 ::card-grid
@@ -52,7 +62,7 @@ What's included
   Tailwind is built in for great developer experience and rapid customization.
   ::
 
-  ::card{icon=IconMarkdown}
+  ::card{icon=simple-icons:markdown}
   #title
   Write Markdown
   #description

.docs/content/1.introduction/1.getting-started.md

@@ -0,0 +1,64 @@
+# Getting Started
+
+From your Markdown files to a deployed website in few minutes.
+
+## Play online
+
+You can start playing with Docus in your browser using Stackblitz:
+
+:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank .mr-2}
+
+## Create a new project
+
+1. Start a fresh Docus project with:
+
+```bash [npx]
+npx nuxi init docs -t themes/docus
+```
+
+2. Install the dependencies in the `docs` folder:
+
+::code-group
+
+  ```bash [npm]
+  npm install
+  ```
+
+  ```bash [yarn]
+  yarn install
+  ```
+
+  ```bash [pnpm]
+  pnpm install --shamefully-hoist
+  ```
+
+::
+
+3. Run the `dev` command to start Docus in development mode:
+
+::code-group
+
+```bash [npm]
+npm run dev
+```
+
+```bash [yarn]
+yarn dev
+```
+
+```bash [pnpm]
+pnpm run dev
+```
+
+::
+
+::alert{type="success"}
+✨ Well done! A browser window should automatically open for <http://localhost:3000>
+::
+
+
+::alert{type="info"}
+The starter uses the [Docs Theme](/guide/features).
+<br/>
+Check out the [Guide section](/guide/theming/usage) about theming to change it.
+::

.docs/content/1.introduction/2.project-structure.md

@@ -0,0 +1,12 @@
+# Project Structure
+
+Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
+
+## Directory Structure
+
+```bash
+content/
+  index.md
+app.config.ts
+nuxt.config.ts
+```

template/content/2.guide/4.front-matter.md → .docs/content/1.introduction/3.writing-pages.md

@@ -1,8 +1,22 @@
-# Front-matter
+# Writing Pages
+
+Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
+
+Each Markdown pages in the `content/` folder will be mapped to a route.
+
+| File | Generated route |
+| ----------------- | :-------- |
+| `index.md` | `/` |
+| `about.md` | `/about` |
+| `blog/index.md` | `/blog` |
+| `blog/hello.md` | `/blog/hello` |
+| `1.guide/2.installation` | `/guide/installation` |
+
+## Frontmatter
 
 Docus supports multiple Front-matter attributes for pages.
 
-```md
+```md [index.md]
 ---
 title: "Get Started"
 description: "Let's learn how to use my amazing module."
@@ -25,3 +39,5 @@ description: "Let's learn how to use my amazing module."
 | `navigation`            | `boolean` |             | Toggles the visibility of the page or directory in navigation |
 | `navigation.title`      | `string`  |             | Changes the name of the page or directory in navigation       |
 | `navigation.icon`       | `string`  |             | Changes the icon of the page or directory in navigation       |
+
+```md

template/content/2.guide/2.configuration.md → .docs/content/1.introduction/4.configuration.md

@@ -39,7 +39,7 @@ export default defineAppConfig({
     header: {
       title: false,
       logo: true,
-      showLinksIcons: false
+      showLinkIcon: false
     },
     footer: {
       credits: {
@@ -89,7 +89,7 @@ export default defineAppConfig({
 | `header`                    | `object`   |                  | Header configuration                                                |
 | `header.logo`               | `boolean`  |                  | Whether or not to use `Logo.vue` as the header logo                 |
 | `header.title`              | `string`   |                  | If set to a string, will be used in the header                      |
-| `header.showLinksIcons`     | `boolean`  |                  | If set to `true` links icons will show in the header                |
+| `header.showLinkIcon`     | `boolean`  |                  | If set to `true` links icons will show in the header                |
 | `header.exclude`            | `string[]` |                  | An array of path to exclude out from the header navigation          |
 | **Aside**                   |            |                  |                                                                     |
 | `aside`                     | `object`   |                  | Aside configuration                                                 |

.docs/content/1.introduction/_dir.yml

@@ -0,0 +1,2 @@
+icon: ph:star-duotone
+navigation.redirect: /get-started/installation

template/content/3.api/1.components.md → .docs/content/3.api/1.components.md

@@ -1,6 +1,6 @@
 # Components
 
-Discover every component from the docs-theme package.
+Discover every component you can use in your content.
 
 
 ## `<Alert />`

.docs/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  extends: '../',
+  modules: ['@nuxthq/studio']
+})

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@nuxtjs/eslint-config-typescript"
+  "extends": "@nuxtjs/eslint-config-typescript",
+  "rules": {
+    "vue/multi-word-component-names": false
+  }
 }

.playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  docus: {
+    title: 'MDC'
+  }
+})

.playground/components/content/CounterButton.vue

@@ -0,0 +1,17 @@
+<script setup>
+const count = ref(0)
+</script>
+
+<template>
+  <button @click="count++">
+    {{ count }}
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: 1px #ddd solid;
+  padding: 3px 10px;
+  border-radius: 5px;
+}
+</style>

.playground/content/0.index.md

@@ -0,0 +1,20 @@
+# Markdown meets Vue Components
+
+MDC is Markdown with a way to use Vue components with a `:component` syntax fitting perfectly into your markup. No import needed, just use the component name as a tag, supporting props and slots. Writing interative content with Vue is now a breeze.
+
+::code-group
+
+```md [MDC]
+# Hello MDC
+
+I am using an inline component :counter-button.
+```
+::code-block{label="Preview" preview}
+  # Hello MDC
+
+I am using an inline component :counter-button.
+::
+
+::
+
+COucou ca va

.playground/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  extends: '../',
+  modules: ['@nuxthq/studio']
+})

app.config.ts

@@ -0,0 +1,70 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Docus',
+    description: 'The best place to start your documentation.',
+    image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+    socials: {
+      twitter: '@nuxt_js',
+      github: 'https://github.com/nuxt-themes/docus',
+      // facebook: '',
+      // instagram: '',
+      // youtube: '',
+      // medium: ''
+    },
+    aside: {
+      level: 1,
+      exclude: []
+    },
+    header: {
+      title: '',
+      logo: false, // TODO: handle logo as string for component
+      showLinkIcon: false, // Toggle links icons in the header
+      exclude: []
+    },
+    footer: {
+      credits: {
+        icon: 'IconDocus',
+        text: 'Powered by Docus',
+        href: 'https://docus.dev'
+      }
+    }
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    docus?: {
+      title?: string
+      description?: string
+      image?: string
+      socials?: {
+        twitter?: string
+        github?: string
+        facebook?: string
+        instagram?: string
+        youtube?: string
+        medium?: string
+      },
+      aside?: {
+        level: number
+        exclude?: string[]
+      },
+      header?: {
+        title?: string,
+        logo?: boolean
+        showLinkIcon?: boolean
+        exclude?: string[]
+      },
+      footer?: {
+        credits?: boolean
+        iconLinks?: IconLink[]
+      }
+    }
+  }
+}
+
+interface IconLink {
+  href: string
+  icon: string
+  label?: string
+}

theme/assets/css/main.css → assets/css/main.css

@@ -217,6 +217,13 @@
   box-shadow: none !important;
 }
 
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
 body {
   @apply overflow-y-scroll antialiased text-gray-700 bg-white dark:text-gray-200 dark:bg-black;
   font-family: var(--fonts-primary);