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

package/.playground/components/content/MdcReplay.vue

@@ -0,0 +1,319 @@
+<template>
+  <ClientOnly>
+    <UiCard class="relative px-8 py-4 [&:not(:first-child)]:mt-5 overflow-hidden">
+      <MdcEditor
+        v-model="markdown"
+        @editor-created="handleEditorCreated"
+      />
+
+      <div
+        v-if="isEditorReady"
+        class="absolute w-full flex items-center justify-center gap-2 mx--6 mt--10 [--primary:142_71%_45%] h-8"
+      >
+        <Shortcut
+          v-for="(char, index) in currentChars"
+          :key="index + currentPosition[0]"
+          :value="char || ''"
+          size="md"
+          class="min-w-6 justify-center"
+          :class="[
+            char === 'hidden' && '!hidden',
+            index === offset-1 && '!h-8 min-w-8 border-primary !font-bold animate-in slide-in-from-bottom-0.5',
+            index < offset && 'shadow-lg bg-primary/10',
+            index > offset-1 && 'border-none',
+            processedContent.markedPositions.has(currentPosition[0] - offset + index) && 'text-white !bg-blue !border-blue',
+            processedContent.markedPositions.has(currentPosition[0] - offset + index) && index === offset-1 && '!bg-blue',
+          ]"
+          :style="{
+            opacity: index === offset-1 ? 1
+              : index < offset-1 ? Math.max(0, 1 - (offset-2 - index) * 0.1)
+                : Math.max(0, 0.9 - (index - offset) * 0.1),
+          }"
+        />
+      </div>
+
+      <div class="flex items-center gap-2 mx--6 [--primary:142_71%_45%]">
+        <div class="flex items-center gap-1">
+          <UiButton
+            :disabled="currentPosition[0] <= 0"
+            size="xs"
+            variant="outline"
+            @click="firstChar"
+          >
+            <NuxtIcon name="lucide:chevron-first" />
+          </UiButton>
+
+          <UiButton
+            :disabled="currentPosition[0] <= 0"
+            size="xs"
+            variant="outline"
+            @click="prevChar"
+          >
+            <NuxtIcon name="lucide:chevron-left" />
+          </UiButton>
+
+          <UiButton
+            size="sm"
+            @click="togglePlayPause"
+          >
+            <NuxtIcon :name="isPlaying ? 'lucide:pause' : 'lucide:play'" />
+          </UiButton>
+
+          <UiButton
+            size="xs"
+            variant="outline"
+            :disabled="currentPosition[0] >= _content.length"
+            @click="nextChar"
+          >
+            <NuxtIcon name="lucide:chevron-right" />
+          </UiButton>
+
+          <UiButton
+            class="min-w-12"
+            size="xs"
+            variant="outline"
+            @click="cycleSpeed"
+          >
+            x{{ speedLabel }}
+          </UiButton>
+
+          <UiButton
+            class="min-w-12"
+            size="xs"
+            variant="outline"
+            @click="onReload"
+          >
+            <NuxtIcon name="lucide:rotate-cw" />
+          </UiButton>
+        </div>
+
+        <UiSlider
+          v-model="currentPosition"
+          :min="0"
+          :max="_content.length"
+          :disabled="isPlaying"
+        />
+      </div>
+    </UiCard>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from 'prosekit/core'
+
+const props = defineProps<{
+  content: string
+  defaultPosition?: number
+}>()
+
+// Add a function to process content and track marked positions
+const processedContent = computed(() => {
+  const markedPositions = new Set<number>()
+  const contentArray: string[] = []
+  let inMark = false
+  let inKbd = false
+  let currentPos = 0
+  let currentKbdContent = ''
+
+  const content = props.content?.trim() || ''
+  for (let i = 0; i < content.length; i++) {
+    if (content.slice(i, i + 7) === '<Xmark>') {
+      inMark = true
+      i += 6 // Skip the <Xmark> tag
+    }
+    else if (content.slice(i, i + 8) === '</Xmark>') {
+      inMark = false
+      i += 7 // Skip the </Xmark> tag
+    }
+    else if (content.slice(i, i + 6) === '<Xkbd>' || content.slice(i, i + 11) === '<Xkbd mark>') {
+      inKbd = true
+      currentKbdContent = ''
+      if (content.slice(i, i + 11) === '<Xkbd mark>') {
+        inMark = true
+        i += 10
+      }
+      else {
+        i += 5
+      }
+    }
+    else if (content.slice(i, i + 7) === '</Xkbd>') {
+      inKbd = false
+      contentArray.push(currentKbdContent)
+      currentPos++
+      i += 6
+    }
+    else {
+      if (inMark) {
+        markedPositions.add(currentPos)
+      }
+      if (inKbd) {
+        inMark = false
+        currentKbdContent += content[i]
+      }
+      else {
+        contentArray.push(content[i])
+      }
+
+      currentPos++
+    }
+  }
+
+  return {
+    content: contentArray,
+    markedPositions,
+  }
+})
+
+// Update _content to use processed content
+const _content = computed(() => processedContent.value.content)
+
+const currentPosition = ref(props.defaultPosition ? [props.defaultPosition] : [0])
+
+// Update getMdContent to use markedPositions
+const getMdContent = (position: number) => {
+  return _content.value.slice(0, position).map((char) => {
+    return char.length > 1 ? '\\\n' : char
+  }).join('')
+}
+
+// Update the md ref
+const markdown = ref(getMdContent(currentPosition.value[0]))
+const isPlaying = ref(false)
+const replayInterval = ref<ReturnType<typeof setInterval>>()
+
+const baseSpeed = 250 // base interval in ms
+const speeds = [0.5, 1, 2]
+const currentSpeedIndex = ref(1) // start at 1x speed
+
+const speed = computed(() => baseSpeed / speeds[currentSpeedIndex.value])
+const speedLabel = computed(() => speeds[currentSpeedIndex.value])
+
+const offset = 6
+const currentChars = computed(() => {
+  const start = currentPosition.value[0] - offset
+
+  return Array.from({ length: offset * 2 + 1 }, (_, i) => {
+    const pos = start + i
+    if (pos < 0 || pos >= _content.value.length)
+      return 'hidden'
+    return getCurrentChar(pos + 1)
+  })
+})
+
+const cycleSpeed = () => {
+  currentSpeedIndex.value = (currentSpeedIndex.value + 1) % speeds.length
+  if (isPlaying.value) {
+    stopReplay()
+    startReplay()
+  }
+}
+
+const startReplay = () => {
+  isPlaying.value = true
+  replayInterval.value = setInterval(() => {
+    if (currentPosition.value[0] < _content.value.length) {
+      typeInEditor(_content.value[currentPosition.value[0]])
+      currentPosition.value = [currentPosition.value[0] + 1]
+      // markdown.value = getMdContent(currentPosition.value[0])
+      if (!editor.value?.editor?.focused)
+        editor.value?.editor?.focus()
+    }
+    else {
+      stopReplay()
+    }
+  }, speed.value)
+}
+
+const stopReplay = () => {
+  if (replayInterval.value) {
+    clearInterval(replayInterval.value)
+  }
+  isPlaying.value = false
+}
+
+const togglePlayPause = () => {
+  if (isPlaying.value) {
+    stopReplay()
+  }
+  else {
+    if (currentPosition.value[0] >= _content.value.length) {
+      currentPosition.value = [0]
+      markdown.value = ''
+    }
+    startReplay()
+  }
+}
+
+const nextChar = () => {
+  if (currentPosition.value[0] < _content.value.length) {
+    currentPosition.value = [currentPosition.value[0] + 1]
+    markdown.value = getMdContent(currentPosition.value[0])
+  }
+}
+
+const prevChar = () => {
+  if (currentPosition.value[0] > 0) {
+    currentPosition.value = [currentPosition.value[0] - 1]
+    markdown.value = getMdContent(currentPosition.value[0])
+  }
+}
+
+const firstChar = () => {
+  currentPosition.value = [0]
+  markdown.value = ''
+}
+
+const onReload = () => {
+  currentPosition.value = props.defaultPosition ? [props.defaultPosition] : [0]
+}
+
+// Watch for manual slider changes when not playing
+watch(currentPosition, (newPos) => {
+  if (!isPlaying.value) {
+    markdown.value = getMdContent(newPos[0])
+  }
+})
+
+const getCurrentChar = (pos: number): string | null => {
+  const char = _content.value[pos - 1] || null
+  return char === ' ' ? '␣' : char === '\n' ? '↵' : char
+}
+
+const editor = ref<{ editor: Editor }>()
+const isEditorReady = ref(false)
+const handleEditorCreated = (_editor: { editor: Editor }) => {
+  editor.value = _editor
+  isEditorReady.value = true
+}
+
+const typeInEditor = (key: string) => {
+  if (!editor.value?.editor || !key) return
+  const _editor = toRaw(editor.value.editor)
+
+  if (key === '\n') {
+    const tr = _editor.view.state.tr.replaceSelectionWith(_editor.view.state.schema.nodes.paragraph.create())
+    _editor.view.dispatch(tr)
+  }
+  else if (key === 'Shift+Enter') {
+    const tr = _editor.view.state.tr.replaceSelectionWith(_editor.view.state.schema.node('hardBreak'))
+    _editor.view.dispatch(tr)
+  }
+  else if (key === 'Enter') {
+    // Handle space separately
+    const tr = _editor.view.state.tr.replaceSelectionWith(_editor.view.state.schema.node('hardBreak'))
+    _editor.view.dispatch(tr)
+  }
+  else {
+    // Insert text at current selection
+    // const { from, to } = _editor.view.state.selection
+    // const tr = _editor.view.state.tr.replaceWith(
+    //   from,
+    //   to,
+    //   _editor.view.state.schema.text(key),
+    // )
+    const node = _editor.view.state.schema.text(key)
+    const tr = _editor.view.state.tr.replaceSelectionWith(node)
+    _editor.view.dispatch(tr)
+  }
+}
+</script>

