diff --git a/docs/.eslintignore b/docs/.eslintignore new file mode 100644 index 00000000..a1bd0c80 --- /dev/null +++ b/docs/.eslintignore @@ -0,0 +1,4 @@ +dist +node_modules +.output +.nuxt \ No newline at end of file diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs new file mode 100644 index 00000000..38db3138 --- /dev/null +++ b/docs/.eslintrc.cjs @@ -0,0 +1,8 @@ +module.exports = { + root: true, + extends: '@nuxt/eslint-config', + rules: { + 'vue/max-attributes-per-line': 'off', + 'vue/multi-word-component-names': 'off' + } +} \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 00000000..69f6b69d --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,12 @@ +node_modules +*.iml +.idea +*.log* +.nuxt +.vscode +.DS_Store +coverage +dist +sw.* +.env +.output diff --git a/docs/.npmrc b/docs/.npmrc new file mode 100644 index 00000000..cf040424 --- /dev/null +++ b/docs/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..8607e02a --- /dev/null +++ b/docs/README.md @@ -0,0 +1,57 @@ +# Docus Starter + +Starter template for [Docus](https://docus.dev). + +## Clone + +Clone the repository (using `nuxi`): + +```bash +npx nuxi init -t themes/docus +``` + +## Setup + +Install dependencies: + +```bash +yarn install +``` + +## Development + +```bash +yarn dev +``` + +## Edge Side Rendering + +Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments. + +Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets). + +```bash +yarn build +``` + +## Static Generation + +Use the `generate` command to build your application. + +The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. + +```bash +yarn generate +``` + +## Preview build + +You might want to preview the result of your build locally, to do so, run the following command: + +```bash +yarn preview +``` + +--- + +For a detailed explanation of how things work, check out [Docus](https://docus.dev). diff --git a/docs/app.config.ts b/docs/app.config.ts new file mode 100644 index 00000000..642fe127 --- /dev/null +++ b/docs/app.config.ts @@ -0,0 +1,41 @@ +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: 'nuxtstudio', + github: 'nuxt-themes/docus' + }, + github: { + dir: '.starters/default/content', + branch: 'main', + repo: 'docus', + owner: 'nuxt-themes', + edit: true + }, + aside: { + level: 0, + collapsed: false, + exclude: [] + }, + main: { + padded: true, + fluid: true + }, + header: { + logo: true, + showLinkIcon: true, + exclude: [], + fluid: true + }, + footer: { + iconLinks: [ + { + href: 'https://nuxt.com', + icon: 'simple-icons:nuxtdotjs' + } + ] + } + } +}) diff --git a/docs/content/0.index.md b/docs/content/0.index.md new file mode 100644 index 00000000..d909fd85 --- /dev/null +++ b/docs/content/0.index.md @@ -0,0 +1,99 @@ +--- +title: Home +navigation: false +layout: page +main: + fluid: false +--- + +:ellipsis{right=0px width=75% blur=150px} + +::block-hero +--- +cta: + - Get started + - /introduction/getting-started +secondary: + - Open on GitHub → + - https://github.com/nuxt-themes/docus +--- + +#title +The best place to start your documentation. + +#description +Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com). + +#extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + +#support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: +:: + +::card-grid +#title +What's included + +#root +:ellipsis{left=0px width=40rem top=10rem blur=140px} + +#default + ::card{icon=logos:nuxt-icon} + #title + Nuxt Architecture + #description + Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + :: + + ::card{icon=IconNuxtStudio} + #title + Nuxt Studio ready + #description + Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). + :: + + ::card{icon=logos:vue} + #title + Vue Components + #description + Use built-in components (or your own!) inside your content. + :: + + ::card{icon=simple-icons:markdown} + #title + Write Markdown + #description + Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). + :: + + ::card{icon=noto:rocket} + #title + Deploy anywhere + #description + Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com). + :: + + ::card{icon=noto:puzzle-piece} + #title + Extensible. + #description + Customize the whole design, or add components using slots - you can make Docus your own. + :: +:: diff --git a/docs/content/1.introduction/1.getting-started.md b/docs/content/1.introduction/1.getting-started.md new file mode 100644 index 00000000..4c08c14c --- /dev/null +++ b/docs/content/1.introduction/1.getting-started.md @@ -0,0 +1,57 @@ +# 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]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank} + +## Create a new project + +1. Start a fresh Docus project with: + +```bash [npx] +npx nuxi@latest 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 +:: diff --git a/docs/content/1.introduction/2.project-structure.md b/docs/content/1.introduction/2.project-structure.md new file mode 100644 index 00000000..1446a52b --- /dev/null +++ b/docs/content/1.introduction/2.project-structure.md @@ -0,0 +1,21 @@ +# 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 + +This is the minimal directory structure to get an up and running Docus website. + +```bash +content/ + index.md +app.config.ts +nuxt.config.ts +``` + +The `content/` directory is where you [write Markdown pages](/introduction/writing-pages). + +The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design. + + +The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration). diff --git a/docs/content/1.introduction/3.writing-pages.md b/docs/content/1.introduction/3.writing-pages.md new file mode 100644 index 00000000..a3213240 --- /dev/null +++ b/docs/content/1.introduction/3.writing-pages.md @@ -0,0 +1,41 @@ +# 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 [index.md] +--- +title: "Get Started" +description: "Let's learn how to use my amazing module." +--- +``` + +| **Key** | **Type** | **Default** | **Description** | +| ----------------------- | --------- | ----------- | ------------------------------------------------------------- | +| `layout` | `string` | `default` | Use any layout name like you would in `definePageMeta()` | +| `title` | `string` | | Defines the page title and H1 in docs pages | +| `description` | `string` | | Defines the page description and excerpt in docs pages | +| `redirect` | `string` | | A route path to redirect | +| `image` | `object` | | OpenGraph cover image | +| **Docs layout options** | | | | +| `aside` | `boolean` | | Toggles the visibility of aside navigation | +| `toc` | `boolean` | | Toggles the visibility of table of contents | +| `header` | `boolean` | | Toggles the visibility of the page header | +| `bottom` | `boolean` | | Toggles the visibility of page bottom section | +| **Navigation options** | | | | +| `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 | diff --git a/docs/content/1.introduction/4.configuration.md b/docs/content/1.introduction/4.configuration.md new file mode 100644 index 00000000..cd99ce10 --- /dev/null +++ b/docs/content/1.introduction/4.configuration.md @@ -0,0 +1,146 @@ +# Configuration + +Learn how to configure Docus. + +::code-group + +```ts [Minimal app.config.ts] +export default defineAppConfig({ + docus: { + title: 'Docus', + description: 'My Docus Project', + url: 'http://docus.dev' + } +}) +``` + +```ts [Complete app.config.ts] +export default defineAppConfig({ + docus: { + title: 'Docus', + description: 'My Docus Project', + url: 'http://docus.dev', + image: '/social-card-preview.png', + socials: { + twitter: '@docus_', + github: 'nuxtlabs/docus', + }, + github: { + root: 'content', + edit: true, + contributors: false + }, + layout: 'default', + aside: { + level: 1, + filter: [], + }, + header: { + title: false, + logo: true, + showLinkIcon: false + }, + footer: { + credits: { + icon: 'IconDocus', + text: 'Powered by Docus', + href: 'https://docus.dev', + }, + textLinks: [ + { + text: 'Nuxt', + href: 'https://nuxt.com', + target: '_blank', + rel: 'noopener' + } + ], + iconLinks: [ + { + label: 'NuxtJS', + href: 'https://nuxtjs.org', + component: 'IconNuxtLabs', + }, + { + label: 'Vue Telescope', + href: 'https://vuetelescope.com', + component: 'IconVueTelescope', + }, + ], + } + } +}) +``` + +:: + +| **Key** | **Type** | **Default** | **Description** | +| ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- | +| `title` | `string` | Docus | Website title | +| `titleTemplate` | `string` | Docus | Website title template | +| `description` | `string` | My Docus Project | Website description | +| `url` | `string` | | Website URL | +| `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) | +| **Socials** | | | | +| `socials` | `object` | `{}` | Social links | +| `socials.github` | `string` | | The repository to use on GitHub links | +| `socials.twitter` | `string` | | The account to use on Twitter links | +| `socials.youtube` | `string` | | The channel to use on Youtube links | +| `socials.instagram` | `string` | | The account to use on Instagram links | +| `socials.facebook` | `string` | | The account to use on Facebook links | +| `socials.medium` | `string` | | The account to use on Medium links | +| `socials.[social]` | `object` | | Override social or display custom one | +| `socials.[social].label` | `string` | | A label to use for the social | +| `socials.[social].icon` | `string` | | A icon to use for the social | +| `socials.[social].href` | `string` | | A link to use for the social | +| `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | +| **Header** | | | | +| `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.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 | +| `header.fluid` | `boolean` | `true` | Make header `Container` fluid | +| **Main** | | | | +| `main` | `object` | | Main configuration | +| `main.fluid` | `boolean` | `true` | Make main content `Container` fluid | +| `main.padded` | `boolean` | `true` | Make main content `Container` padded | +| **Aside** | | | | +| `aside` | `object` | | Aside configuration | +| `aside.level` | `string` | 0 | Aside base level of nesting | +| `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories | +| `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation | +| **Footer** | | | | +| `footer` | `object` | | Footer configuration | +| `footer.credits` | `object` | | An object defining the bottom left credits | +| `footer.credits.icon` | `object` | | The icon to use for the credits | +| `footer.credits.text` | `object` | | The text to use for the credits | +| `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer | +| `footer.textLinks[0].text` | `string` | | The text to display | +| `footer.textLinks[0].href` | `string` | | A link to use for the text | +| `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context | +| `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | +| `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer | +| `footer.iconLinks[0].label` | `string` | | A label to use for the icon | +| `footer.iconLinks[0].href` | `string` | | A link to use for the icon | +| `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) | +| `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | +| `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid | +| **GitHub** | | | | +| `github` | `object` | `false` | GitHub integration configuration | +| `github.dir` | `string` | | Directory containing the files to be edited | +| `github.branch` | `string` | | Branch to start editing | +| `github.repo` | `string` | | Name of the GitHub repo to edit files | +| `github.owner` | `string` | | Owner of the repo | +| `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages | + +## Customizing the logo + +To update the logo in the header, create a component in `components/Logo.vue` with your own logo. + +In this example, the image is located at `/public/img`. + +```vue [components/Logo.vue] + +``` diff --git a/docs/content/1.introduction/_dir.yml b/docs/content/1.introduction/_dir.yml new file mode 100644 index 00000000..ff0894da --- /dev/null +++ b/docs/content/1.introduction/_dir.yml @@ -0,0 +1,2 @@ +icon: ph:star-duotone +navigation.redirect: /introduction/getting-started diff --git a/docs/content/2.api/1.components.md b/docs/content/2.api/1.components.md new file mode 100644 index 00000000..74b17d87 --- /dev/null +++ b/docs/content/2.api/1.components.md @@ -0,0 +1,693 @@ +# Components + +Discover every component you can use in your content. + + +## `` + +::code-group + + ::code-block{label="Preview" preview} + ::alert{type="info" style="margin-top: 0;"} + Check out an **info** alert with `code` and a [link](/). + :: + + ::alert{type="success"} + Check out a **success** alert with `code` and a [link](/). + :: + + ::alert{type="warning"} + Check out a **warning** alert with `code` and a [link](/). + :: + + ::alert{type="danger" style="margin-bottom: 0;"} + Check out a **danger** alert with `code` and a [link](/). + :: + :: + + ```md [Code] + ::alert{type="info"} + Check out an **info** alert with `code` and a [link](/). + :: + + ::alert{type="success"} + Check out a **success** alert with `code` and a [link](/). + :: + + ::alert{type="warning"} + Check out a **warning** alert with `code` and a [link](/). + :: + + ::alert{type="danger"} + Check out a **danger** alert with `code` and a [link](/). + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Alert.vue" +--- +:: + +--- + +## `` + +`` support same types as ``. + +::code-group + + ::code-block{label="Preview" preview} + ::div{style="display:flex; gap: 1rem;"} + :badge[v1.2] + + :badge[Deprecated]{type="warning"} + + ::badge{type="danger"} + Not found! + :: + :: + :: + + ```md [Code] + :badge[v1.2] + + :badge[Deprecated]{type="warning"} + + ::badge{type="danger"} + Not found! + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Badge.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview"} + ::block-hero + --- + cta: + - Get started + - /introduction/getting-started + secondary: + - Open on GitHub → + - https://github.com/nuxtlabs/docus + snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter + --- + #title + Document-driven framework + + #description + Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. + :: + :: + + ```md [Code] + ::block-hero + --- + cta: + - Get started + - /get-started + secondary: + - Open on GitHub → + - https://github.com/nuxtlabs/docus + snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter + --- + #title + Document-driven framework + + #description + Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/BlockHero.vue" +--- +:: + +--- + +## `` +::code-group + + ::code-block{label="Preview" preview} + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + :: + + ```md [Code] + :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} + ``` + +:: + + + +::source-link +--- +source: "components/content/ButtonLink.vue" +--- +:: + +--- + +## `` + +`` support same types as ``. + +::code-group + + ::code-block{label="Preview"} + ::callout + #summary + This is a callout! Click me to open. + + #content + This is the content of the callout. + :: + + ::callout{type="warning"} + #summary + This is a callout! Click me to open. + + #content + This is the content of the callout. + :: + :: + + ```md [Code] + ::callout + #summary + This is a callout! Click me to open. + + #content + This is the content of the callout. + :: + + ::callout{type="warning"} + #summary + This is a callout! Click me to open. + + #content + This is the content of the callout. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Callout.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview"} + ::card + --- + icon: logos:nuxt-icon + --- + #title + Nuxt Architecture. + #description + Based on **Nuxt 3** and **Nuxt Content**. :br + Use Nuxt to build a static site, or a serverless app. + :: + :: + + ```md [Code] + ::card{icon="logos:nuxt-icon"} + #title + Nuxt Architecture. + #description + Based on **Nuxt 3** and **Nuxt Content**. :br + Use Nuxt to build a static site, or a serverless app. + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/Card.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview"} + ::card-grid + #title + What's included? + + #root + :ellipsis + + #default + ::card + #title + Nuxt Architecture. + #description + Harness the full power of Nuxt and the Nuxt ecosystem. + :: + ::card + #title + Vue Components. + #description + Use built-in components (or your own!) inside your content. + :: + ::card + #title + Write Markdown. + #description + Enjoy the ease and simplicity of Markdown and discover MDC syntax. + :: + :: + :: + + ```md [Code] + ::card-grid + #title + What's included + + #root + :ellipsis + + #default + ::card + #title + Nuxt Architecture. + #description + Harness the full power of Nuxt and the Nuxt ecosystem. + :: + ::card + #title + Vue Components. + #description + Use built-in components (or your own!) inside your content. + :: + ::card + #title + Write Markdown. + #description + Enjoy the ease and simplicity of Markdown and discover MDC syntax. + :: + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/CardGrid.vue" +--- +:: + +--- + +## `` + +This component uses `slots` to create a tab panel of your code examples or preview. + +::code-group + + ::code-block{label="Preview" preview} + ::code-group + ```bash [Yarn] + yarn add docus + ``` + + ```bash [NPM] + npm install docus + ``` + :: + :: + + ```md [Code] + ::code-group + ```bash [Yarn] + yarn add docus + ``` + ```bash [NPM] + npm install docus + ``` + :: + ``` + +:: + +::source-link +--- +source: "components/content/CodeGroup.vue" +--- +:: + +--- + +## `` + +To be used inside a `` component to display a preview of some rendered code. + +::code-group + +::code-block{label="Preview" preview} + ::badge + Hello World! + :: +:: + +```md [Code] +/* Added as a child of `` */ + +::code-block{label="Preview" preview} + ::badge + Hello World! + :: +:: +``` + +:: + + + +::source-link +--- +source: "components/content/CodeBlock.vue" +--- +:: + +--- + +## `` + + +::code-group + +::code-block{label="Preview" preview} + :copy-button{content="hey!"} +:: + +```md [Code] +:copy-button{content="hey!"} +``` + +:: + + + +::source-link +--- +source: "components/content/CopyButton.vue" +--- +:: + +--- + +## `` + +Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org). + +::code-group + + ::code-block{label="Preview" preview} + :icon{name="logos:nuxt-icon"} + :icon{name="logos:vue"} + :icon{name="logos:nuxt-icon"} + :: + + ```md [Code] + :icon{name="logos:nuxt-icon"} + :icon{name="logos:vue"} + :icon{name="logos:nuxt-icon"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Icon.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview" preview} + ::list{type="primary"} + - **Important** + - Always + :: + + ::list{type="success"} + - Amazing + - Congrats + :: + + ::list{type="info"} + - Do you know? + - You can also do this + :: + + ::list{type="warning"} + - Be careful + - Use with precautions + :: + + ::list{type="danger"} + - Drinking too much + - Driving drunk + :: + + :: + + ```md [Code] + ::list{type="primary"} + - **Important** + - Always + :: + + ::list{type="success"} + - Amazing + - Congrats + :: + + ::list{type="info"} + - Do you know? + - You can also do this + :: + + ::list{type="warning"} + - Be careful + - Use with precautions + :: + + ::list{type="danger"} + - Drinking too much + - Driving drunk + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/List.vue" +--- +:: + + +## `` + +Embed CodeSandbox/StackBlitz easily in your documentation with great performances. + +Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. + +::code-group + + ::code-block{label="Preview" preview} + :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} + :: + + ```md [Code] + :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Sandbox.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview" preview} + :terminal{content="nuxi build"} + :: + + ```md [Code] + :terminal{content="nuxi build"} + ``` + +:: + + + +::source-link +--- +source: "components/content/Terminal.vue" +--- +:: + +--- + +## `` + +::code-group + + ::code-block{label="Preview" preview} + ::div + :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} + :: + :: + + ```md [Code] + ::div + :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} + :: + ``` + +:: + + + +::source-link +--- +source: "components/content/VideoPlayer.vue" +--- +:: diff --git a/docs/content/2.api/2.composables.md b/docs/content/2.api/2.composables.md new file mode 100644 index 00000000..4c0bea24 --- /dev/null +++ b/docs/content/2.api/2.composables.md @@ -0,0 +1,88 @@ +# Composables + +Discover the Docus composables to use in your custom Vue components and pages. + +## `useDocus()` + +`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts` + +- `config` refers to the merged config of the current page. + +`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file. + +The configs in `app.config` file will be used as defaults. + +```vue + + + +``` + +- `tree` refers to the current navigation tree that is displayed in the `aside` component. + +```vue + + + +``` + +::source-link +--- +source: "composables/useDocus.ts" +--- +:: + +## `useMenu()` + +`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally. + +```ts +const { + // Is menu visible + visible, + // Close menu function + close, + // Open menu function + open, + // Toggle menu function + toggle +} = useMenu() +``` + +::source-link +--- +source: "composables/useMenu.ts" +--- +:: + +## `useScrollspy()` + +`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings. + +```ts +const { + // Headings on the page + visibleHeadings, + // Active headings (for the current page) + activeHeadings, + // Update headings (an array of DOM nodes) + updateHeadings +} = useScrollspy() +``` + +::source-link +--- +source: "composables/useScrollspy.ts" +--- +:: diff --git a/docs/content/2.api/3.layouts.md b/docs/content/2.api/3.layouts.md new file mode 100644 index 00000000..25dc4583 --- /dev/null +++ b/docs/content/2.api/3.layouts.md @@ -0,0 +1,43 @@ +# Layouts +Docus provides multiple built-in layouts for displaying your Markdown pages. + +## `default` + +The default layout for every page created in the project. This layout renders multiple section alongside the content: + +- Aside navigation menu (togglable with `aside: false/true`) +- Page bottom section (togglable with `bottom: false/true`) +- Table of content (togglable with `toc: false/true`) + +```md [index.md] +--- +aside: true +bottom: true +toc: false +--- + +Your awesome content +``` + +Current page is live sample of default layout. + +## `page` + +`page` layout is content focused layout. This layout does not render aside menu of table of contents. + + +This layout accept some configuration from content front-matter. + +- `fluid`: By setting `fluid: true` in content front-matter the content will be rendered in full width. +- `constrainedClass`: Using this option you can modify layout container look. Like constraining layout width of changing the background. +- `padded`: Setting `padded: true` in front-matter will add horizontal padding in the layout. + +```md [index.md] +--- +title: Home +layout: page +fluid: true +--- +``` + +Check [Home page](/) as live sample of page layout diff --git a/docs/content/2.api/_dir.yml b/docs/content/2.api/_dir.yml new file mode 100644 index 00000000..b340141b --- /dev/null +++ b/docs/content/2.api/_dir.yml @@ -0,0 +1,2 @@ +title: 'API' +icon: heroicons-outline:bookmark-alt diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts new file mode 100644 index 00000000..dd1ec769 --- /dev/null +++ b/docs/nuxt.config.ts @@ -0,0 +1,11 @@ +export default defineNuxtConfig({ + // https://github.com/nuxt-themes/docus + extends: '@nuxt-themes/docus', + + modules: [ + // https://github.com/nuxt-modules/plausible + '@nuxtjs/plausible', + // https://github.com/nuxt/devtools + '@nuxt/devtools' + ] +}) diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 00000000..0bcfdc44 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,21 @@ +{ + "name": "docus-starter", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "nuxi dev", + "build": "nuxi build", + "generate": "nuxi generate", + "preview": "nuxi preview", + "lint": "eslint ." + }, + "devDependencies": { + "@nuxt-themes/docus": "^1.12.1", + "@nuxt/devtools": "^0.5.5", + "@nuxt/eslint-config": "^0.1.1", + "@nuxtjs/plausible": "^0.2.1", + "@types/node": "^20.2.5", + "eslint": "^8.42.0", + "nuxt": "^3.5.3" + } +} diff --git a/docs/public/cover.png b/docs/public/cover.png new file mode 100644 index 00000000..c8b34731 Binary files /dev/null and b/docs/public/cover.png differ diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico new file mode 100644 index 00000000..dfe41635 Binary files /dev/null and b/docs/public/favicon.ico differ diff --git a/docs/renovate.json b/docs/renovate.json new file mode 100644 index 00000000..75ac0dd3 --- /dev/null +++ b/docs/renovate.json @@ -0,0 +1,8 @@ +{ + "extends": [ + "@nuxtjs" + ], + "lockFileMaintenance": { + "enabled": true + } +} diff --git a/docs/tokens.config.ts b/docs/tokens.config.ts new file mode 100644 index 00000000..b80da0a3 --- /dev/null +++ b/docs/tokens.config.ts @@ -0,0 +1,4 @@ +import { defineTheme } from 'pinceau' + +export default defineTheme({ +}) diff --git a/docs/tsconfig.json b/docs/tsconfig.json new file mode 100644 index 00000000..4b34df15 --- /dev/null +++ b/docs/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.nuxt/tsconfig.json" +}