feat: add docs dir

.npmrc

@@ -1,2 +1,2 @@
 shamefully-hoist=true
-strict-peer-dependencies=false
+strict-peer-dependencies=false

.prettierignore

@@ -0,0 +1 @@
+*.md

docs/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

docs/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: '@nuxt/eslint-config',
+  rules: {
+    'vue/max-attributes-per-line': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}

docs/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env
+.output

docs/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

docs/README.md

@@ -0,0 +1,57 @@
+# Docus Starter
+
+Starter template for [Docus](https://docus.dev).
+
+## Clone
+
+Clone the repository (using `nuxi`):
+
+```bash
+npx nuxi init -t themes/docus
+```
+
+## Setup
+
+Install dependencies:
+
+```bash
+yarn install
+```
+
+## Development
+
+```bash
+yarn dev
+```
+
+## Edge Side Rendering
+
+Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments.
+
+Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets).
+
+```bash
+yarn build
+```
+
+## Static Generation
+
+Use the `generate` command to build your application.
+
+The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
+
+```bash
+yarn generate
+```
+
+## Preview build
+
+You might want to preview the result of your build locally, to do so, run the following command:
+
+```bash
+yarn preview
+```
+
+---
+
+For a detailed explanation of how things work, check out [Docus](https://docus.dev).

docs/app.config.ts

@@ -0,0 +1,30 @@
+export default defineAppConfig({
+  docus: {
+    title: "Nuxt Panda CSS",
+    description: "Panda CSS module for Nuxt.",
+    socials: {
+      github: "wattanx/nuxt-pandacss",
+    },
+    github: {
+      branch: "main",
+      repo: "wattanx/nuxt-pandacss",
+      owner: "wattanx",
+      edit: true,
+    },
+    aside: {
+      level: 0,
+      collapsed: false,
+      exclude: [],
+    },
+    main: {
+      padded: true,
+      fluid: true,
+    },
+    header: {
+      logo: true,
+      showLinkIcon: true,
+      exclude: [],
+      fluid: true,
+    },
+  },
+});

docs/components/PrimaryButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NuxtLinkProps } from "#app";
+
+defineProps<{
+  link: NuxtLinkProps;
+}>();
+</script>
+<template>
+  <NuxtLink v-bind="link">
+    <button class="primary-button">
+      <span v-if="!$slots?.default">Hello Amsterdam 👋</span>
+      <span v-else>
+        <ContentSlot :use="$slots.default" unwrap="p" />
+      </span>
+    </button>
+  </NuxtLink>
+</template>
+<style lang="ts">
+css({
+  '.primary-button': {
+    backgroundColor: '{color.yellow.300}',
+    color: '#000',
+    width: '100%',
+    fontSize: '1.5rem',
+    border: '3px solid #000',
+    borderRadius: '13px',
+    paddingInline: '1.5rem',
+    paddingBlock: '0.75rem',
+    '@md': {
+      width: '240px'
+    }
+  }
+})
+</style>

docs/content/0.index.md

@@ -0,0 +1,48 @@
+---
+title: Panda CSS integration for Nuxt
+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/wattanx/nuxt-pandacss
+---
+
+#title
+Panda CSS module for Nuxt.
+
+#description
+Help you set up [Panda CSS](https://panda-css.com/) into your Nuxt Application.
+
+#support
+  ::terminal
+  ---
+  content:
+  - npm i -D @wattanx/nuxt-pandacss
+  ---
+  ::
+::
+
+::card-grid
+
+#root
+:ellipsis{left=0px width=40rem top=10rem blur=140px}
+
+#default
+  ::card{icon=👌}
+  #title
+  Zero Configuration
+  #description
+  This module helps you set up Panda CSS in your Nuxt application in seconds.
+  ::
+::

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

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

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

@@ -0,0 +1,21 @@
+# Project Structure
+
+Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
+
+## Directory Structure
+
+This is the minimal directory structure to get an up and running Docus website.
+
+```bash
+content/
+  index.md
+app.config.ts
+nuxt.config.ts
+```
+
+The `content/` directory is where you [write Markdown pages](/introduction/writing-pages).
+
+The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design.
+
+
+The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration).

docs/content/1.introduction/3.writing-pages.md

@@ -0,0 +1,41 @@
+# Writing Pages
+
+Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
+
+Each Markdown pages in the `content/` folder will be mapped to a route.
+
+| File                     | Generated route       |
+| ------------------------ | :-------------------- |
+| `index.md`               | `/`                   |
+| `about.md`               | `/about`              |
+| `blog/index.md`          | `/blog`               |
+| `blog/hello.md`          | `/blog/hello`         |
+| `1.guide/2.installation` | `/guide/installation` |
+
+## Frontmatter
+
+Docus supports multiple Front-matter attributes for pages.
+
+```md [index.md]
+---
+title: "Get Started"
+description: "Let's learn how to use my amazing module."
+---
+```
+
+| **Key**                 | **Type**  | **Default** | **Description**                                               |
+| ----------------------- | --------- | ----------- | ------------------------------------------------------------- |
+| `layout`                | `string`  | `default`   | Use any layout name like you would in `definePageMeta()`      |
+| `title`                 | `string`  |             | Defines the page title and H1 in docs pages                   |
+| `description`           | `string`  |             | Defines the page description and excerpt in docs pages        |
+| `redirect`              | `string`  |             | A route path to redirect                                      |
+| `image`                 | `object`  |             | OpenGraph cover image                                         |
+| **Docs layout options** |           |             |                                                               |
+| `aside`                 | `boolean` |             | Toggles the visibility of aside navigation                    |
+| `toc`                   | `boolean` |             | Toggles the visibility of table of contents                   |
+| `header`                | `boolean` |             | Toggles the visibility of the page header                     |
+| `bottom`                | `boolean` |             | Toggles the visibility of page bottom section                 |
+| **Navigation options**  |           |             |                                                               |
+| `navigation`            | `boolean` |             | Toggles the visibility of the page or directory in navigation |
+| `navigation.title`      | `string`  |             | Changes the name of the page or directory in navigation       |
+| `navigation.icon`       | `string`  |             | Changes the icon of the page or directory in navigation       |