package/.playground/content/1.getting-started/1.introduction.md

@@ -0,0 +1,8 @@
+---
+title: Introduction
+description: Documentation about how to write and configure the website.
+icon: lucide:info
+toc: false
+---
+
+:card-group{data="/getting-started/writing"}

package/.playground/content/1.getting-started/2.writing/1.markdown.md

@@ -0,0 +1,56 @@
+---
+title: Markdown
+description: How to write content with Markdown syntax
+icon: i-pajamas:markdown-mark-solid
+---
+
+Markdown is a lightweight markup language designed to provide a simple and readable syntax with minimal markup.
+
+Its goal is to allow users to write using an easy-to-read and easy-to-write plain text that can be easily converted to structurally valid HTML or other rich text formats, focusing on content over formatting.
+
+This minimalism makes Markdown ideal for documentation, web writing, collaborative editing, bots and LLMs processing, AI content generation...
+
+::div{.w-full.flex.items-center.gap-2.mt-5}
+:div[:robot:]{.text-3xl.mt--2}
+
+:div[:heart:]{.text-xl}
+
+:icon{name="vscode-icons:file-type-markdown" .text-4xl}
+::
+
+::alert
+---
+to: /content-elements
+icon: lucide:box
+---
+Learn more about **markdown syntax**, and how to use it.
+::
+
+::alert
+---
+to: https://daringfireball.net/projects/markdown/
+icon: i-pajamas:markdown-mark-solid
+---
+Open the original **Markdown specification**.
+::
+
+## MarkDown Components (MDC)
+
+MarkDown Components (MDC) supercharges regular Markdown to allow writing interactive components.
+
+::alert
+---
+to: /components
+icon: lucide:box
+---
+Learn more about **MDC components**, and how to use them.
+::
+
+::alert
+---
+to: https://content.nuxt.com/usage/markdown
+target: _blank
+icon: lucide:arrow-big-down
+---
+Read the detailed MDC usage guide in the **Nuxt Content** Docs.
+::

