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

package/.playground/content/2.content-elements/10.horizontal-rule.md

@@ -0,0 +1,25 @@
+---
+title: Horizontal Rule
+description: Horizontal line separator element.
+icon: lucide:minus
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  Before
+  
+  ---
+  
+  After
+  :::
+
+```md
+Before
+
+---
+
+After
+```
+:: 

package/.playground/content/2.content-elements/11.tables.md

@@ -0,0 +1,25 @@
+---
+title: Tables
+description: HTML table elements with headers and data cells.
+icon: lucide:table
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  | Key | Type      | Description                                 |
+  | --- | --------- | ------------------------------------------- |
+  | 1   | Wonderful | Table with `some long code snippet example` |
+  | 2   | Wonderful | Data                                        |
+  | 3   | Wonderful | Website                                     |
+  :::
+
+```md
+| Key | Type      | Description                                 |
+| --- | --------- | ------------------------------------------- |
+| 1   | Wonderful | Table with `some long code snippet example` |
+| 2   | Wonderful | Data                                        |
+| 3   | Wonderful | Website                                     |
+```
+:: 

package/.playground/content/2.content-elements/12.overview.md

@@ -0,0 +1,93 @@
+---
+title: Overview
+description: A comprehensive example showing multiple prose elements together.
+icon: lucide:layout
+---
+
+## Example
+
+::stack
+  :::div{.p-8}
+  # The Joke Tax Chronicles
+  
+  Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
+  
+  ## The King's Plan
+  
+  The king thought long and hard, and finally came up with [a brilliant plan](#): he would tax the jokes in the kingdom.
+  
+  > "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
+  
+  ### The Joke Tax
+  
+  The king's subjects were not amused. They grumbled and complained, but the king was firm:
+  
+  - 1st level of puns: 5 gold coins
+  - 2nd level of jokes: 10 gold coins
+  - 3rd level of one-liners : 20 gold coins
+  
+  As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
+  
+  ### Jokester's Revolt
+  
+  Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
+  
+  And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
+  
+  ### The People's Rebellion
+  
+  The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
+  
+  | King's Treasury | People's happiness |
+  | :-------------- | :----------------- |
+  | Empty           | Overflowing        |
+  | Modest          | Satisfied          |
+  | Full            | Ecstatic           |
+  
+  The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
+  
+  The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
+  :::
+
+```md height=400
+# The Joke Tax Chronicles
+
+Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
+
+## The King's Plan
+
+The king thought long and hard, and finally came up with [a brilliant plan](#): he would tax the jokes in the kingdom.
+
+> "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
+
+### The Joke Tax
+
+The king's subjects were not amused. They grumbled and complained, but the king was firm:
+
+- 1st level of puns: 5 gold coins
+- 2nd level of jokes: 10 gold coins
+- 3rd level of one-liners : 20 gold coins
+
+As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
+
+### Jokester's Revolt
+
+Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
+
+And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
+
+### The People's Rebellion
+
+The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
+
+| King's Treasury | People's happiness |
+| :-------------- | :----------------- |
+| Empty           | Overflowing        |
+| Modest          | Satisfied          |
+| Full            | Ecstatic           |
+
+The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
+
+The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
+```
+:: 

package/.playground/content/2.content-elements/13.text-components.md

@@ -0,0 +1,36 @@
+---
+title: Text Components
+description: Text components are used to display text in a variety of ways.
+icon: i-lucide:brackets
+---
+
+All this content components can be written in text component format.\
+It's provide possibility to pass custom properties or customize the content with Tailwind CSS classes.
+
+::alert{type="warning" icon="i-lucide:triangle-alert" title="Don't overuse it"}
+Use it when necessary, it's not ideal to add style markup in markdown. Adding a lot of styles in your markdown will be hard to maintain the content.\
+**Repeating the same style or adding a lot of styles is a sign that you should use a markdown component instead.**
+::
+
+
+## Usage
+
+::stack
+  :::div{.p-4}
+    :h3[Heading 3]
+    :p[Paragraph]{.text-center.text-primary}
+    :br
+    A colored :a[Link]{.bg-yellow-200.text-primary}
+    :hr
+    ![](https://picsum.photos/id/152/200/133){width=100}
+  :::
+
+```md
+:h3[Heading 3]
+:p[Paragraph]{.text-center.text-primary}
+:br
+A colored :a[Link]{.bg-yellow-200.text-primary}
+:hr
+![](https://picsum.photos/id/152/200/133){width=100}
+```
+::

package/.playground/content/2.content-elements/2.headings.md

@@ -0,0 +1,32 @@
+---
+title: Headings
+description: HTML heading elements from h1 to h6.
+icon: lucide:heading
+---
+
+## Usage
+
+::stack
+  :::div{.p-4.md:p-8}
+  # Heading 1
+  
+  ## Heading 2
+  
+  ### Heading 3
+  
+  #### Heading 4
+  
+  ##### Heading 5
+  
+  ###### Heading 6
+  :::
+
+```md
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+:: 

package/.playground/content/2.content-elements/3.paragraphs.md

@@ -0,0 +1,39 @@
+---
+title: Paragraphs
+description: Basic text content blocks.
+icon: lucide:text
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  :::
+
+```md
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+```
+::
+
+## Line breaks
+
+In Markdown, line breaks aren't automatically handled. To insert a line break within a paragraph, add a backslash :shortcut{value="\"} at the end of the line. This inserts a `<br />` tag.
+
+::stack
+  :::div{.p-4}
+  A first line with a line break.\
+  A second line in the same paragraph.
+
+  Another paragraph.
+  :::
+
+```md
+A first line with a line break.\
+A second line in the same paragraph.
+
+Another paragraph.
+```
+::
+
+You can use :shortcut{value="Shift + Enter"} to achieve the same result more conveniently.

package/.playground/content/2.content-elements/4.lists.md

@@ -0,0 +1,37 @@
+---
+title: Lists
+description: Ordered and unordered list elements.
+icon: lucide:list
+---
+
+## Unordered List
+
+::stack
+  :::div{.p-4}
+  - Foo
+  - Bar
+  - Baz
+  :::
+
+```md
+- Foo
+- Bar
+- Baz
+```
+::
+
+## Ordered List
+
+::stack
+  :::div{.p-4}
+  1. Foo
+  2. Bar
+  3. Baz
+  :::
+
+```md
+1. Foo
+2. Bar
+3. Baz
+```
+:: 

package/.playground/content/2.content-elements/5.links.md

@@ -0,0 +1,17 @@
+---
+title: Links
+description: HTML anchor elements for navigation.
+icon: lucide:link
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  [Link](/getting-started/introduction)
+  :::
+
+```md
+[Link](/getting-started/introduction)
+```
+:: 

package/.playground/content/2.content-elements/6.images.md

@@ -0,0 +1,17 @@
+---
+title: Images
+description: HTML image elements with alt text and source URL.
+icon: lucide:image
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  ![Photo by Drew Beamer](https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80)
+  :::
+
+```md
+![Photo by Drew Beamer](https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80)
+```
+:: 

package/.playground/content/2.content-elements/7.blockquotes.md

@@ -0,0 +1,17 @@
+---
+title: Blockquotes
+description: HTML blockquote elements for quotations.
+icon: lucide:quote
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  :::
+
+```md
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+```
+:: 

package/.playground/content/2.content-elements/8.code-blocks.md

@@ -0,0 +1,141 @@
+---
+title: Code Blocks
+description: Fenced code blocks with syntax highlighting and additional features.
+icon: lucide:code-2
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  ```ts
+  export default () => {
+    console.log('Code block');
+  };
+  ```
+  :::
+
+````md
+```ts
+export default () => {
+  console.log('Code block');
+};
+```
+````
+::
+
+### With Title
+
+::stack
+  :::div{.p-4}
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    // My Nuxt config
+  });
+  ```
+  :::
+
+````md
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  // My Nuxt config
+});
+```
+````
+::
+
+### Highlight Lines
+
+::stack
+  :::div{.p-4}
+  ```ts{2}
+  export default () => {
+    console.log('Code block');
+  };
+  ```
+  :::
+
+````md
+```ts{2}
+export default () => {
+  console.log('Code block');
+};
+```
+````
+::
+
+### Line Numbers
+
+::stack
+  :::div{.p-4}
+  ```ts{1} line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
+  :::
+
+````md
+```ts{1} line-numbers
+// line-numbers is enabled
+const line2 = 'This is line 2';
+const line3 = 'This is line 3';
+```
+````
+::
+
+### Fixed Height
+
+::stack
+  :::div{.p-4}
+  ```ts height=150
+  const parsedMeta = computed(() => {
+    const split = meta?.split(' ') ?? [];
+    const params = new Map<string, string | undefined>();
+  
+    for (const param of split) {
+      const [key, val] = param.split('=');
+      params.set(key, val);
+    }
+  
+    return params;
+  });
+  ```
+  :::
+
+````md
+```ts height=150
+const parsedMeta = computed(() => {
+  const split = meta?.split(' ') ?? [];
+  const params = new Map<string, string | undefined>();
+
+  for (const param of split) {
+    const [key, val] = param.split('=');
+    params.set(key, val);
+  }
+
+  return params;
+});
+```
+````
+::
+
+### Custom Icon
+
+::stack
+  :::div{.p-4}
+  ```ts [Custom Icon] icon=lucide:code-xml line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
+  :::
+
+````md
+```ts [Custom Icon] icon=lucide:code-xml line-numbers
+// line-numbers is enabled
+const line2 = 'This is line 2';
+const line3 = 'This is line 3';
+```
+````
+:: 

package/.playground/content/2.content-elements/9.inline-code.md

@@ -0,0 +1,21 @@
+---
+title: Inline Code
+description: Inline code snippets with optional syntax highlighting.
+icon: lucide:code
+---
+
+## Usage
+
+::stack
+  :::div{.p-4}
+  `code inline`
+  
+  `const codeInline: string = 'highlighted code inline'`{lang="ts"}
+  :::
+
+```md
+`code inline`
+
+`const codeInline: string = 'highlighted code inline'`{lang="ts"}
+```
+:: 

package/.playground/content/2.content-elements/_dir.yml

@@ -0,0 +1,3 @@
+title: Basic Content Elements
+description: A set of basic markdown elements for writing content.
+icon: lucide:letter-text

package/.playground/content/2.content-elements/index.md

@@ -0,0 +1,8 @@
+---
+title: Content Elements
+description: The basic markdown elements for writing content.
+icon: lucide:letter-text
+navigation: false
+---
+
+:card-group{data="/content-elements/"}