docs: various improvements (#210)

Author: atinux

docs/app/components/landing/HeroDemo.vue

@@ -113,7 +113,7 @@ onBeforeUnmount(() => {
         variant="subtle"
         color="neutral"
         size="xs"
-        to="/play"
+        to="/play/editor?example=all-features"
       />
     </div>
 

docs/app/components/landing/LandingFeatureFrameworks.vue

@@ -13,7 +13,7 @@ defineProps<{
   svelteLinkTo: string
 }>()
 
-const activeTab = ref<'vue' | 'react' | 'svelte'>('vue')
+const activeTab = ref<'react' | 'svelte' | 'vue'>('react')
 
 const vueCode = `<script setup lang="ts">
 import { Comark } from '@comark/vue'
@@ -72,9 +72,9 @@ ${'<'}/script>
 const { data: highlighted } = await useAsyncData('fw-highlight', async () => {
   const themes = { light: 'github-light', dark: 'github-dark' } as const
   const [vue, react, svelte] = await Promise.all([
-    codeToHtml(vueCode, { lang: 'vue', themes }),
     codeToHtml(reactCode, { lang: 'tsx', themes }),
     codeToHtml(svelteCode, { lang: 'svelte', themes }),
+    codeToHtml(vueCode, { lang: 'vue', themes }),
   ])
   return { vue, react, svelte }
 })
@@ -97,19 +97,6 @@ const { data: highlighted } = await useAsyncData('fw-highlight', async () => {
 
     <div class="mt-6 overflow-hidden border border-muted bg-muted/50">
       <div class="flex items-center border-b border-muted">
-        <button
-          class="flex items-center gap-2 border-b-2 px-4 py-2 font-mono text-xs"
-          :class="
-            activeTab === 'vue' ? 'border-primary text-primary' : 'border-transparent text-muted hover:text-highlighted'
-          "
-          @click="activeTab = 'vue'"
-        >
-          <UIcon
-            name="i-logos-vue"
-            class="size-3.5"
-          />
-          App.vue
-        </button>
         <button
           class="flex items-center gap-2 border-b-2 px-4 py-2 font-mono text-xs"
           :class="
@@ -140,13 +127,21 @@ const { data: highlighted } = await useAsyncData('fw-highlight', async () => {
           />
           App.svelte
         </button>
+        <button
+          class="flex items-center gap-2 border-b-2 px-4 py-2 font-mono text-xs"
+          :class="
+            activeTab === 'vue' ? 'border-primary text-primary' : 'border-transparent text-muted hover:text-highlighted'
+          "
+          @click="activeTab = 'vue'"
+        >
+          <UIcon
+            name="i-logos-vue"
+            class="size-3.5"
+          />
+          App.vue
+        </button>
       </div>
       <div class="shiki-block h-[280px] overflow-auto p-4">
-        <div
-          v-show="activeTab === 'vue'"
-          class="text-sm/6"
-          v-html="highlighted?.vue"
-        />
         <div
           v-show="activeTab === 'react'"
           class="text-sm/6"
@@ -157,28 +152,39 @@ const { data: highlighted } = await useAsyncData('fw-highlight', async () => {
           class="text-sm/6"
           v-html="highlighted?.svelte"
         />
+        <div
+          v-show="activeTab === 'vue'"
+          class="text-sm/6"
+          v-html="highlighted?.vue"
+        />
       </div>
     </div>
 
     <div class="mt-4 flex items-center gap-4">
       <UButton
-        :label="vueLinkLabel"
-        :to="vueLinkTo"
+        :label="reactLinkLabel"
+        :to="reactLinkTo"
         variant="link"
+        color="neutral"
+        leading-icon="i-simple-icons-react"
         trailing-icon="i-lucide-arrow-right"
         class="px-0"
       />
       <UButton
-        :label="reactLinkLabel"
-        :to="reactLinkTo"
+        :label="svelteLinkLabel"
+        :to="svelteLinkTo"
         variant="link"
+        color="neutral"
+        leading-icon="i-simple-icons-svelte"
         trailing-icon="i-lucide-arrow-right"
         class="px-0"
       />
       <UButton
-        :label="svelteLinkLabel"
-        :to="svelteLinkTo"
+        :label="vueLinkLabel"
+        :to="vueLinkTo"
         variant="link"
+        color="neutral"
+        leading-icon="i-simple-icons-vuedotjs"
         trailing-icon="i-lucide-arrow-right"
         class="px-0"
       />

docs/app/constants/index.ts

@@ -120,11 +120,9 @@ page:
   maxWidth: 1120px
 ---
 
-# Hello Comark
+# Comark Playground
 
-This is a **Comark** playground inside DevTools.
-
-Write Markdown with component syntax and see the parsed AST in real-time.
+Write Markdown with component syntax and see the preview and parsed AST in real-time.
 
 ## Features
 
@@ -140,14 +138,23 @@ Write Markdown with component syntax and see the parsed AST in real-time.
 
 ### Component Syntax
 
-::callout{color="info" icon="i-lucide-info"}
-This is a Comark component using MDC syntax.
+::callout{color="success" icon="i-lucide-lightbulb"}
+This is a Vue component using the Markdown components syntax.
 ::
 
+::card{icon="i-lucide-rocket" color="primary"}
+#title
+Another component
+#default
+With 2 slots, title and default.
+::
+
+You can use all the [Nuxt UI Typography components](https://ui.nuxt.com/docs/typography/accordion){target="_blank"} in this playground.
+
 ### Github Alert
 
-> [!WARNING]
-> This is a warning alert.
+> [!NOTE]
+> This is a note callout.
 
 ### Math
 

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

@@ -192,17 +192,20 @@ Comark is ideal for:
 ## How It Works
 
 ::div{.border .border-default .rounded .bg-muted .p-4}
-```mermaid {height="250px"}
+```mermaid
 graph LR
-    A[Markdown + Comark] --> B[Parser]
+    A[Markdown] --> B[Parser]
     B --> C[Comark AST]
     C --> D{Renderer}
-    D --> E[Vue]
+    D --> I[ANSI]
+    D --> H[HTML]
+    D --> J[Markdown]
     D --> F[React]
-    D --> G[HTML]
+    D --> G[Svelte]
+    D --> E[Vue]
 ```
 ::
 
-1. **Parse** - Comark parses your content into a compact [Comark AST](/syntax/comark-ast)
+1. **Parse** - Comark parses Markdown into a compact [Comark AST](/syntax/comark-ast)
 2. **Transform** - The AST can be manipulated, cached, or serialized
-3. **Render** - Framework-specific renderers convert the AST to Vue or React components
+3. **Render** - Framework-specific renderers convert the AST to React, Svelte or Vue components, or render to string in Markdown, HTML or ANSI.

docs/content/4.plugins/index.md

@@ -9,57 +9,66 @@ Comark's plugin system extends markdown functionality with specialized features.
 ## Plugins
 
 ::card-group{cols="2"}
-  ::card{icon="i-lucide-shield-check" title="Security" to="/plugins/built-in/security"}
-  Sanitize markdown by removing dangerous HTML elements and attributes
+  ::card{icon="i-lucide-bell" title="Alerts" to="/plugins/built-in/alert"}
+  Render GitHub-style alert blockquotes with icons and colors
+  ::
+
+  ::card{icon="i-lucide-replace" title="Binding" to="/plugins/built-in/binding"}
+  Interpolate frontmatter, runtime data, or parent props with `{{ path || default }}` shorthand
+  ::
+
+  ::card{icon="i-lucide-corner-down-left" title="Breaks" to="/plugins/built-in/breaks"}
+  Convert soft line breaks directly into `:br` components
   ::
 
   ::card{icon="i-lucide-smile" title="Emoji" to="/plugins/built-in/emoji"}
   Convert emoji shortcodes like `:smile:` into emoji characters
   ::
 
-  ::card{icon="i-lucide-code" title="Syntax Highlighting" to="/plugins/built-in/syntax-highlight"}
-  Beautiful code syntax highlighting using Shiki with multi-theme support
+  ::card{icon="i-lucide-footprints" title="Footnotes" to="/plugins/built-in/emoji"}
+  Plugin for adding footnote references and definitions to your Comark documents.
   ::
 
-  ::card{icon="i-lucide-file-text" title="Summary" to="/plugins/built-in/summary"}
-  Extract content summaries using `<!-- more -->` delimiter
+  ::card{icon="i-lucide-heading" title="Headings" to="/plugins/built-in/emoji"}
+  Plugin for extracting the page title and description from document content.
   ::
 
-  ::card{icon="i-lucide-list" title="Table of Contents" to="/plugins/built-in/toc"}
-  Generate hierarchical TOC from headings automatically
+  ::card{icon="i-lucide-braces" title="JSON Render" to="/plugins/built-in/json-render"}
+  Transform JSON Render specs into UI components using `json-render` or `yaml-render` code blocks
   ::
 
-  ::card{icon="i-lucide-bell" title="Alerts" to="/plugins/built-in/alert"}
-  Render GitHub-style alert blockquotes with icons and colors
+  ::card{icon="i-lucide-calculator" title="Mathematics" to="/plugins/built-in/math"}
+  Render LaTeX math formulas using KaTeX with inline and display equations
   ::
 
-  ::card{icon="i-lucide-check-square" title="Task List" to="/plugins/built-in/task-list"}
-  Render interactive checkboxes from `[ ]` and `[x]` list syntax
+  ::card{icon="i-simple-icons-mermaid" title="Mermaid Diagrams" to="/plugins/built-in/mermaid"}
+  Create diagrams and visualizations using Mermaid syntax in code blocks
   ::
 
-  ::card{icon="i-simple-icons-mermaid" title="Mermaid" to="/plugins/built-in/mermaid"}
-  Create diagrams and visualizations using Mermaid syntax in code blocks
+  ::card{icon="i-lucide-quote" title="Punctuation" to="/plugins/built-in/punctuation"}
+  Convert plain-text punctuation into typographically correct Unicode characters
   ::
 
-  ::card{icon="i-lucide-calculator" title="Math" to="/plugins/built-in/math"}
-  Render LaTeX math formulas using KaTeX with inline and display equations
+  ::card{icon="i-lucide-shield-check" title="Security" to="/plugins/built-in/security"}
+  Sanitize markdown by removing dangerous HTML elements and attributes
   ::
 
-  ::card{icon="i-lucide-braces" title="JSON Render" to="/plugins/built-in/json-render"}
-  Transform JSON Render specs into UI components using `json-render` or `yaml-render` code blocks
+  ::card{icon="i-lucide-file-text" title="Summary Extraction" to="/plugins/built-in/summary"}
+  Extract content summaries using `<!-- more -->` delimiter
   ::
 
-  ::card{icon="i-lucide-quote" title="Punctuation" to="/plugins/built-in/punctuation"}
-  Convert plain-text punctuation into typographically correct Unicode characters
+  ::card{icon="i-lucide-code" title="Syntax Highlighting" to="/plugins/built-in/syntax-highlight"}
+  Beautiful code syntax highlighting using Shiki with multi-theme support
   ::
 
-  ::card{icon="i-lucide-corner-down-left" title="Breaks" to="/plugins/built-in/breaks"}
-  Convert soft line breaks directly into `:br` components
+  ::card{icon="i-lucide-check-square" title="Task List" to="/plugins/built-in/task-list"}
+  Render interactive checkboxes from `[ ]` and `[x]` list syntax
   ::
-  
-  ::card{icon="i-lucide-replace" title="Binding" to="/plugins/built-in/binding"}
-  Interpolate frontmatter, runtime data, or parent props with `{{ path || default }}` shorthand
+
+  ::card{icon="i-lucide-list" title="Table of Contents" to="/plugins/built-in/toc"}
+  Generate hierarchical TOC from headings automatically
   ::
+
 ::
 
 ## Guides
@@ -69,13 +78,13 @@ Comark's plugin system extends markdown functionality with specialized features.
   Define plugins with the ComarkPlugin interface and lifecycle hooks
   ::
 
-  ::card{icon="i-simple-icons-markdown" title="Markdown-it Plugins" to="/plugins/custom/markdown-it"}
-  Use existing markdown-it plugins or create new parser syntax rules
-  ::
-
   ::card{icon="i-lucide-git-branch" title="AST API" to="/plugins/custom/ast-api"}
   Traverse and transform the ComarkTree AST using the visit() utility
   ::
+
+  ::card{icon="i-simple-icons-markdown" title="Markdown-it Plugins" to="/plugins/custom/markdown-it"}
+  Use existing markdown-it plugins or create new parser syntax rules
+  ::
 ::
 
 ## Use Plugins

docs/content/index.md

@@ -1,18 +1,18 @@
 ---
 navigation: false
-title: Comark
+title: Markdown + Components
 description: A fast, streaming-ready markdown parser with component support for Vue, React, and Svelte.
 seo:
-  title: Components in Markdown
+  title: Markdown + Components
   description: Fast, streaming-ready markdown parser with Vue, React, and Svelte component support. Parse Comark content from strings or streams with TypeScript support.
   ogImage: /social-card.jpg
 
 ---
 
 ::landing-hero
 ---
-title: Comark
-description: A fast, streaming-ready markdown parser with component support for Vue, React, Svelte, HTML and ANSI terminal.
+title: Markdown + Components
+description: Comark is a fast, streaming-ready markdown parser and renderer with component support for React, Svelte, Vue, HTML and ANSI terminal.
 install: npm install comark
 primaryLabel: Get Started
 primaryTo: /getting-started/introduction
@@ -26,7 +26,7 @@ demoMarkdown: |-
     ## Features
 
     - Parse markdown in real-time
-    - Vue, React, and Svelte components
+    - React, Svelte and Vue components
     - Auto-close incomplete syntax
 
     ::callout{color="info" icon="i-lucide-info"}
@@ -55,7 +55,7 @@ frameworksReactLinkLabel: React docs
 frameworksReactLinkTo: /rendering/react
 frameworksSvelteLinkLabel: Svelte docs
 frameworksSvelteLinkTo: /rendering/svelte
-frameworksTitle: Vue, React & Svelte
+frameworksTitle: React, Svelte & Vue
 frameworksVueLinkLabel: Vue docs
 frameworksVueLinkTo: /rendering/vue
 streamingDescription: Parse content as it arrives. Perfect for AI-generated

examples/1.frameworks/nuxt/README.md

@@ -7,10 +7,10 @@ navigation:
 path: /examples/frameworks/nuxt-ui
 ---
 
-::CodeExplorer
+::code-explorer
 ---
 org: comarkdown
-repo: comark
+repo: comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425
 path: examples/1.frameworks/nuxt
 defaultValue: content/posts/comark-syntax.md
 ---

examples/3.plugins/vue-vite-binding/README.md

@@ -10,7 +10,7 @@ path: /examples/plugins/vue-vite-binding
 ::code-explorer
 ---
 org: comarkdown
-repo: comark
+repo: comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425
 path: examples/3.plugins/vue-vite-binding
 defaultValue: src/App.vue
 ---

examples/3.plugins/vue-vite-json-render/README.md

@@ -10,7 +10,7 @@ path: /examples/plugins/vue-vite-json-render
 ::code-explorer
 ---
 org: comarkdown
-repo: comark
+repo: comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425
 path: examples/3.plugins/vue-vite-json-render
 defaultValue: src/App.vue
 ---

examples/3.plugins/vue-vite-punctuation/README.md

@@ -10,7 +10,7 @@ path: /examples/plugins/vue-vite-punctuation
 ::code-explorer
 ---
 org: comarkdown
-repo: comark
+repo: comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425
 path: examples/3.plugins/vue-vite-punctuation
 defaultValue: src/App.vue
 ---