package/.playground/content/1.getting-started/2.writing/2.pages.md

@@ -0,0 +1,177 @@
+---
+title: Pages
+description: Front matter attributes.
+icon: lucide:file
+key: example
+---
+
+## `^-` Frontmatter
+
+Front-matter is a convention of Markdown-based CMS to provide metadata to documents, like description or title. Remark MDC uses the YAML syntax with `key: value` pairs.
+
+To define frontmatter, start your document with `---\n---` section and put your desired data in YAML format within this section.
+
+```md
+---
+title: Title of the page
+description: meta description of the page
+---
+
+<!-- Content of the page -->
+```
+
+You can reuse the same frontmatter attributes in the content or in the components props.\
+Add `:` before the key to bind the frontmatter value to the component.\
+Or use the `{{ $doc.key }}` syntax to bind the value of the frontmatter.
+
+::stack
+  ::div{class="p-4"}
+    This is the title from the frontmatter: **Title of the page**.
+
+    ::alert
+    ---
+    :type: key
+    ---
+    With the property `:type: key`, it displays a **{{ $doc.key }} alert**.
+    ::
+
+    Or inline:
+
+    :alert[Title of the page]{:type="key" :icon="icon"}
+  ::
+
+  ```mdc
+  ---
+  title: Title of the page
+  icon: lucide:file
+  key: example
+  ---
+
+  This is the title from the frontmatter: **{{ $doc.title }}**.
+
+  ::alert
+  ---
+  :type: key
+  ---
+  With the property `:type: key`, it displays a **{{ $doc.key }} alert**.
+  ::
+
+  Or inline:
+
+  :alert[{{ $doc.title }}]{:type="key" :icon="icon"}
+  ```
+::
+
+## Available Frontmatter Attributes
+
+```md
+---
+title: Front Matter
+description: Front matter attributes used in shadcn-docs-nuxt.
+icon: lucide:book-type
+
+navTruncate: false
+navBadges:
+  - value: New
+    type: lime
+
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#alert
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
+    target: _blank
+
+authors:
+  - name: Tony Zhang
+    username: ZTL-UwU
+    avatar: https://www.github.com/ZTL-UwU.png
+    to: https://github.com/ZTL-UwU
+    target: _blank
+---
+
+<!-- Content of the page -->
+```
+
+## Showcases
+
+::tabs{variant="line"}
+::stack{label="badges"}
+![badges-showcase](/front-matter-showcase/badges.png){class="w-full"}
+```yml
+badges:
+  - value: 0.8.10
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
+    target: _blank
+```
+::
+
+::stack{label="authors"}
+![authors-showcase](/front-matter-showcase/authors.png){class="w-full"}
+```yml
+authors:
+  - name: Tony Zhang
+    username: ZTL-UwU
+    avatar: https://www.github.com/ZTL-UwU.png
+    to: https://github.com/ZTL-UwU
+    target: _blank
+```
+::
+
+::stack{label="navBadges"}
+![nav-badges-showcase](/front-matter-showcase/nav-badges.png){class="w-full"}
+```yml
+navBadges:
+  - value: New
+    type: lime
+```
+::
+::
+
+## Parameters
+
+::field-group
+  ::field{name="title" type="string"}
+  Title of the page. Defaults to the filename.
+  ::
+  ::field{name="description" type="string"}
+  Description of the page. Defaults to the first `<p>`{lang="html"} of the page.
+  ::
+  ::field{name="navigation" type="boolean" default-value="true"}
+  Define if the page is included in the sidebar. Set it to `false` in `index.md`.
+  ::
+  ::field{name="icon" type="string"}
+  The icon shown in the sidebar for the page.
+  ::
+  ::field{name="navBadges" type="[]"}
+  A list of badges appended to the end of the sidebar link.
+  ::
+  ::field{name="navTruncate" type="boolean" default-value="true"}
+  Whether to truncate the sidebar title.
+  ::
+  ::field{name="badges" type="[]"}
+  A list of badges shown at the bottom of page title.
+  ::
+  ::field{name="authors" type="[]"}
+  A list of authors shown at the bottom of page title.
+  ::
+  ::field{name="toc" type="boolean" default-value="true"}
+  Whether to show the toc section for this page.
+  ::
+  ::field{name="aside" type="boolean" default-value="true"}
+  Whether to show the aside section for this page.
+  ::
+  ::field{name="editLink" type="boolean" default-value="true"}
+  Whether to show the edit link for this page.
+  ::
+  ::field{name="prevNext" type="boolean" default-value="true"}
+  Whether to show the previous & next page buttons.
+  ::
+  ::field{name="breadcrumb" type="boolean" default-value="true"}
+  Whether to show the breadcrumb.
+  ::
+::

