Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add docus doc website #74

Merged
merged 1 commit into from
Nov 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/docs/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dist
node_modules
.output
.nuxt
8 changes: 8 additions & 0 deletions apps/docs/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -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'
}
}
12 changes: 12 additions & 0 deletions apps/docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
node_modules
*.iml
.idea
*.log*
.nuxt
.vscode
.DS_Store
coverage
dist
sw.*
.env
.output
1 change: 1 addition & 0 deletions apps/docs/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
shamefully-hoist=true
57 changes: 57 additions & 0 deletions apps/docs/README.md
Original file line number Diff line number Diff line change
@@ -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).
38 changes: 38 additions & 0 deletions apps/docs/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export default defineAppConfig({
docus: {
title: 'Docus',
description: 'The best place to start your documentation.',
image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
socials: {
twitter: 'nuxt_js',
github: 'nuxt-themes/docus',
nuxt: {
label: 'Nuxt',
icon: 'simple-icons:nuxtdotjs',
href: 'https://nuxt.com'
}
},
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
}
}
})
99 changes: 99 additions & 0 deletions apps/docs/content/0.index.md
Original file line number Diff line number Diff line change
@@ -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.
::
::
57 changes: 57 additions & 0 deletions apps/docs/content/1.introduction/1.getting-started.md
Original file line number Diff line number Diff line change
@@ -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 <http://localhost:3000>
::
21 changes: 21 additions & 0 deletions apps/docs/content/1.introduction/2.project-structure.md
Original file line number Diff line number Diff line change
@@ -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).
41 changes: 41 additions & 0 deletions apps/docs/content/1.introduction/3.writing-pages.md
Original file line number Diff line number Diff line change
@@ -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 |
Loading
Loading