commit 2540bc968f193bf14c8edb80008fc87226898988 Author: Djeex Date: Sat Jul 19 13:59:44 2025 +0000 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..767e535 --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea +.eslintcache + +# Local env files +.env +.env.* +!.env.example + +# Template +template/pnpm-lock.yaml + +# npm pack +*.tgz + +# Temp files +.tmp +.profile +*.0x + +#VSC +.history \ No newline at end of file diff --git a/.release-it.json b/.release-it.json new file mode 100644 index 0000000..1f4fa3e --- /dev/null +++ b/.release-it.json @@ -0,0 +1,24 @@ +{ + "git": { + "commitMessage": "chore(release): v${version}", + "tagName": "v${version}" + }, + "github": { + "release": true, + "releaseName": "v${version}", + "web": true + }, + "hooks": { + "before:init": ["pnpm lint"] + }, + "plugins": { + "@release-it/conventional-changelog": { + "preset": { + "name": "conventionalcommits" + }, + "infile": "CHANGELOG.md", + "header": "# Changelog", + "ignoreRecommendedBump": true + } + } +} \ No newline at end of file diff --git a/.starter/.gitignore b/.starter/.gitignore new file mode 100644 index 0000000..fc62419 --- /dev/null +++ b/.starter/.gitignore @@ -0,0 +1,40 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea +.eslintcache + +# Local env files +.env +.env.* +!.env.example + +# Template +template/pnpm-lock.yaml + +# npm pack +*.tgz + +# Temp files +.tmp +.profile +*.0x + +#VSC +.history +.wrangler \ No newline at end of file diff --git a/.starter/content/1.getting-started/.navigation.yml b/.starter/content/1.getting-started/.navigation.yml new file mode 100644 index 0000000..6dca48e --- /dev/null +++ b/.starter/content/1.getting-started/.navigation.yml @@ -0,0 +1,2 @@ +title: Getting Started +icon: false diff --git a/.starter/content/1.getting-started/2.introduction.md b/.starter/content/1.getting-started/2.introduction.md new file mode 100644 index 0000000..3a2f2b9 --- /dev/null +++ b/.starter/content/1.getting-started/2.introduction.md @@ -0,0 +1,54 @@ +--- +title: Introduction +description: Welcome to Docus theme documentation. +navigation: + icon: i-lucide-house +seo: + title: Introduction + description: Discover how to create, manage, and publish documentation + effortlessly with Docus. +--- + +Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro). + +## What is Docus? + +Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com). + +We use this theme across all our Nuxt module documentations, including: + +::card-group + :::card + --- + icon: i-simple-icons-nuxtdotjs + target: _blank + title: Nuxt Image + to: https://image.nuxt.com + --- + The documentation of `@nuxt/image` + ::: + + :::card + --- + icon: i-simple-icons-nuxtdotjs + target: _blank + title: Nuxt Supabase + to: https://supabase.nuxtjs.org + --- + The documentation of `@nuxt/supabase` + ::: +:: + +## Key Features + +This theme includes a range of features designed to improve documentation management: + +- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance. +- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components. +- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content. +- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required! +- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure. +- **Full-Text Search**: Includes built-in search functionality for content discovery. +- **Optimized Typography**: Features refined typography for enhanced readability. +- **Dark Mode**: Offers dark mode support for user preference. +- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities. diff --git a/.starter/content/1.getting-started/3.installation.md b/.starter/content/1.getting-started/3.installation.md new file mode 100644 index 0000000..e7c06b5 --- /dev/null +++ b/.starter/content/1.getting-started/3.installation.md @@ -0,0 +1,65 @@ +--- +title: Installation +description: Get started with Docus. +navigation: + icon: i-lucide-download +seo: + description: Get started with Docus documentation theme. +--- + +## Local development + +::steps +### Create your docs directory + +Use the `docus` CLI to create a new Docus project in the `docs/` directory: + +```bash [Terminal] +npx docus init docs +``` + +We recommend using the `npm` package manager. + +### Start your docs server in development + +Move to the `docs/` directory and start your docs server in development mode: + +```bash [Terminal] +npm run dev +``` + +A local preview of your documentation will be available at + +### Write your documentation + +Head over the [Edition](https://docus.dev/concepts/edition) section to learn how to write your documentation. +:: + +## Online Edition with [Nuxt Studio](https://content.nuxt.com/studio) + +::prose-steps +### Create a new project on [Nuxt Studio](https://nuxt.studio) + +Choose `Start from a template` and select **Docus.** Clone it on your GitHub personal account or any organisation of your choice. + +### Deploy in one click + +Once your project has been created and you're in the project dashboard, navigate to the `Deploy` section, choose the `GitHub Pages` tab and set your [Nuxt UI Pro license](https://ui.nuxt.com/pro/pricing) (`NUXT_UI_PRO_LICENSE` ) in the environment variables then click on the **Deploy** button. + + :::prose-note + --- + to: https://content.nuxt.com/docs/studio/setup#enable-the-full-editing-experience + --- + This is a one click static deployment available with [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) but you can also handle deployment yourself and use the `Selfhosted` tab. + ::: + +### Write your documentation in the editor + +Once the deployment is achieved, you'll be able to display the preview of your documentation. You can browse your content pages to edit them or create new ones. + +:video{controls loop poster="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.jpg" src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"} +:: + +::prose-tip{to="https://content.nuxt.com/docs/studio/debug"} +If you want to try Docus and Nuxt Studio in develoment mode without an UI Pro license, you can check the Nuxt Content documentation for local setup with Nuxt Studio. +:: diff --git a/.starter/content/1.getting-started/4.project-structure.md b/.starter/content/1.getting-started/4.project-structure.md new file mode 100644 index 0000000..b0e2238 --- /dev/null +++ b/.starter/content/1.getting-started/4.project-structure.md @@ -0,0 +1,52 @@ +--- +navigation: + icon: i-lucide-folder-tree +title: Project Structure +--- + +Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/.starter). + +This is the minimal directory structure to get an up and running Docus website. + +```bash +content/ + index.md +public/ + favicon.ico +package.json +``` + +### `content/` directory + +This is where you [write pages](https://docus.dev/concepts/edition) in Markdown. + +### `public/` directory + +Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias. + +### `package.json` + +This file contains all the dependencies and scripts for your application. The `package.json` of a Docus application si really minimal and looks like: + +```json [package.json] +{ + "name": "docus-starter", + "scripts": { + "dev": "docus dev", + "build": "docus build" + }, + "devDependencies": { + "docus": "latest" + } +} +``` + +### `app.config.ts` + +*This file is not mandatory to start a Docus application.* + +This is where you can [configure Docus](https://docus.dev/concepts/configuration) to fit your branding, handle SEO and adapt links and socials. + +::prose-tip{to="https://docus.dev/concepts/nuxt"} +Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory. +:: diff --git a/.starter/content/1.getting-started/5.studio.md b/.starter/content/1.getting-started/5.studio.md new file mode 100644 index 0000000..23068aa --- /dev/null +++ b/.starter/content/1.getting-started/5.studio.md @@ -0,0 +1,123 @@ +--- +title: Web Editor +description: Build your documentation using Nuxt Studio web editor +navigation: + icon: i-lucide-mouse-pointer-2 +--- + +## **Introduction** + +The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository. + +:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"} + +::prose-tip{to="https://content.nuxt.com/studio"} +Learn more about Nuxt Studio in the Nuxt Content documentation. +:: + +## **Web Editor vs. CLI** + +The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required. + +The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE. + +::prose-note +Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best. +:: + +## **Two distinct editors** + +Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**. + +You can select your favorite editor from the settings page of your project. + +::prose-note +Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors. +:: + +## **Markdown editor** + +The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax). + +When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content. + +## **Visual editor** + +The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use. + +However, it stands out with its additional features that improve the writing experience: + +### **Toolbar** + +Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax): + +- Title formatting +- Bold +- Italic +- Strike-through +- Code +- Link +- Class +- Bullet list +- Numerated list + +### **The** `/` **shortcut** + +Simply type `/` anywhere in the editor to access all Studio features. + +#### **Formatting features** + +- Title formatting +- Line break +- Horizontal rule +- Code-block +- Paragraph +- Bold & italic + +#### **Components** + +One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor. + +In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles. + +::prose-note +You can also create custom components and let the user integrate them from the visual editor. +:: + +Just type `/` to access the list of all the components available. + +#### **Images** + +Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert. + +From the media modal, you can set the **alt attribute** for SEO and accessibility purpose. + +#### **Videos** + +Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL. + +As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media. + +## **Live Preview** + +Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project. + +We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section. + +When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates. + +## **Making Changes** + +To edit your documentation: + +1. **Browse files** using the file explorer. +2. **Open a file** by clicking on it. +3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts. +4. **Preview your changes** to see how they’ll appear when published. + +## **Publishing Changes** + +When you’re ready to publish: + +- Click the **Publish** button in the top-right corner of the editor. +- Your changes will be pushed directly to your deployment branch and go live immediately. diff --git a/.starter/content/1.getting-started/6.migration.md b/.starter/content/1.getting-started/6.migration.md new file mode 100644 index 0000000..76670cc --- /dev/null +++ b/.starter/content/1.getting-started/6.migration.md @@ -0,0 +1,24 @@ +--- +title: Migration +description: " How to migrate your documentation from an existing Markdown + solution to Docus" +navigation: + icon: i-lucide-replace +--- + +## **Migrating to Docus** + +Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward. + +Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever. + +To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter. + +From there, you have two scenarios: + +- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones. +- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](https://docus.dev/essentials/components) provided by Nuxt UI. + +Once your content has been moved to the `content/` folder, you can go through the [configuration section](https://docus.dev/concepts/configuration) to easily customize your app. + +Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it. diff --git a/.starter/content/2.essentials/.navigation.yml b/.starter/content/2.essentials/.navigation.yml new file mode 100644 index 0000000..b82ae3f --- /dev/null +++ b/.starter/content/2.essentials/.navigation.yml @@ -0,0 +1 @@ +title: Essentials diff --git a/.starter/content/2.essentials/1.markdown-syntax.md b/.starter/content/2.essentials/1.markdown-syntax.md new file mode 100644 index 0000000..1f5ce80 --- /dev/null +++ b/.starter/content/2.essentials/1.markdown-syntax.md @@ -0,0 +1,223 @@ +--- +title: Markdown Syntax +description: Text, title, and styling in standard markdown. +navigation: + icon: i-lucide-heading-1 +--- + +## Titles + +Use titles to introduce main sections. They structure your documentation and help users navigate content. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +## Titles + +#code +```mdc +## Titles +``` +:: + +### Subtitles + +Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +### Subtitles + +#code +```mdc +### Subtitles +``` +:: + +::tip +Each title and subtitle creates an anchor and shows up automatically in the table of contents. +:: + +## Text Formatting + +Docus supports most Markdown formatting options. + +| Style | How to use | Result | +| ------ | ------------ | ---------- | +| Bold | `**bold**` | **Bold** | +| Italic | `*italic*` | *Italic* | +| Strike | `~~strike~~` | ~~Strike~~ | + +Combine formatting for richer text styles and visual emphasis. + +| Style | How to use | Result | +| ------------- | ------------------- | ----------------- | +| Bold Italic | `**_bold italic_**` | ***Bold Italic*** | +| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | +| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | + +## Links + +Links connect different parts of your documentation and external resources, essential for user navigation and providing references. +To create a link, wrap the link text in brackets `[]()`. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt) + +#code +```mdc +[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt) +``` +:: + +### Internal links + +For linking within your documentation, use root-relative paths like `/getting-started/installation`. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +[Installation](/getting-started/installation) + +#code +```mdc +[Installation](/getting-started/installation) +``` +:: + +## Lists + +Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs. + +### Unordered + +Use unordered lists for items without a specific sequence. Start each item with a `-` symbol. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +- I'm a list item. +- I'm another list item. +- I'm the last list item. + +#code +```mdc +- I'm a list item. +- I'm another list item. +- I'm the last list item. +``` +:: + +### Ordered + +Use ordered lists when item order matters, like steps in a process. Start each item with a number. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. + +#code +```mdc +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. +``` +:: + +### Nested + +Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. + +#code +```mdc +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. +``` +:: + +## Tables + +Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +| Prop | Default | Type | +| ------- | --------- | -------- | +| `name` | | `string` | +| `size` | `md` | `string` | +| `color` | `neutral` | `string` | + +#code +```mdc +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | +``` +:: + +## Blockquotes + +Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content. + +### Singleline + +Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. + +#code +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +``` +:: + +### Multiline + +Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. + +#code +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. +``` +:: diff --git a/.starter/content/2.essentials/2.code-blocks.md b/.starter/content/2.essentials/2.code-blocks.md new file mode 100644 index 0000000..b6976d8 --- /dev/null +++ b/.starter/content/2.essentials/2.code-blocks.md @@ -0,0 +1,396 @@ +--- +title: Code Blocks +description: Display inline code and code blocks in your documentation. +navigation: + icon: i-lucide-code-xml +--- + +## Basic + +### Inline Code + +Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. + +::code-preview +--- +class: "[&>div]:*:my-0" +--- +`inline code` + +#code +```mdc +`inline code` +``` +:: + +### Code Blocks + +Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#code +````mdc +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` +```` +:: + +When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. +Filenames help users understand the code's location and purpose within a project. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#code +````mdc +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` +```` +:: + +Every code-block has a built-in copy button that will copy the code to your clipboard. + +::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"} +Icons are already defined by default, but you can customize them in your `app.config.ts`: + +```ts [app.config.ts] +export default defineAppConfig({ + uiPro: { + prose: { + codeIcon: { + terminal: 'i-ph-terminal-window-duotone' + } + } + } +}) +``` +:: + +## Advanced + +### CodeGroup + +Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::code-group{.w-full} + ```bash [pnpm] + pnpm add @nuxt/ui-pro@next + ``` + + ```bash [yarn] + yarn add @nuxt/ui-pro@next + ``` + + ```bash [npm] + npm install @nuxt/ui-pro@next + ``` + + ```bash [bun] + bun add @nuxt/ui-pro@next + ``` + ::: + +#code +````mdc +:::code-group + +```bash [pnpm] +pnpm add @nuxt/ui-pro@next +``` + +```bash [yarn] +yarn add @nuxt/ui-pro@next +``` + +```bash [npm] +npm install @nuxt/ui-pro@next +``` + +```bash [bun] +bun add @nuxt/ui-pro@next +``` + +:: +```` +:: + +### CodeTree + +Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + :::code-tree{default-value="app/app.config.ts"} + ```ts [nuxt.config.ts] + export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'], + + future: { + compatibilityVersion: 4 + }, + + css: ['~/assets/css/main.css'] + }) + + ``` + + ```css [app/assets/css/main.css] + @import "tailwindcss"; + @import "@nuxt/ui-pro"; + ``` + + ```ts [app/app.config.ts] + export default defineAppConfig({ + ui: { + colors: { + primary: 'sky', + colors: 'slate' + } + } + }) + ``` + + ```vue [app/app.vue] + + ``` + + ```json [package.json] + { + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare", + "lint": "eslint .", + "lint:fix": "eslint --fix ." + }, + "dependencies": { + "@iconify-json/lucide": "^1.2.18", + "@nuxt/ui-pro": "3.0.0-alpha.10", + "nuxt": "^3.15.1" + }, + "devDependencies": { + "eslint": "9.20.1", + "typescript": "^5.7.2", + "vue-tsc": "^2.2.0" + } + } + ``` + + ```json [tsconfig.json] + { + "extends": "./.nuxt/tsconfig.json" + } + ``` + + ````md [README.md] + # Nuxt 3 Minimal Starter + + Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + + ## Setup + + Make sure to install the dependencies: + + ```bash + # npm + npm install + + # pnpm + pnpm install + + # yarn + yarn install + + # bun + bun install + ``` + + ## Development Server + + Start the development server on `http://localhost:3000`: + + ```bash + # npm + npm run dev + + # pnpm + pnpm run dev + + # yarn + yarn dev + + # bun + bun run dev + ``` + + ## Production + + Build the application for production: + + ```bash + # npm + npm run build + + # pnpm + pnpm run build + + # yarn + yarn build + + # bun + bun run build + ``` + + Locally preview production build: + + ```bash + # npm + npm run preview + + # pnpm + pnpm run preview + + # yarn + yarn preview + + # bun + bun run preview + ``` + + Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. + ```` + ::: +:: + +### `CodePreview` + +Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results. +Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +label: Preview +--- + :::code-preview + --- + class: "[&>div]:*:my-0" + --- + `inline code` + + #code + ```mdc + `inline code` + ``` + ::: + +#code +````mdc +::code-preview +`inline code` + +#code +```mdc +`inline code` +``` +:: +```` +:: + +### `CodeCollapse` + +Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability. + +::code-preview +--- +class: "[&>div]:*:my-0 [&>div]:*:w-full" +--- + :::code-collapse{class="[&>div]:my-0"} + ```css [main.css] + @import "tailwindcss"; + @import "@nuxt/ui-pro"; + + @theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; + } + ``` + ::: + +#code +````mdc +::code-collapse + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; +} +``` + +:: +```` +:: diff --git a/.starter/content/2.essentials/3.components.md b/.starter/content/2.essentials/3.components.md new file mode 100644 index 0000000..3f5223c --- /dev/null +++ b/.starter/content/2.essentials/3.components.md @@ -0,0 +1,424 @@ +--- +title: Markdown Components +description: Use Markdown components to help you structure your content, with + the help of Nuxt UI Pro. +navigation: + icon: i-lucide-component + title: Components +--- + +Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown. + +**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax). + +::prose-note{to="https://ui.nuxt.com/getting-started"} +This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation. +:: + +### `Accordion` + +Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content. + +::tabs + :::tabs-item{icon="i-lucide-eye" label="Preview"} + ::::accordion + :::::accordion-item + --- + icon: i-lucide-circle-help + label: What is Docus and what are its key features?? + --- + Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax. + ::::: + + :::::accordion-item + --- + icon: i-lucide-circle-help + label: How do I get started with Docus? + --- + The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start. + ::::: + + :::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"} + Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production. + ::::: + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::accordion + + :::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"} + Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax. + ::: + + :::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"} + The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start. + ::: + + :::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"} + Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production. + ::: + :: + ``` + ::: +:: + +### `Badge` + +Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::badge + **v3.0.0** + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::badge + **v3.0.0** + :: + ``` + ::: +:: + +### `Callout` + +Use markdown in the default slot of the `callout` component to add eye-catching context to your content. + +Use the `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link) component. + +You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::div{.flex.flex-col.gap-4.w-full} + :::::note{.w-full.my-0} + Here's some additional information for you. + ::::: + + :::::tip{.w-full.my-0} + Here's a helpful suggestion. + ::::: + + :::::warning{.w-full.my-0} + Be careful with this action as it might have unexpected results. + ::::: + + :::::caution{.w-full.my-0} + This action cannot be undone. + ::::: + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::note + Here's some additional information. + :: + + ::tip + Here's a helpful suggestion. + :: + + ::warning + Be careful with this action as it might have unexpected results. + :: + + ::caution + This action cannot be undone. + :: + ``` + ::: +:: + +### `Card` and `CardGroup` + +Use markdown in the default slot of the `card` component to highlight your content. + +Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link). + +Wrap your `card` components with the `card-group` component to group them together in a grid layout. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::card-group{.w-full.my-0} + :::::card + --- + icon: i-simple-icons-github + target: _blank + title: Dashboard + to: https://github.com/nuxt-ui-pro/dashboard + --- + A dashboard with multi-column layout. + ::::: + + :::::card + --- + icon: i-simple-icons-github + target: _blank + title: SaaS + to: https://github.com/nuxt-ui-pro/saas + --- + A template with landing, pricing, docs and blog. + ::::: + + :::::card + --- + icon: i-simple-icons-github + target: _blank + title: Docs + to: https://github.com/nuxt-ui-pro/docs + --- + A documentation with `@nuxt/content`. + ::::: + + :::::card + --- + icon: i-simple-icons-github + target: _blank + title: Landing + to: https://github.com/nuxt-ui-pro/landing + --- + A landing page you can use as starting point. + ::::: + :::: + ::: + + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ```mdc + :::card-group + + ::card + --- + title: Dashboard + icon: i-simple-icons-github + to: https://github.com/nuxt-ui-pro/dashboard + target: _blank + --- + A dashboard with multi-column layout. + :: + + ::card + --- + title: SaaS + icon: i-simple-icons-github + to: https://github.com/nuxt-ui-pro/saas + target: _blank + --- + A template with landing, pricing, docs and blog. + :: + + ::card + --- + title: Docs + icon: i-simple-icons-github + to: https://github.com/nuxt-ui-pro/docs + target: _blank + --- + A documentation with `@nuxt/content`. + :: + + ::card + --- + title: Landing + icon: i-simple-icons-github + to: https://github.com/nuxt-ui-pro/landing + target: _blank + --- + A landing page you can use as starting point. + :: + + ::: + ``` + ::: +:: + +### `Collapsible` + +Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::collapsible + | Prop | Default | Type | + | ------- | --------- | -------- | + | `name` | | `string` | + | `size` | `md` | `string` | + | `color` | `neutral` | `string` | + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::collapsible + + | Prop | Default | Type | + |---------|-----------|--------------------------| + | `name` | | `string`{lang="ts-type"} | + | `size` | `md` | `string`{lang="ts-type"} | + | `color` | `neutral` | `string`{lang="ts-type"} | + + :: + ``` + ::: +:: + +### `Field` and `FieldGroup` + +A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::field-group{.my-0} + :::::field{name="analytics" type="boolean"} + Default to `false` - Enables analytics for your project (coming soon). + ::::: + + :::::field{name="blob" type="boolean"} + Default to `false` - Enables blob storage to store static assets, such as images, videos and more. + ::::: + + :::::field{name="cache" type="boolean"} + Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` + ::::: + + :::::field{name="database" type="boolean"} + Default to `false` - Enables SQL database to store your application's data. + ::::: + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::field-group + ::field{name="analytics" type="boolean"} + Default to `false` - Enables analytics for your project (coming soon). + :: + + ::field{name="blob" type="boolean"} + Default to `false` - Enables blob storage to store static assets, such as images, videos and more. + :: + + ::field{name="cache" type="boolean"} + Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` + :: + + ::field{name="database" type="boolean"} + Default to `false` - Enables SQL database to store your application's data. + :: + :: + ``` + ::: +:: + +### `Icon` + +Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content. + +::code-preview +:icon{name="i-simple-icons-nuxtdotjs"} + + + +#code +```mdc +:icon{name="i-simple-icons-nuxtdotjs"} +``` +:: + +### `Kbd` + +Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content. + +::code-preview +#code +```mdc +:kbd{value="meta"} :kbd{value="K"} +``` +:: + +### `Tabs` + +Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content. + +::code-preview + :::tabs{.w-full} + ::::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + :: + ``` + :::: + + ::::tabs-item{icon="i-lucide-eye" label="Preview"} + :::::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + ::::: + :::: + ::: + +#code +````mdc +::tabs{.w-full} + :::tabs-item{icon="i-lucide-code" label="Code"} + ```mdc + ::::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + :::: + ``` + :::: + + :::tabs-item{icon="i-lucide-eye" label="Preview"} + :::::callout + Lorem velit voluptate ex reprehenderit ullamco et culpa. + ::::: + ::: +:: +```` +:: + +### `Steps` + +Wrap your headings with the Steps component to display a list of steps. + +Use the `level` prop to define which heading will be used for the steps. + +::tabs + :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} + ::::steps{level="4"} + #### Start a fresh new project + + ```bash [Terminal] + npx nuxi init -t github:nuxt-ui-pro/docus + ``` + + #### Run docus CLI to run your dev server + + ```bash [Terminal] + docus dev + ``` + :::: + ::: + + :::tabs-item{icon="i-lucide-code" label="Code"} + ````mdc + ::steps{level="4"} + #### Start a fresh new project + + ```bash [Terminal] + npx nuxi init -t github:nuxt-ui-pro/docus + ``` + + #### Run docus CLI to run your dev server + + ```bash [Terminal] + docus dev + ``` + :: + ```` + ::: +:: diff --git a/.starter/content/2.essentials/4.images-embeds.md b/.starter/content/2.essentials/4.images-embeds.md new file mode 100644 index 0000000..45419cc --- /dev/null +++ b/.starter/content/2.essentials/4.images-embeds.md @@ -0,0 +1,53 @@ +--- +title: Images and Embeds +description: Add image, video, and other HTML elements +navigation: + icon: i-lucide-image +seo: + description: Add image, video, and other HTML elements using Docus theme +--- + +## Markdown + +Display images or videos using standard Markdown syntax. + +### Images + +::code-preview +![Nuxt Social Image](https://nuxt.com/new-social.jpg) + +#code +```mdc +![Nuxt Social Image](https://nuxt.com/new-social.jpg) +``` +:: + +Or with your local images + +::code-preview +![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp) + +#code +```mdc +![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp) +``` +:: + +::note{to="https://image.nuxt.com/"} +Docus will use `` component under the hood instead of the native `img` tag. +:: + +### Videos + +::prose-code-preview +:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"} + + + +#code +```mdc +:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"} +``` +:: + +### diff --git a/.starter/content/index.md b/.starter/content/index.md new file mode 100644 index 0000000..4c1297e --- /dev/null +++ b/.starter/content/index.md @@ -0,0 +1,123 @@ +--- +seo: + title: Write beautiful docs with Markdown + description: Ship fast, flexible, and SEO-optimized documentation with beautiful + design out of the box. Docus brings together the best of the Nuxt ecosystem. + Powered by Nuxt UI Pro. +--- + +::u-page-hero +#title +Write beautiful docs with Markdown + +#description +Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. + +Docus brings the best of the Nuxt ecosystem into one CLI. + +#links + :::u-button + --- + color: neutral + size: xl + to: /getting-started/installation + trailing-icon: i-lucide-arrow-right + --- + Get started + ::: + + :::u-button + --- + color: neutral + icon: simple-icons-github + size: xl + to: https://github.com/nuxt-ui-pro/docus + variant: outline + --- + Star on GitHub + ::: +:: + +::u-page-section +#title +Shipped with many features + +#features + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://nuxt.com + --- + #title + Built with [Nuxt 3]{.text-primary} + + #description + Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites. + ::: + + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://ui.nuxt.com/ + --- + #title + Powered by [Nuxt UI Pro]{.text-primary} + + #description + Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content. + ::: + + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://content.nuxt.com + --- + #title + Enhanced Markdown syntax by [Nuxt Content]{.text-primary} + + #description + The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you. + ::: + + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://nuxt.com/docs/guide/directory-structure/app-config + --- + #title + Customize with [Nuxt App Config]{.text-primary} + + #description + Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required. + ::: + + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://content.nuxt.com/studio + --- + #title + Collaborate on [Nuxt Studio]{.text-primary} + + #description + Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills. + ::: + + :::u-page-feature + --- + icon: i-simple-icons-nuxt + target: _blank + to: https://ui.nuxt.com/components/content-search + --- + #title + Built-in navigation and [full-text search]{.text-primary} + + #description + Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you. + ::: +:: diff --git a/.starter/package.json b/.starter/package.json new file mode 100644 index 0000000..04959e8 --- /dev/null +++ b/.starter/package.json @@ -0,0 +1,12 @@ +{ + "name": "docus-starter", + "scripts": { + "dev": "docus dev", + "build": "docus build" + }, + "dependencies": { + "docus": "latest", + "better-sqlite3": "^11.10.0", + "nuxt": "^3.17.6" + } +} \ No newline at end of file diff --git a/.starter/public/favicon.ico b/.starter/public/favicon.ico new file mode 100644 index 0000000..c3ca4f4 Binary files /dev/null and b/.starter/public/favicon.ico differ diff --git a/.starter/public/mountains.webp b/.starter/public/mountains.webp new file mode 100644 index 0000000..a584560 Binary files /dev/null and b/.starter/public/mountains.webp differ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..3c604d8 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,139 @@ +# Changelog + +## [3.0.5](https://github.com/nuxtlabs/docus/compare/v3.0.4...v3.0.5) (2025-07-01) + +### Features + +* **app:** add `bash` & `diff` highlight langs ([55e0fa0](https://github.com/nuxtlabs/docus/commit/55e0fa0408e5d0656fa36cb49554668dbc288082)) +* **app:** handle `github.rootDir` app config ([0698787](https://github.com/nuxtlabs/docus/commit/06987870962d6c3b604f35126c10018388930c37)) + +### Bug Fixes + +* **app:** add `highlight` on content toc ([a511b50](https://github.com/nuxtlabs/docus/commit/a511b508cd2140f86ba7e045244cf59b68f84c68)) +* **app:** allow content navigation variant override ([ccc1340](https://github.com/nuxtlabs/docus/commit/ccc1340faa0da10ac8e17d909739b987b337fcd4)) +* **app:** display page links in header ([9acc755](https://github.com/nuxtlabs/docus/commit/9acc75565f1f92013371319a2506edbba7dd415c)) +* **app:** import from `@nuxt/kit` ([d8dbee4](https://github.com/nuxtlabs/docus/commit/d8dbee4c804754b94ff3abc9e0d0225f5112688a)) +* **app:** improve app config type ([246c16a](https://github.com/nuxtlabs/docus/commit/246c16a984e1e837c19bdd22c439bb6fb5bbf813)) +* **app:** use `useClipboard` to copy page ([a8cd48b](https://github.com/nuxtlabs/docus/commit/a8cd48b063679b1c58142842ef857abf15fc8630)) + +## [3.0.4](https://github.com/nuxtlabs/docus/compare/v3.0.3...v3.0.4) (2025-06-24) + +### Bug Fixes + +* **prerender:** redirect issue with static deployment ([5f8fbb3](https://github.com/nuxtlabs/docus/commit/5f8fbb32c5cba8479b2562495d0fb7c49291c6de)) + +## [3.0.3](https://github.com/nuxtlabs/docus/compare/v3.0.2...v3.0.3) (2025-06-20) + +### Features + +* **nav:** handle nav for docs folder ([65a477a](https://github.com/nuxtlabs/docus/commit/65a477a0974ced0cae7aed6d5fd498ec4e7e0687)) + +### Bug Fixes + +* **landing:** conditionally add prose ([1931668](https://github.com/nuxtlabs/docus/commit/19316680c2c2035d7d72b4628d2caa901b3a01a6)) +* **landing:** put back prose ([73edf2a](https://github.com/nuxtlabs/docus/commit/73edf2a417802b5a366af17d17961f4e9a900564)) +* **prerender:** add mardown raw content ([e35b7aa](https://github.com/nuxtlabs/docus/commit/e35b7aaab954f69b7b8edd67d92a37ba6678c9d4)) + +## [3.0.2](https://github.com/nuxtlabs/docus/compare/v3.0.1...v3.0.2) (2025-06-17) + +### Features + +* **llms:** enable full by default ([677078f](https://github.com/nuxtlabs/docus/commit/677078f0d1e432d7b25e876374e36eeb2796d5f2)) + +### Bug Fixes + +* **setup:** docs layer ([d407155](https://github.com/nuxtlabs/docus/commit/d40715593adecf5e8421e100e897687a28a56e39)) +* **starter:** prerender issues ([2facbea](https://github.com/nuxtlabs/docus/commit/2facbeaa3c8c9287c2048c754602063912fe5a49)) + +## [3.0.1](https://github.com/nuxtlabs/docus/compare/v3.0.0...v3.0.1) (2025-06-17) + +### Bug Fixes + +* **configs:** handle llms and site default configs in a module ([c642df9](https://github.com/nuxtlabs/docus/commit/c642df95c0a3a8b98eddaa33f00b5b1187eeaba8)) +* improve async data key for SEO ([2de5ffe](https://github.com/nuxtlabs/docus/commit/2de5ffe22ccfc9fb46c802d0fbc77f4a764f78a5)) +* **llms:** missing deps to enable full ([6d354ce](https://github.com/nuxtlabs/docus/commit/6d354ceafa7792880f50487d2ad392172df10d87)) +* **setup:** define default app config in module ([b250a1b](https://github.com/nuxtlabs/docus/commit/b250a1b677c6cf1bf68794615c86599864ce9fd5)) + +## [3.0.0](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.3...v3.0.0) (2025-06-13) + +### Features + +* **llms:** enable full ([65374af](https://github.com/nuxtlabs/docus/commit/65374af2bc44c42cb35fa66055bd65d092dcd32e)) + +## [3.0.0-alpha.3](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.2...v3.0.0-alpha.3) (2025-06-12) + +## [3.0.0-alpha.2](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2025-06-12) + +### Bug Fixes + +* **ci:** nightly ([26b92a7](https://github.com/nuxtlabs/docus/commit/26b92a71a2abd1e0216f6d7433edfde696c25264)) +* **deps:** add brace-expansion as optimized deps ([32a5589](https://github.com/nuxtlabs/docus/commit/32a5589d0abaec0a4566778fa154e1eee28c014a)) +* **deps:** remove brace-expansion optimization ([355ac39](https://github.com/nuxtlabs/docus/commit/355ac39d60674aec4e99234a6e73502db00ce4a8)) + +## [3.0.0-alpha.1](https://github.com/nuxtlabs/docus/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2025-06-12) + +### Bug Fixes + +* **deps:** refine optimizeDeps of `@nuxt/content` ([#1080](https://github.com/nuxtlabs/docus/issues/1080)) ([ba0f6ef](https://github.com/nuxtlabs/docus/commit/ba0f6effa28b25135719746da17991453ffd678d)) + +## [3.0.0-alpha.0](https://github.com/nuxtlabs/docus/compare/v2.0.0-alpha.1...v3.0.0-alpha.0) (2025-06-12) + +### Bug Fixes + +* **docs:** use docus instead of @larbish/docus ([0dee9ec](https://github.com/nuxtlabs/docus/commit/0dee9ec484f4f097c68f2236cb2f927dcbd1db30)) + +## [2.0.0-alpha.1](https://github.com/nuxtlabs/docus/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2025-06-10) + +### Bug Fixes + +* **cli:** init command ([cfa6290](https://github.com/nuxtlabs/docus/commit/cfa6290f5aa38da852dad57780a277c502df3daf)) + +## [2.0.0-alpha.0](https://github.com/nuxtlabs/docus/compare/v2.0.0...v2.0.0-alpha.0) (2025-06-10) + +### Features + +* animate the menu toggle icon ([1cb0273](https://github.com/nuxtlabs/docus/commit/1cb0273d68e8b28b76c22f07cb40ca74c8034189)) +* **app:** build command ([cb505bb](https://github.com/nuxtlabs/docus/commit/cb505bbfffc50654a4634846ff39510401c93bf2)) +* **app:** compat nuxt version 4 ([594ac08](https://github.com/nuxtlabs/docus/commit/594ac0834738effb6752f3b3efc25d1dd9f0b3d7)) +* **app:** init docus v2 ([bc3a9d1](https://github.com/nuxtlabs/docus/commit/bc3a9d101052fb787e562744d5d9b3d87799c24b)) +* **app:** rename DocsHeaderRight to DocsPageHeaderLinks ([82a2ca8](https://github.com/nuxtlabs/docus/commit/82a2ca87aefdf446c62564010c6839b76a57de89)) +* **ci:** publish nightly ([4753cd4](https://github.com/nuxtlabs/docus/commit/4753cd450f8f6741572911169ea21c88e1f75915)) +* **components:** AppHeaderBody ([ae5ecc8](https://github.com/nuxtlabs/docus/commit/ae5ecc86d00918c9fb35f235bc2b72c322932f9d)) +* **components:** customizable app header and docs asides ([4ca262b](https://github.com/nuxtlabs/docus/commit/4ca262b247f01ad4b8041bf106886f3d506525fa)) +* **config:** handle app.config.ts ([739cbb1](https://github.com/nuxtlabs/docus/commit/739cbb151a5d8ff510662d1ee534a827e05cb21f)) +* **docs:** docs header right ([843527c](https://github.com/nuxtlabs/docus/commit/843527cb6f909fd9cf5492b014b659d45490f3ef)) +* **docs:** links from app config from docs aside right bottom ([28f521d](https://github.com/nuxtlabs/docus/commit/28f521dd51aa4ce5b7354416bd3bf626f9f79cd0)) +* **docs:** trigger nightly ([4493e33](https://github.com/nuxtlabs/docus/commit/4493e33d6cce899d4eacb4f0191cbfe40b6554d9)) +* improvements ([b1af212](https://github.com/nuxtlabs/docus/commit/b1af212900712223673617749eecb227378cb3e3)) +* **llms:** integrate nuxt llms by default ([3f060d8](https://github.com/nuxtlabs/docus/commit/3f060d85bca006e8cea412144fdfda7eec481d1f)) +* **seo:** og images landing ([a81f07b](https://github.com/nuxtlabs/docus/commit/a81f07b49ee21b6bb1e944178f596065ce8b0ff2)) +* **seo:** site name and title template ([19fb325](https://github.com/nuxtlabs/docus/commit/19fb32542036ff943bc1ad532ce182d9fe036a5b)) +* **social:** update og image ([87f87e4](https://github.com/nuxtlabs/docus/commit/87f87e4cb2905267feb2bd66fe8c744d7ace53af)) +* **starter:** update ([6ddff7f](https://github.com/nuxtlabs/docus/commit/6ddff7fd3909c746c86ac6a82b6bbc350c3e987e)) + +### Bug Fixes + +* add docs dir only if not found as layer ([05fdaf3](https://github.com/nuxtlabs/docus/commit/05fdaf3a87edf1b9470918259e7792b91a82d1a1)) +* **app:** config ([af15911](https://github.com/nuxtlabs/docus/commit/af15911b054c9d7c3c22902f4d44860da3510f12)) +* **cli:** layers ([370740c](https://github.com/nuxtlabs/docus/commit/370740c4231d147bac5c5f5f90702fc9f0b3a74e)) +* **cli:** rename to docus ([ef17013](https://github.com/nuxtlabs/docus/commit/ef1701359be87390ceae4b064970269f4bd206b3)) +* **cli:** update init cmd ([b902db7](https://github.com/nuxtlabs/docus/commit/b902db7ce6293c778577747905718e62e1e4d4cd)) +* **config:** update toc links schema ([5ce2c70](https://github.com/nuxtlabs/docus/commit/5ce2c70aa7c52be341c9484d5fd10427c8320d09)) +* **docs:** copy page ([63f1088](https://github.com/nuxtlabs/docus/commit/63f1088a7b4efe0cf12213df899554cb8e820a86)) +* **docs:** safari copy to clipboard ([4761858](https://github.com/nuxtlabs/docus/commit/47618586a94169e9e4f75158ffd2e62539735f01)) +* **git:** fetch info ([98dae4b](https://github.com/nuxtlabs/docus/commit/98dae4bf59829313cd630f7bf4eaffb6003cbe95)) +* **git:** vercel branch name variable ([966a1b9](https://github.com/nuxtlabs/docus/commit/966a1b9369957e76019efdc3dc0c48c8d3c99a07)) +* **icon:** use iconify provider ([f41113c](https://github.com/nuxtlabs/docus/commit/f41113c1f767db3f26830070db245fcd542caa5e)) +* **landing:** neutral and primary in iframe command menu ([e16717d](https://github.com/nuxtlabs/docus/commit/e16717df0ae90cea71bf9c83eb8056c4a3d59202)) +* **package:** add repository ([cebd917](https://github.com/nuxtlabs/docus/commit/cebd91740a797b7c4f94dd360b335a289f18e2e6)) +* **package:** dev without rebuild ([67fad9e](https://github.com/nuxtlabs/docus/commit/67fad9ec773caeac517d737dfc8370b1302d4de5)) +* **package:** set pnpm version ([b96e34b](https://github.com/nuxtlabs/docus/commit/b96e34b6cfb6a070667e812925c5058585710169)) +* **pages:** possibility to set gh edit url ([85a01e7](https://github.com/nuxtlabs/docus/commit/85a01e79817c53142472c49a4e1db684c71c7b3e)) +* **schema:** toc ([00b90d8](https://github.com/nuxtlabs/docus/commit/00b90d89fe16db9ee92894e8bb1e797674c9cd93)) +* **seo:** default title and description ([0321956](https://github.com/nuxtlabs/docus/commit/03219562b9fa02eed1ee1bbf4cbab31092028911)) +* **seo:** site name and url ([afc59b6](https://github.com/nuxtlabs/docus/commit/afc59b678287caf53b39ac69d65165a67a4840b8)) +* **seo:** use seo key instead of site ([68bece7](https://github.com/nuxtlabs/docus/commit/68bece7bdbb9b9ef7d9ed7408a37ffb8445a0453)) +* **seo:** use site title ([9e9df32](https://github.com/nuxtlabs/docus/commit/9e9df3264efec4fd6f4cf9843894c05f3f77ce15)) +* **setup:** default header title ([1a4ee1d](https://github.com/nuxtlabs/docus/commit/1a4ee1d80f00d673b5b58048c28d673e977b0204)) +* **setup:** infer URL ([105e1ca](https://github.com/nuxtlabs/docus/commit/105e1ca4ac7b33fd6589cc533c75bed561c06ca4)) +* source app config ([abc5c35](https://github.com/nuxtlabs/docus/commit/abc5c355daa47665c064a19834455c1e57c5799c)) diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d457246 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) NuxtLabs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..20be45a --- /dev/null +++ b/README.md @@ -0,0 +1,53 @@ +[![docus](https://docus-puce.vercel.app/__og-image__/static/og.png)](https://docus.dev) + +[![npm version][npm-version-src]][npm-version-href] +[![npm downloads][npm-downloads-src]][npm-downloads-href] +[![License][license-src]][license-href] +[![Nuxt][nuxt-src]][nuxt-href] + +# Docus + +Documentation Theme and CLI to write beautiful docs with Markdown. + +Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Docus brings together the best of the Nuxt ecosystem: +- [Nuxt 3](https://nuxt.com) +- [Nuxt Content](https://content.nuxt.com/) +- [Nuxt UI](https://ui.nuxt.com/) +- [Nuxt Image](https://image.nuxt.com/) +- [Nuxt LLMs](https://github.com/nuxtlabs/nuxt-llms) +- [Nuxt SEO](https://nuxtseo.com/) +- [UnJS ecosystem](https://unjs.io/) +- [Nuxt Studio](https://content.nuxt.com/studio) + +## Contribution + +
+ Local development + +- Clone this repository +- Install the latest LTS version of [Node.js](https://nodejs.org/en/) +- Install dependencies using `pnpm install` +- Run prepare command using `pnpm run dev:prepare` +- Run dev documentation built on top of Docus using `pnpm run dev` + +
+ +## License + +Published under the [MIT](https://github.com/unjs/undocs/blob/main/LICENSE) license. + +Docus v3 has been entirely rewritten from scratch and is inspired and copied from [undocs](https://github.com/unjs/undocs) made by [@pi0](https://github.com/pi0) 💚 + + + +[npm-version-src]: https://img.shields.io/npm/v/docus/latest.svg?style=flat&colorA=020420&colorB=EEEEEE +[npm-version-href]: https://npmjs.com/package/docus + +[npm-downloads-src]: https://img.shields.io/npm/dm/docus.svg?style=flat&colorA=020420&colorB=EEEEEE +[npm-downloads-href]: https://npm.chart.dev/docus + +[license-src]: https://img.shields.io/npm/l/docus.svg?style=flat&colorA=020420&colorB=EEEEEE +[license-href]: https://npmjs.com/package/docus + +[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js +[nuxt-href]: https://nuxt.com diff --git a/app/app/app.config.ts b/app/app/app.config.ts new file mode 100644 index 0000000..4f12dfd --- /dev/null +++ b/app/app/app.config.ts @@ -0,0 +1,36 @@ +export default defineAppConfig({ + ui: { + colors: { + primary: 'emerald', + neutral: 'zinc', + }, + }, + uiPro: { + contentNavigation: { + slots: { + linkLeadingIcon: 'size-4 mr-1', + listWithChildren: 'border-(--ui-bg-elevated)', + linkTrailing: 'hidden', + }, + variants: { + active: { + false: { + link: 'text-toned hover:after:bg-accented', + }, + }, + }, + defaultVariants: { + variant: 'link', + }, + }, + pageLinks: { + slots: { + linkLeadingIcon: 'size-4', + linkLabelExternalIcon: 'size-2.5', + }, + }, + }, + toc: { + title: 'On this page', + }, +}) diff --git a/app/app/app.vue b/app/app/app.vue new file mode 100644 index 0000000..76b540f --- /dev/null +++ b/app/app/app.vue @@ -0,0 +1,56 @@ + + + diff --git a/app/app/assets/css/main.css b/app/app/assets/css/main.css new file mode 100644 index 0000000..17d9d36 --- /dev/null +++ b/app/app/assets/css/main.css @@ -0,0 +1,5 @@ +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@source "../../../content/**/*"; +@source "../../app.config.ts"; diff --git a/app/app/components/IconMenuToggle.vue b/app/app/components/IconMenuToggle.vue new file mode 100644 index 0000000..bd5d1ff --- /dev/null +++ b/app/app/components/IconMenuToggle.vue @@ -0,0 +1,83 @@ + + + diff --git a/app/app/components/OgImage/OgImageDocs.vue b/app/app/components/OgImage/OgImageDocs.vue new file mode 100644 index 0000000..f810b38 --- /dev/null +++ b/app/app/components/OgImage/OgImageDocs.vue @@ -0,0 +1,76 @@ + + + diff --git a/app/app/components/OgImage/OgImageLanding.vue b/app/app/components/OgImage/OgImageLanding.vue new file mode 100644 index 0000000..0695f74 --- /dev/null +++ b/app/app/components/OgImage/OgImageLanding.vue @@ -0,0 +1,73 @@ + + + diff --git a/app/app/components/app/AppFooter.vue b/app/app/components/app/AppFooter.vue new file mode 100644 index 0000000..d10f527 --- /dev/null +++ b/app/app/components/app/AppFooter.vue @@ -0,0 +1,40 @@ + + + diff --git a/app/app/components/app/AppHeader.vue b/app/app/components/app/AppHeader.vue new file mode 100644 index 0000000..1acd116 --- /dev/null +++ b/app/app/components/app/AppHeader.vue @@ -0,0 +1,57 @@ + + + diff --git a/app/app/components/app/AppHeaderBody.vue b/app/app/components/app/AppHeaderBody.vue new file mode 100644 index 0000000..4bf94e2 --- /dev/null +++ b/app/app/components/app/AppHeaderBody.vue @@ -0,0 +1,13 @@ + + + diff --git a/app/app/components/app/AppHeaderCTA.vue b/app/app/components/app/AppHeaderCTA.vue new file mode 100644 index 0000000..04d85e1 --- /dev/null +++ b/app/app/components/app/AppHeaderCTA.vue @@ -0,0 +1,3 @@ + diff --git a/app/app/components/app/AppHeaderCenter.vue b/app/app/components/app/AppHeaderCenter.vue new file mode 100644 index 0000000..a96370b --- /dev/null +++ b/app/app/components/app/AppHeaderCenter.vue @@ -0,0 +1,6 @@ + diff --git a/app/app/components/app/AppHeaderLogo.vue b/app/app/components/app/AppHeaderLogo.vue new file mode 100644 index 0000000..dab913d --- /dev/null +++ b/app/app/components/app/AppHeaderLogo.vue @@ -0,0 +1,16 @@ + + + diff --git a/app/app/components/docs/DocsAsideLeftTop.vue b/app/app/components/docs/DocsAsideLeftTop.vue new file mode 100644 index 0000000..04d85e1 --- /dev/null +++ b/app/app/components/docs/DocsAsideLeftTop.vue @@ -0,0 +1,3 @@ + diff --git a/app/app/components/docs/DocsAsideRightBottom.vue b/app/app/components/docs/DocsAsideRightBottom.vue new file mode 100644 index 0000000..9071559 --- /dev/null +++ b/app/app/components/docs/DocsAsideRightBottom.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/app/components/docs/DocsPageHeaderLinks.vue b/app/app/components/docs/DocsPageHeaderLinks.vue new file mode 100644 index 0000000..d6c2e6f --- /dev/null +++ b/app/app/components/docs/DocsPageHeaderLinks.vue @@ -0,0 +1,77 @@ + + + diff --git a/app/app/error.vue b/app/app/error.vue new file mode 100644 index 0000000..fca8b58 --- /dev/null +++ b/app/app/error.vue @@ -0,0 +1,42 @@ + + + diff --git a/app/app/layouts/docs.vue b/app/app/layouts/docs.vue new file mode 100644 index 0000000..5149cce --- /dev/null +++ b/app/app/layouts/docs.vue @@ -0,0 +1,24 @@ + + + diff --git a/app/app/pages/[...slug].vue b/app/app/pages/[...slug].vue new file mode 100644 index 0000000..792efeb --- /dev/null +++ b/app/app/pages/[...slug].vue @@ -0,0 +1,136 @@ + + + diff --git a/app/app/pages/index.vue b/app/app/pages/index.vue new file mode 100644 index 0000000..4674adf --- /dev/null +++ b/app/app/pages/index.vue @@ -0,0 +1,39 @@ + + + diff --git a/app/app/types/index.d.ts b/app/app/types/index.d.ts new file mode 100644 index 0000000..b433e8e --- /dev/null +++ b/app/app/types/index.d.ts @@ -0,0 +1,39 @@ +declare module 'nuxt/schema' { + interface AppConfig { + seo: { + titleTemplate: string + title: string + description: string + } + header: { + title: string + logo: { + light: string + dark: string + alt: string + } + } + socials: Record + toc: { + title: string + bottom: { + title: string + links: { + icon: string + label: string + to: string + target: string + }[] + } + } + github: { + owner: string + name: string + url: string + branch: string + rootDir?: string + } + } +} + +export {} diff --git a/app/app/utils/git.ts b/app/app/utils/git.ts new file mode 100644 index 0000000..602ec5b --- /dev/null +++ b/app/app/utils/git.ts @@ -0,0 +1,110 @@ +import { execSync } from 'node:child_process' +import { readGitConfig } from 'pkg-types' +import gitUrlParse from 'git-url-parse' + +export interface GitInfo { + // Repository name + name: string + // Repository owner/organization + owner: string + // Repository URL + url: string +} + +export function getGitBranch() { + const envName + = process.env.CF_PAGES_BRANCH + || process.env.CI_COMMIT_BRANCH + || process.env.VERCEL_GIT_COMMIT_REF + || process.env.BRANCH + || process.env.GITHUB_REF_NAME + + if (envName && envName !== 'HEAD') { + return envName + } + try { + const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim() + if (branch && branch !== 'HEAD') { + return branch + } + } + catch { + // Ignore error + } + + return 'main' +} + +export async function getLocalGitInfo(rootDir: string): Promise { + const remote = await getLocalGitRemote(rootDir) + if (!remote) { + return + } + + // https://www.npmjs.com/package/git-url-parse#clipboard-example + const { name, owner, source } = gitUrlParse(remote) + const url = `https://${source}/${owner}/${name}` + + return { + name, + owner, + url, + } +} + +async function getLocalGitRemote(dir: string): Promise { + try { + const parsed = await readGitConfig(dir) + if (!parsed) { + return + } + return parsed.remote?.['origin']?.url + } + catch { + // Ignore error + } +} + +export function getGitEnv(): GitInfo { + // https://github.com/unjs/std-env/issues/59 + const envInfo = { + // Provider + provider: process.env.VERCEL_GIT_PROVIDER // vercel + || (process.env.GITHUB_SERVER_URL ? 'github' : undefined) // github + || '', + // Owner + owner: process.env.VERCEL_GIT_REPO_OWNER // vercel + || process.env.GITHUB_REPOSITORY_OWNER // github + || process.env.CI_PROJECT_PATH?.split('/').shift() // gitlab + || '', + // Name + name: process.env.VERCEL_GIT_REPO_SLUG + || process.env.GITHUB_REPOSITORY?.split('/').pop() // github + || process.env.CI_PROJECT_PATH?.split('/').splice(1).join('/') // gitlab + || '', + // Url + url: process.env.REPOSITORY_URL || '', // netlify + } + + if (!envInfo.url && envInfo.provider && envInfo.owner && envInfo.name) { + envInfo.url = `https://${envInfo.provider}.com/${envInfo.owner}/${envInfo.name}` + } + + // If only url available (ex: Netlify) + if (!envInfo.name && !envInfo.owner && envInfo.url) { + try { + const { name, owner } = gitUrlParse(envInfo.url) + envInfo.name = name + envInfo.owner = owner + } + catch { + // Ignore error + } + } + + return { + name: envInfo.name, + owner: envInfo.owner, + url: envInfo.url, + } +} diff --git a/app/app/utils/meta.ts b/app/app/utils/meta.ts new file mode 100644 index 0000000..11eb413 --- /dev/null +++ b/app/app/utils/meta.ts @@ -0,0 +1,29 @@ +import { readFile } from 'node:fs/promises' +import { resolve } from 'node:path' + +export function inferSiteURL() { + // https://github.com/unjs/std-env/issues/59 + return ( + process.env.NUXT_SITE_URL + || (process.env.NEXT_PUBLIC_VERCEL_URL && `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`) // Vercel + || process.env.URL // Netlify + || process.env.CI_PAGES_URL // Gitlab Pages + || process.env.CF_PAGES_URL // Cloudflare Pages + ) +} + +export async function getPackageJsonMetadata(dir: string) { + try { + const packageJson = await readFile(resolve(dir, 'package.json'), 'utf-8') + const parsed = JSON.parse(packageJson) + return { + name: parsed.name, + description: parsed.description, + } + } + catch { + return { + name: 'docs', + } + } +} diff --git a/app/app/utils/prerender.ts b/app/app/utils/prerender.ts new file mode 100644 index 0000000..85d8d3d --- /dev/null +++ b/app/app/utils/prerender.ts @@ -0,0 +1,12 @@ +export const addPrerenderPath = (path: string) => { + const event = useRequestEvent() + if (event) { + event.node.res.setHeader( + 'x-nitro-prerender', + [ + event.node.res.getHeader('x-nitro-prerender'), + path, + ].filter(Boolean).join(','), + ) + } +} diff --git a/app/content.config.ts b/app/content.config.ts new file mode 100644 index 0000000..b0bcdd8 --- /dev/null +++ b/app/content.config.ts @@ -0,0 +1,31 @@ +import { defineContentConfig, defineCollection, z } from '@nuxt/content' + +export default defineContentConfig({ + collections: { + landing: defineCollection({ + type: 'page', + source: { + // @ts-expect-error __DOCS_DIR__ is not defined + cwd: globalThis.__DOCS_DIR__, + include: 'index.md', + }, + }), + docs: defineCollection({ + type: 'page', + source: { + // @ts-expect-error __DOCS_DIR__ is not defined + cwd: globalThis.__DOCS_DIR__, + include: '**', + exclude: ['index.md'], + }, + schema: z.object({ + links: z.array(z.object({ + label: z.string(), + icon: z.string(), + to: z.string(), + target: z.string().optional(), + })).optional(), + }), + }), + }, +}) diff --git a/app/modules/default-configs.ts b/app/modules/default-configs.ts new file mode 100644 index 0000000..e97b0f7 --- /dev/null +++ b/app/modules/default-configs.ts @@ -0,0 +1,54 @@ +import { defineNuxtModule } from '@nuxt/kit' +import { defu } from 'defu' +import { inferSiteURL, getPackageJsonMetadata } from '../app/utils/meta' +import { getGitBranch, getGitEnv, getLocalGitInfo } from '../app/utils/git' + +export default defineNuxtModule({ + meta: { + name: 'default-configs', + }, + async setup(_options, nuxt) { + const dir = nuxt.options.rootDir + const url = inferSiteURL() + const meta = await getPackageJsonMetadata(dir) + const gitInfo = await getLocalGitInfo(dir) || getGitEnv() + const siteName = nuxt.options?.site?.name || meta.name || gitInfo?.name || '' + + nuxt.options.llms = defu(nuxt.options.llms, { + domain: url, + title: siteName, + description: meta.description || '', + full: { + title: siteName, + description: meta.description || '', + }, + }) + + nuxt.options.site = defu(nuxt.options.site, { + url, + name: siteName, + debug: false, + }) + + nuxt.options.appConfig.header = defu(nuxt.options.appConfig.header, { + title: siteName, + }) + + nuxt.options.appConfig.seo = defu(nuxt.options.appConfig.seo, { + titleTemplate: `%s - ${siteName}`, + title: siteName, + description: meta.description || '', + }) + + nuxt.options.appConfig.github = defu(nuxt.options.appConfig.github, { + owner: gitInfo?.owner, + name: gitInfo?.name, + url: gitInfo?.url, + branch: getGitBranch(), + }) + + nuxt.options.appConfig.toc = defu(nuxt.options.appConfig.toc, { + title: 'On this page', + }) + }, +}) diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts new file mode 100644 index 0000000..b54a7e5 --- /dev/null +++ b/app/nuxt.config.ts @@ -0,0 +1,49 @@ +import { extendViteConfig } from '@nuxt/kit' + +// Flag enabled when developing docs theme +const dev = !!process.env.NUXT_DOCS_DEV + +export default defineNuxtConfig({ + modules: [ + '@nuxt/ui-pro', + '@nuxt/content', + '@nuxt/image', + '@nuxtjs/robots', + 'nuxt-og-image', + 'nuxt-llms', + () => { + // Update @nuxt/content optimizeDeps options + extendViteConfig((config) => { + config.optimizeDeps ||= {} + config.optimizeDeps.include ||= [] + config.optimizeDeps.include.push('@nuxt/content > slugify') + config.optimizeDeps.include = config.optimizeDeps.include + .map(id => id.replace(/^@nuxt\/content > /, 'docus > @nuxt/content > ')) + }) + }, + ], + devtools: { + enabled: dev, + }, + css: ['../app/assets/css/main.css'], + content: { + build: { + markdown: { + highlight: { + langs: ['bash', 'diff', 'json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml'], + }, + }, + }, + }, + nitro: { + prerender: { + routes: ['/'], + crawlLinks: true, + failOnError: false, + autoSubfolderIndex: false, + }, + }, + icon: { + provider: 'iconify', + }, +}) diff --git a/app/nuxt.schema.ts b/app/nuxt.schema.ts new file mode 100644 index 0000000..209e878 --- /dev/null +++ b/app/nuxt.schema.ts @@ -0,0 +1,218 @@ +import { field, group } from '@nuxt/content/preview' + +export default defineNuxtSchema({ + appConfig: { + ui: group({ + title: 'UI', + description: 'UI Customization.', + icon: 'i-lucide-palette', + fields: { + colors: group({ + title: 'Colors', + description: 'Manage main colors of your application', + icon: 'i-lucide-palette', + fields: { + primary: field({ + type: 'string', + title: 'Primary', + description: 'Primary color of your UI.', + icon: 'i-lucide-palette', + default: 'green', + required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'], + }), + neutral: field({ + type: 'string', + title: 'Neutral', + description: 'Neutral color of your UI.', + icon: 'i-lucide-palette', + default: 'slate', + required: ['slate', 'gray', 'zinc', 'neutral', 'stone'], + }), + }, + }), + icons: group({ + title: 'Icons', + description: 'Manage icons used in the application.', + icon: 'i-lucide-settings', + fields: { + search: field({ + type: 'icon', + title: 'Search Bar', + description: 'Icon to display in the search bar.', + icon: 'i-lucide-search', + default: 'i-lucide-search', + }), + dark: field({ + type: 'icon', + title: 'Dark mode', + description: 'Icon of color mode button for dark mode.', + icon: 'i-lucide-moon', + default: 'i-lucide-moon', + }), + light: field({ + type: 'icon', + title: 'Light mode', + description: 'Icon of color mode button for light mode.', + icon: 'i-lucide-sun', + default: 'i-lucide-sun', + }), + external: field({ + type: 'icon', + title: 'External Link', + description: 'Icon for external link.', + icon: 'i-lucide-external-link', + default: 'i-lucide-external-link', + }), + chevron: field({ + type: 'icon', + title: 'Chevron', + description: 'Icon for chevron.', + icon: 'i-lucide-chevron-down', + default: 'i-lucide-chevron-down', + }), + hash: field({ + type: 'icon', + title: 'Hash', + description: 'Icon for hash anchors.', + icon: 'i-lucide-hash', + default: 'i-lucide-hash', + }), + }, + }), + }, + }), + seo: group({ + title: 'SEO', + description: 'SEO configuration.', + icon: 'i-lucide-search', + fields: { + title: field({ + type: 'string', + title: 'Title', + description: 'Title to display in the header.', + icon: 'i-lucide-type', + default: '', + }), + description: field({ + type: 'string', + title: 'Description', + description: 'Description to display in the header.', + icon: 'i-lucide-type', + default: '', + }), + }, + }), + header: group({ + title: 'Header', + description: 'Header configuration.', + icon: 'i-lucide-layout', + fields: { + title: field({ + type: 'string', + title: 'Title', + description: 'Title to display in the header.', + icon: 'i-lucide-type', + default: '', + }), + logo: group({ + title: 'Logo', + description: 'Header logo configuration.', + icon: 'i-lucide-image', + fields: { + light: field({ + type: 'media', + title: 'Light Mode Logo', + description: 'Pick an image from your gallery.', + icon: 'i-lucide-sun', + default: '', + }), + dark: field({ + type: 'media', + title: 'Dark Mode Logo', + description: 'Pick an image from your gallery.', + icon: 'i-lucide-moon', + default: '', + }), + alt: field({ + type: 'string', + title: 'Alt', + description: 'Alt to display for accessibility.', + icon: 'i-lucide-text', + default: '', + }), + }, + }), + }, + }), + socials: field({ + type: 'object', + title: 'Social Networks', + description: 'Social links configuration.', + icon: 'i-lucide-network', + default: {}, + }), + toc: group({ + title: 'Table of contents', + description: 'TOC configuration.', + icon: 'i-lucide-list', + fields: { + title: field({ + type: 'string', + title: 'Title', + description: 'Title of the table of contents.', + icon: 'i-lucide-heading', + default: 'On this page', + }), + bottom: group({ + title: 'Bottom', + description: 'Bottom section of the table of contents.', + icon: 'i-lucide-list', + fields: { + title: field({ + type: 'string', + title: 'Title', + description: 'Title of the bottom section.', + icon: 'i-lucide-heading', + default: 'Community', + }), + links: field({ + type: 'array', + title: 'Links', + description: 'Links to display in the bottom section.', + icon: 'i-lucide-link', + default: [], + }), + }, + }), + }, + }), + github: group({ + title: 'GitHub', + description: 'GitHub configuration.', + icon: 'i-simple-icons-github', + fields: { + url: field({ + type: 'string', + title: 'URL', + description: 'GitHub URL.', + icon: 'i-simple-icons-github', + default: '', + }), + branch: field({ + type: 'string', + title: 'Branch', + description: 'GitHub branch.', + icon: 'i-lucide-git-branch', + default: 'main', + }), + rootDir: field({ + type: 'string', + title: 'Root Directory', + description: 'Root directory of the GitHub repository.', + icon: 'i-lucide-folder', + default: '', + }), + }, + }), + }, +}) diff --git a/app/server/routes/raw/[...slug].md.get.ts b/app/server/routes/raw/[...slug].md.get.ts new file mode 100644 index 0000000..7de105a --- /dev/null +++ b/app/server/routes/raw/[...slug].md.get.ts @@ -0,0 +1,25 @@ +import { withLeadingSlash } from 'ufo' +import { stringify } from 'minimark/stringify' +import { queryCollection } from '@nuxt/content/nitro' + +export default eventHandler(async (event) => { + const slug = getRouterParams(event)['slug.md'] + if (!slug?.endsWith('.md')) { + throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true }) + } + + const path = withLeadingSlash(slug.replace('.md', '')) + const page = await queryCollection(event, 'docs').path(path).first() + if (!page) { + throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true }) + } + + // Add title and description to the top of the page if missing + if (page.body.value[0]?.[0] !== 'h1') { + page.body.value.unshift(['blockquote', {}, page.description]) + page.body.value.unshift(['h1', {}, page.title]) + } + + setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8') + return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' }) +}) diff --git a/app/tsconfig.json b/app/tsconfig.json new file mode 100644 index 0000000..eb97e3f --- /dev/null +++ b/app/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.nuxt/tsconfig.json" +} \ No newline at end of file diff --git a/cli/cli.ts b/cli/cli.ts new file mode 100644 index 0000000..d06ec92 --- /dev/null +++ b/cli/cli.ts @@ -0,0 +1,95 @@ +import { resolve } from 'node:path' +import { defineCommand, runMain } from 'citty' +import type { ArgsDef } from 'citty' +import { getNuxtConfig } from './setup' +import type { CLIOptions } from './types' + +export function createCLI(opts: CLIOptions) { + const sharedArgs: ArgsDef = { + dir: { + type: 'positional', + description: 'Docs directory', + required: true, + default: '.', + }, + } + + const init = defineCommand({ + meta: { + name: 'init', + description: 'Initialize a fresh Docus project', + }, + args: { ...sharedArgs }, + async setup({ args }) { + const dir = resolve(args.dir as string) + + const { runCommand } = await import('nuxi') + await runCommand('init', [dir, '-t', 'gh:nuxtlabs/docus/.starter', dir]) + }, + }) + + const dev = defineCommand({ + meta: { + name: 'dev', + description: 'Start docs in development mode', + }, + args: { ...sharedArgs }, + async setup({ args }) { + const dir = resolve(args.dir as string) + const nuxtConfig = await getNuxtConfig(dir, { + ...opts.setup, + dev: true, + }) + + const { runCommand } = await import('nuxi') + await runCommand('dev', [dir, '--no-fork', '--port', process.env.PORT || '4000'], { overrides: nuxtConfig }) + }, + }) + + const prepare = defineCommand({ + meta: { + name: 'prepare', + description: 'Prepare docs for development or production', + }, + args: { ...sharedArgs }, + async setup({ args }) { + const dir = resolve(args.dir as string) + const nuxtConfig = await getNuxtConfig(dir, opts.setup) + + const { runCommand } = await import('nuxi') + await runCommand('prepare', [dir], { overrides: nuxtConfig }) + }, + }) + + const build = defineCommand({ + meta: { + name: 'build', + description: 'Build docs for production', + }, + args: { ...sharedArgs }, + async setup({ args }) { + const dir = resolve(args.dir as string) + const nuxtConfig = await getNuxtConfig(dir, opts.setup) + + const { runCommand } = await import('nuxi') + await runCommand('build', [dir], { overrides: nuxtConfig }) + }, + }) + + const main = defineCommand({ + meta: { + name: opts.name, + description: opts.description, + }, + subCommands: { + init, + dev, + prepare, + build, + }, + }) + + return { + runMain: () => runMain(main), + } +} diff --git a/cli/main.ts b/cli/main.ts new file mode 100755 index 0000000..ae6f3ec --- /dev/null +++ b/cli/main.ts @@ -0,0 +1,16 @@ +#!/usr/bin/env node + +import * as dotenv from 'dotenv' +import { createCLI } from './cli' + +dotenv.config() + +const cli = createCLI({ + name: 'Docus', + description: 'Docus Docs CLI', + setup: { + defaults: {}, + }, +}) + +cli.runMain() diff --git a/cli/setup.ts b/cli/setup.ts new file mode 100644 index 0000000..8b76e68 --- /dev/null +++ b/cli/setup.ts @@ -0,0 +1,38 @@ +import { fileURLToPath } from 'node:url' +import { resolve } from 'node:path' +import type { NuxtConfig } from 'nuxt/config' +import type { DocsOptions } from './types' + +declare global { + const __DOCS_DIR__: string +} + +const appDir = fileURLToPath(new URL('../app', import.meta.url)) + +const pkgDir = fileURLToPath(new URL('..', import.meta.url)) + +export async function getNuxtConfig(dir: string, _opts: DocsOptions = {}) { + const fixLayers = (_, nuxt) => { + const hasDocsDir = nuxt.options._layers.some(layer => layer.cwd === dir) + if (!hasDocsDir) { + nuxt.options._layers.unshift({ + cwd: dir, + config: { + rootDir: dir, + srcDir: dir, + }, + }) + } + } + + // @ts-expect-error __DOCS_DIR__ is not defined + global.__DOCS_DIR__ = resolve(dir, 'content') + + // Prepare loadNuxt overrides + return { + compatibilityDate: '2025-06-17', + extends: [appDir], + modulesDir: [resolve(pkgDir, 'node_modules'), resolve(appDir, 'node_modules')], + modules: [fixLayers], + } as NuxtConfig +} diff --git a/cli/types.ts b/cli/types.ts new file mode 100644 index 0000000..3a7882c --- /dev/null +++ b/cli/types.ts @@ -0,0 +1,23 @@ +export interface CLIOptions { + name: string + description: string + setup: DocsOptions +} + +export interface DocsOptions { + dev?: boolean + defaults?: { + // Module name + name?: string + // Module description + description?: string + // Docs directory + dir?: string + // Website URL + url?: string + // GitHub repository + github?: string + // GitHub branch + branch?: string + } +} diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts new file mode 100644 index 0000000..657df59 --- /dev/null +++ b/docs/app/app.config.ts @@ -0,0 +1,41 @@ +export default defineAppConfig({ + socials: { + x: 'https://x.com/nuxt_js', + discord: 'https://discord.com/invite/ps2h6QT', + nuxt: 'https://nuxt.com', + }, + github: { + rootDir: 'docs', + }, + toc: { + bottom: { + title: 'Community', + links: [{ + icon: 'i-lucide-book-open', + label: 'Nuxt UI Pro docs', + to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt', + target: '_blank', + }, + { + icon: 'i-lucide-credit-card', + label: 'Purchase a license', + to: 'https://ui.nuxt.com/pro/purchase', + target: '_blank', + }], + }, + }, + uiPro: { + pageHero: { + slots: { + title: 'font-semibold sm:text-6xl', + container: '!pb-0', + }, + }, + pageCard: { + slots: { + container: 'lg:flex min-w-0', + wrapper: 'flex-none', + }, + }, + }, +}) diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css new file mode 100644 index 0000000..1fe5cab --- /dev/null +++ b/docs/app/assets/css/main.css @@ -0,0 +1,14 @@ +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@source "../../../content/**/*"; +@source "../../../../app/app/app.config.ts"; + +@theme static { + --font-sans: 'Public Sans', sans-serif; + --container-8xl: 90rem; +} + +:root { + --ui-container: var(--container-8xl); +} \ No newline at end of file diff --git a/docs/app/components/AppHeaderCTA.vue b/docs/app/components/AppHeaderCTA.vue new file mode 100644 index 0000000..3af2fa3 --- /dev/null +++ b/docs/app/components/AppHeaderCTA.vue @@ -0,0 +1,11 @@ + diff --git a/docs/app/components/AppHeaderLogo.vue b/docs/app/components/AppHeaderLogo.vue new file mode 100644 index 0000000..6ec3804 --- /dev/null +++ b/docs/app/components/AppHeaderLogo.vue @@ -0,0 +1,90 @@ + + + diff --git a/docs/app/components/content/BrowserFrame.vue b/docs/app/components/content/BrowserFrame.vue new file mode 100644 index 0000000..62d0bf1 --- /dev/null +++ b/docs/app/components/content/BrowserFrame.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/app/components/content/ColorModeSwitch.vue b/docs/app/components/content/ColorModeSwitch.vue new file mode 100644 index 0000000..646d349 --- /dev/null +++ b/docs/app/components/content/ColorModeSwitch.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/app/components/content/CommandSearch.vue b/docs/app/components/content/CommandSearch.vue new file mode 100644 index 0000000..74ee549 --- /dev/null +++ b/docs/app/components/content/CommandSearch.vue @@ -0,0 +1,14 @@ + + +