package/.playground/content/1.getting-started/2.writing/3.folders.md

@@ -0,0 +1,56 @@
+---
+title: Folders
+icon: lucide:folder
+description: Configure directory nodes via _dir.yml files.
+---
+
+You can customize folders by creating a `_dir.yml` file in the folder.
+
+::code-group
+```yml [_dir.yml]
+title: Folder
+icon: lucide:folder
+navigation.redirect: /frameworks/vue
+navBadges:
+  - value: New
+    type: lime
+sidebar:
+  style: group
+collapse: false
+```
+```[Directory structure]
+content/
+  1.frameworks/
+    _dir.yml
+    1.vue.md
+    2.nuxt.md
+```
+::
+
+## Parameters
+
+::field-group
+  ::field{name="title" type="string"}
+  Title of the page. Defaults to the filename.
+  ::
+  ::field{name="icon" type="string"}
+  The icon shown in the sidebar for the page.
+  ::
+  ::field{name="navBadges" type="[]"}
+  A list of badges appended to the end of the sidebar link.
+  ::
+  ::field{name="collapse" type="boolean"}
+  Whether the folder should be collapsed by default.
+  ::
+  ::field{name="sidebar" type="object"}
+    ::collapsible{title="Details" default-open}
+      ::field{name="style" type="'default' | 'tree' | 'group'" default-value="default"}
+      The style used for the folder. The default value can be configured in the [appConfig](/development/configuration/overview#aside).
+
+      |                      `default`                      |                    `tree`                     |                     `group`                     |
+      | :-------------------------------------------------: | :-------------------------------------------: | :---------------------------------------------: |
+      | ![sidebar-default](/sidebar-default.png){width=400} | ![sidebar-tree](/sidebar-tree.png){width=400} | ![sidebar-group](/sidebar-group.png){width=400} |
+      ::
+    ::
+  ::
+::

package/.playground/content/1.getting-started/2.writing/_dir.yml

@@ -0,0 +1,3 @@
+title: Writing
+icon: lucide:edit
+navigation.redirect: /getting-started/writing/markdown

package/.playground/content/1.getting-started/_dir.yml

@@ -0,0 +1,3 @@
+title: Getting started
+icon: lucide:rocket
+navigation.redirect: /getting-started/introduction

package/.playground/content/2.content-elements/1.text-formatting.md

@@ -0,0 +1,60 @@
+---
+title: Text Formatting
+description: Text styling with bold and italic formatting.
+icon: lucide:bold
+---
+
+## Usage
+
+### Strong
+
+Wrap the text with double asterisks <kbd>\*</kbd><kbd>\*</kbd> to make text bold.\
+Or (less used) use double underscores <kbd>\_</kbd><kbd>\_</kbd>.
+
+::stack
+  :::div{.p-4}
+  A strong **word**.
+
+  Another __strong__ word (less used).
+  :::
+
+```md
+A strong **word**.
+
+Another __strong__ word (less used).
+```
+::
+
+### Italic
+
+Wrap the text with single underscores <kbd>_</kbd> to make text italic.\
+Or (less used) use single asterisks <kbd>*</kbd>.
+
+::stack
+  :::div{.p-4}
+  An italic _word_.
+  
+  Another *italic* word (less used).
+  :::
+
+```md
+An italic _word_.
+  
+Another *italic* word (less used).
+```
+:: 
+
+
+## Tips
+
+You can also use this syntax while writing content in `edition mode`.
+
+::mdc-replay
+---
+content: |
+  A <Xmark>**</Xmark>strong<Xmark>**</Xmark> word.
+
+  An <Xmark>_</Xmark>italic<Xmark>_</Xmark> word.
+default-position: 4
+---
+::