@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/.playground/content/4.development/1.configuration/7.umami.md

@@ -0,0 +1,41 @@
+---
+title: Umami
+icon: lucide:cloud
+description: Integration for Umami analytics.
+---
+
+**shadcn-docs-nuxt** has built-in support for [Umami Analytics](https://umami.is/). Add your Umami `data-website-id` to `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    site: {
+      umami: {
+        enable: true,
+        src: 'https://cloud.umami.is/script.js',
+        dataWebsiteId: 'your-data-website-id',
+      },
+    },
+  },
+});
+```
+
+These values are used to add the Umami script to `<head>`{lang="html"} as shown below.
+
+```html
+<script defer src="https://cloud.umami.is/script.js" data-website-id="your-data-website-id"></script>
+```
+
+## Parameters
+
+::field-group
+  ::field{name="enable" type="boolean" default-value="false"}
+  Whether to turn on the umami integration.
+  ::
+  ::field{name="src" type="string" default-value="https://cloud.umami.is/script.js"}
+  The link src in the tracking code.
+  ::
+  ::field{name="dataWebsiteId" type="string"}
+  The _Website ID_ from umami dashboard.
+  ::
+::

package/.playground/content/4.development/1.configuration/_dir.yml

@@ -0,0 +1,3 @@
+title: Configuration
+icon: lucide:settings
+navigation.redirect: /development/configuration/overview

package/.playground/content/4.development/2.advanced/1.override.md

@@ -0,0 +1,49 @@
+---
+title: Overriding
+icon: lucide:blocks
+description: Replacing shadcn-docs-nuxt components with custom vue components.
+---
+
+_shadcn-docs-nuxt_ is a [Nuxt Layer](https://nuxt.com/docs/getting-started/layers). You can override any component in _shadcn-docs-nuxt_ by creating a custom vue component in your project with the same path as the original component. **Make sure that your component contains the same props as the original component.**
+
+Here is a brief showcase of the `components/` folder in _shadcn-docs-nuxt_.
+
+::file-tree
+---
+tree:
+  - components:
+    - layout:
+      - Header.vue
+      - Footer.vue
+      - ...
+    - content:
+      - Accordion.vue
+      - Alert.vue
+      - ProseCode.vue
+      - ...
+    - ui:
+      - button/
+      - card/
+      - ...
+---
+::
+
+:alert[Check out the complete file structure on **GitHub**]{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/components" target="_blank"}
+
+For example, if you want to override the `Footer` component, create `/components/layout/Footer.vue` in your project root.
+
+```vue [/components/layout/Footer.vue]
+<template>
+  <footer class="py-6 text-muted-foreground md:px-8 md:py-0">
+    <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
+      My footer
+      <span class="flex-1" />
+      {{ footer.credits }}
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const { footer } = useConfig().value;
+</script>
+```

package/.playground/content/4.development/2.advanced/2.math.md

@@ -0,0 +1,89 @@
+---
+icon: lucide:sigma
+title: Math Equations
+description: Write LaTeX in shadcn-docs-nuxt.
+---
+
+::tabs{variant="line"}
+  ::div{label="KaTeX"}
+    ::steps
+      ### Install Plugins
+      :pm-install{name="remark-math rehype-katex" save-dev}
+
+      ### Add Plugins to Nuxt Config
+      ```ts [nuxt.config.ts]
+      export default defineNuxtConfig({
+        devtools: { enabled: true },
+        extends: ['shadcn-docs-nuxt'],
+        css: [
+          'katex/dist/katex.min.css',
+        ],
+        content: {
+          markdown: {
+            remarkPlugins: [
+              'remark-math',
+            ],
+            rehypePlugins: {
+              'rehype-katex': {
+                output: 'html',
+              },
+            },
+          },
+        },
+      });
+      ```
+
+      ### Write LaTeX
+      ````mdc
+      #### Inline
+      $E = mc^2$
+
+      #### Centered
+      When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+      $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+      #### Math Block
+      ```math
+      L = \frac{1}{2} \rho v^2 S C_L
+      ```
+      ````
+    ::
+  ::
+  ::div{label="MathJax"}
+    ::steps
+      ### Install Plugins
+      :pm-install{name="remark-math rehype-mathjax" save-dev}
+
+      ### Add Plugins to Nuxt Config
+      ```ts [nuxt.config.ts]
+      export default defineNuxtConfig({
+        devtools: { enabled: true },
+        extends: ['shadcn-docs-nuxt'],
+        content: {
+          markdown: {
+            remarkPlugins: [
+              'remark-math',
+            ],
+            rehypePlugins: [
+              'rehype-mathjax',
+            ],
+          },
+        },
+      });
+      ```
+
+      ### Write LaTeX
+      ````mdc
+      $E = mc^2$
+
+      $$
+      E = mc^2
+      $$
+
+      ```math
+      E = mc^2
+      ```
+      ````
+    ::
+  ::
+::

package/.playground/content/4.development/2.advanced/_dir.yml

@@ -0,0 +1,3 @@
+title: Advanced
+icon: lucide:pyramid
+navigation.redirect: /development/configuration

package/.playground/content/4.development/3.themes.md

@@ -0,0 +1,9 @@
+---
+title: Themes
+icon: lucide:palette
+description: Add colors. Make it yours.
+---
+
+::Alert{to="/development/configuration#theme"}
+See how to customize the theme in **Configuration**.
+::

package/.playground/content/4.development/4.composables.md

@@ -0,0 +1,38 @@
+---
+title: Composables
+description: Composable functions exported by shadcn-docs-nuxt.
+icon: 'lucide:square-function'
+---
+
+### `useConfig()`
+
+Get the config from `app.config.ts`.
+
+- `main`, `header`, `aside`, `footer` and `toc` can be set from `_dir.yml` and any `page.md` file.
+
+```ts
+const {
+  site,
+  search,
+  header,
+  main,
+  aside,
+  footer,
+  toc,
+} = useConfig();
+```
+
+### `useScrollspy()`
+
+Modified from [docus](https://github.com/nuxt-themes/docus/blob/main/composables/useScrollspy.ts). `useScrollspy()` is used in docs layout to make the ToC display the currently visible headings.
+
+```ts
+const {
+  // Headings on the page
+  visibleHeadings,
+  // Active headings (for the current page)
+  activeHeadings,
+  // Update headings (an array of DOM nodes)
+  updateHeadings
+} = useScrollspy();
+```

package/.playground/content/4.development/5.installation.md

@@ -0,0 +1,36 @@
+---
+title: Installation
+description: How to install shadcn-docs-nuxt in your app.
+icon: 'lucide:play'
+---
+
+## Using the starter template
+
+::steps
+### Get Starter Template
+
+:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
+
+::alert
+Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
+::
+
+### Install Dependencies
+
+:pm-install
+
+### Development Server
+
+:pm-run{script="dev"}
+
+::alert{type="success" icon="lucide:circle-check"}
+Well done! A browser window should automatically open for http://localhost:3000.
+::
+
+### Configure shadcn-docs
+
+Pick the theme or adjust other settings to your liking.
+
+:read-more{to="/development/configuration/overview"}
+
+::

package/.playground/content/4.development/_dir.yml

@@ -0,0 +1,3 @@
+title: Development
+icon: lucide:code-xml
+navigation.redirect: /development/configuration

package/.playground/content/_menu-footer.md

@@ -0,0 +1,5 @@
+---
+title: test
+---
+
+[tada](/)

package/.playground/content/index.md

@@ -0,0 +1,67 @@
+---
+title: Home
+navigation: false
+layout: editorial
+header:
+  position: over
+---
+
+::hero
+---
+actions:
+  - name: Get Started
+    to: /getting-started/introduction
+  - name: GitHub
+    variant: outline
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    leftIcon: lucide:github
+announcement:
+  title: Release v0.8.13
+  icon: 🎉
+  to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/releases/latest
+  target: _blank
+class: bg-gradient-to-b from-primary/20 to-transparent full-width full-content
+---
+#title
+Effortless and Beautiful Template.
+
+#description
+Beautifully designed Nuxt Content template built with :br
+[shadcn-vue](https://www.shadcn-vue.com) and [unocss](https://unocss.dev).
+::
+
+::div{.bg-gray-100}
+test div
+::
+
+::section{.bg-gray-100}
+test section
+::
+
+::prose-section{.bg-gray-100}
+  :::card
+  lorem ipsum
+  :::
+
+  :::card
+  auiea
+  :::
+::
+
+latuinerst nrst auiea Quisque rutrum. Praesent congue erat at massa. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Duis vel nibh at velit scelerisque suscipit. Praesent nec nisl a purus blandit viverra.
+
+::prose-section{.wide-content.bg-gray-100}
+section wide-content
+::
+
+::prose-section{.full-width.bg-gray-100}
+section full-width
+::
+
+::prose-section{.bg-gray-100.full-width.wide-content}
+section full-width wide-content
+::
+
+::prose-section{.bg-gray-100.full-width.full-content}
+section full-width full-content
+::

package/.playground/content/test-card.md

@@ -0,0 +1,187 @@
+---
+title: Card test
+toc: false
+---
+
+## Basic
+
+::card
+test
+::
+
+## With title
+
+::card
+---
+to: https://shadcn-vue.com
+---
+
+
+
+
+### title
+
+Card content
+::
+
+::card
+---
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+
+#content
+Card content
+::
+
+::card
+---
+icon: lucide:arrow-up-right
+to: https://shadcn-vue.com
+---
+Card content
+::
+
+::card
+---
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+::
+
+## With image
+
+::card
+---
+icon: lucide:arrow-up-right
+media: og-shadcn-docs-dark.png
+to: https://shadcn-vue.com
+---
+Content
+::
+
+::card
+---
+media: og-nuxt.png
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+
+#description
+Description
+
+#content
+Beautifully designed **Nuxt Content** template with **shadcn-vue**.\
+\_Customizable. Compatible. Open Source.\_
+
+#footer
+Footer
+::
+
+## Media position
+
+:/\:card-group
+
+::card
+---
+icon: lucide:sun
+media: og-shadcn-docs-dark.png
+mediaPosition: right
+to: https://shadcn-vue.com
+---
+#title
+Card Title #test
+
+#descriptionn
+Description
+
+#content
+test #test lorem ipsum dolor sit **amet** !
+Donec vitae orci sed dolor rutrum auctor. Vestibulum fringilla pede sit amet augue. In auctor lobortis lacus. Praesent vestibulum dapibus nibh.
+::
+
+::card
+---
+class: border-none shadow-none
+icon: lucide:sun
+media: og-nuxt.png
+mediaPosition: left
+to: https://shadcn-vue.com
+---
+#title
+Card Title #test uit auiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+
+#description
+Description group-hover/card\:scale-105 transition-all group-hover/card\:scale-105 transition-all
+
+#content
+test #test uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+::
+
+::card
+---
+class: h-100
+icon: lucide:sun
+media: https://static.vecteezy.com/system/resources/thumbnails/002/073/237/small_2x/helix-pattern-on-a-white-background-free-vector.jpg
+mediaPosition: cover
+to: https://shadcn-vue.com
+---
+#tsest
+
+#title
+Card Title #test uit auiesrt auienrst auie auieeee
+::
+
+::card
+---
+class: h-50 bg-blue-200
+icon: lucide:sun
+iconPosition: right
+mediaPosition: center
+title: Title Etiam feugiat lorem non metus.
+---
+auieaui
+::
+
+::card
+---
+icon: lucide:sun
+media: https://static.vecteezy.com/system/resources/thumbnails/002/073/237/small_2x/helix-pattern-on-a-white-background-free-vector.jpg
+mediaPosition: centere
+---
+#tsest
+
+#title
+Card Title #test uit auiesrt auienrst auie auieeee
+
+#media
+  :::hero
+  ---
+  actions:
+    - name: Get Started
+      to: /getting-started
+    - name: GitHub
+      variant: outline
+      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+      leftIcon: lucide:github
+  announcement:
+    title: Release v1.0.0
+    icon: lucide:party-popper
+    to: /getting-started
+  ---
+  #title
+  Effortless and Beautiful :br Docs Template.
+  
+  #description
+  Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
+  :::
+::
+
+\::

package/.playground/content/test.md

@@ -0,0 +1,88 @@
+---
+title: test
+layout: editorial
+header:
+  position: over
+---
+
+::hero
+---
+actions:
+  - name: Get Started
+    to: /getting-started
+  - name: GitHub
+    variant: outline
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    leftIcon: lucide:github
+announcement:
+  title: Release v1.0.0
+  icon: lucide:party-popper
+  to: /getting-started
+class: full-width force-dark
+media: https://picsum.photos/id/62/2000/500
+mediaPosition: cover
+---
+#title
+Effortless and Beautiful Docs Template.
+
+#description
+Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+::
+
+:read-more{title="Nuxt website" to="/development/composables"}
+
+::steps
+### Get Starter Template
+
+  :::code-group
+  ```bash [npm]
+  npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+  
+  ```bash [pnpm]
+  pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+  
+  ```bash [bun]
+  bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+  :::
+
+{{ $doc.title || 'default' }}
+
+  :::alert
+  Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
+  :::
+
+### Install Dependencies
+
+  :::code-group
+  ```bash [npm]
+  npm install
+  ```
+  
+  ```bash [pnpm]
+  pnpm install
+  ```
+  
+  ```bash [bun]
+  bun install
+  ```
+  :::
+
+### Development Server
+
+  :::code-group
+  ```bash [npm]
+  npm run dev -- -o
+  ```
+  
+  ```bash [pnpm]
+  pnpm dev -o
+  ```
+  
+  ```bash [bun]
+  bun run dev -o
+  ```
+  :::
+::

package/.playground/content/test2.md

@@ -0,0 +1,12 @@
+---
+title: test 2
+---
+
+::mdc-example
+```mdc
+> test
+```
+::
+
+::mdc-replay{content="test"}
+::