Skip to content

Commit 6508cba

Browse files
farnabazfarnabaz
committed
chore: update examples
1 parent ae682fd commit 6508cba

32 files changed

Lines changed: 611 additions & 1081 deletions

‎docs/app/components/landing/LandingGetStarted.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ const markdown = \`# Hello **World**\`\n<`
1717
+ `/script>
1818
1919
<template>
20-
<MDC :value="markdown" />
20+
<MDC :markdown="markdown" />
2121
</template>\n\`\`\``,
2222
react: `\`\`\`tsx [src/App.tsx]\nimport { MDC } from 'mdc-syntax/react'
2323
2424
export default function App() {
2525
const markdown = \`# Hello **World**\`
2626
27-
return <MDC value={markdown} />
27+
return <MDC markdown={markdown} />
2828
}\n\`\`\``,
2929
}
3030
</script>

‎docs/app/pages/stream.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -322,17 +322,17 @@ function reset() {
322322
</div>
323323
</div>
324324

325-
<!-- AST Structure Column -->
325+
<!-- Markdown Column -->
326326
<div class="flex flex-col overflow-hidden bg-neutral-950 border-l border-neutral-800">
327327
<div class="flex justify-between items-center px-4 py-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
328328
<h3 class="text-neutral-200 font-semibold">
329-
AST Structure
329+
Markdown
330330
</h3>
331331
<UBadge
332332
color="neutral"
333333
variant="soft"
334334
>
335-
{{ elementsCount }} nodes
335+
{{ state.content.length }} bytes
336336
</UBadge>
337337
</div>
338338
<div
@@ -347,7 +347,7 @@ function reset() {
347347
v-else
348348
class="text-center text-neutral-600 py-12"
349349
>
350-
AST structure will appear here
350+
Markdown will appear here
351351
</div>
352352
</div>
353353
</div>

‎examples/react-vite/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ import { MDC } from 'mdc-syntax/react'
156156
157157
export default function App() {
158158
const markdown = \`# Hello **World**\`
159-
return <MDC value={markdown} />
159+
return <MDC markdown={markdown} />
160160
}
161161
\`\`\`
162162

‎examples/vue-vite/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vue-vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MDC Syntax - Vue Example</title>
7+
<link href="/src/index.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vue-vite/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "mdc-syntax-vue-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@tailwindcss/vite": "^4.1.18",
13+
"mdc-syntax": "link:../..",
14+
"vue": "^3.5.27"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^6.0.3",
18+
"autoprefixer": "^10.4.20",
19+
"postcss": "^8.4.49",
20+
"typescript": "^5.7.2",
21+
"vite": "^6.0.3",
22+
"vue-tsc": "^2.2.0"
23+
}
24+
}

‎examples/vue-vite/src/App.vue‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<script setup lang="ts">
2+
import { ref, computed, type Component } from 'vue'
3+
import { MDC } from 'mdc-syntax/vue'
4+
import CustomAlert from './components/CustomAlert.vue'
5+
import CustomHeading from './components/CustomHeading.vue'
6+
import StreamingPreview from './components/StreamingPreview.vue'
7+
8+
const sampleMarkdown = `# MDC Syntax for Vue
9+
10+
Welcome to **MDC Syntax** - a powerful markdown parser built for the *AI era*.
11+
12+
## Features
13+
14+
- 🚀 **5.5x faster** than regex-based parsers
15+
- ⚡ O(n) linear-time algorithm
16+
- 🔄 Streaming support for real-time rendering
17+
- 🎨 Custom component support
18+
- 📦 Zero dependencies
19+
20+
## Code Example
21+
22+
Here's a simple Vue example:
23+
24+
\`\`\`vue
25+
<script setup>
26+
import { MDC } from 'mdc-syntax/vue'
27+
28+
const markdown = \`# Hello **World**\`\n<`
29+
+ `/script>
30+
31+
<template>
32+
<MDC :markdown="markdown" />
33+
</template>
34+
\`\`\`
35+
36+
## Custom Components
37+
38+
MDC supports custom Vue-like components:
39+
40+
::alert{type="success"}
41+
This is a **success** alert with custom styling!
42+
::
43+
44+
::alert{type="warning"}
45+
⚠️ This parser handles streaming markdown correctly, even with incomplete syntax.
46+
::
47+
48+
## Lists
49+
50+
### Ordered List
51+
1. First item
52+
2. Second item
53+
3. Third item
54+
55+
### Unordered List
56+
- React support
57+
- Vue support
58+
- TypeScript support
59+
- Zero dependencies
60+
61+
## Links & Formatting
62+
63+
Visit [MDC Syntax on GitHub](https://github.com/nuxt-content/mdc-syntax) for more information.
64+
65+
You can use *italic*, **bold**, and even ~~strikethrough~~ text.
66+
67+
## Blockquotes
68+
69+
> "The development of full artificial intelligence could spell the end of the human race."
70+
> — Stephen Hawking
71+
72+
## Tables
73+
74+
| Feature | MDC Syntax | Traditional Parsers |
75+
|---------|-----------|---------------------|
76+
| Speed | 5.5x faster | Baseline |
77+
| Streaming | ✅ Auto-close | ❌ Broken |
78+
| Algorithm | O(n) | O(n²) or worse |
79+
80+
---
81+
82+
## Try It Yourself
83+
84+
Edit the markdown below to see it update in real-time!
85+
`
86+
87+
const markdown = ref(sampleMarkdown)
88+
const useCustom = ref(true)
89+
const mode = ref<'editor' | 'streaming'>('editor')
90+
91+
const customComponents = computed<Record<string, Component>>(() => {
92+
if (!useCustom.value) return {}
93+
return {
94+
alert: CustomAlert,
95+
h1: CustomHeading,
96+
}
97+
})
98+
</script>
99+
100+
<template>
101+
<Suspense>
102+
<div class="h-screen flex flex-col overflow-hidden max-w-[1400px] mx-auto">
103+
<header class="flex-shrink-0 text-center py-6 px-8 border-b-2 border-neutral-200 dark:border-neutral-700">
104+
<h1 class="text-4xl bg-gradient-to-r from-green-500 to-teal-500 bg-clip-text text-transparent">
105+
MDC Syntax - Vue Example
106+
</h1>
107+
<p class="mt-2 text-neutral-500 dark:text-neutral-400">
108+
Interactive markdown editor with live preview & streaming support
109+
</p>
110+
</header>
111+
112+
<div class="flex-shrink-0 px-8 py-4 bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
113+
<div class="flex items-center gap-4 flex-wrap">
114+
<button
115+
:class="[
116+
'px-4 py-2 rounded-lg transition-colors',
117+
mode === 'editor'
118+
? 'bg-green-500 text-white'
119+
: 'bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-300 dark:hover:bg-neutral-600',
120+
]"
121+
@click="mode = 'editor'"
122+
>
123+
Editor Mode
124+
</button>
125+
<button
126+
:class="[
127+
'px-4 py-2 rounded-lg transition-colors',
128+
mode === 'streaming'
129+
? 'bg-green-500 text-white'
130+
: 'bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-300 dark:hover:bg-neutral-600',
131+
]"
132+
@click="mode = 'streaming'"
133+
>
134+
Streaming Demo
135+
</button>
136+
<label class="flex items-center gap-2 cursor-pointer text-[0.95rem]">
137+
<input
138+
v-model="useCustom"
139+
type="checkbox"
140+
class="w-5 h-5 cursor-pointer"
141+
>
142+
Use custom components
143+
</label>
144+
</div>
145+
</div>
146+
147+
<div class="flex-1 overflow-hidden px-8 py-6">
148+
<!-- Editor Mode -->
149+
<div
150+
v-if="mode === 'editor'"
151+
class="grid grid-cols-1 md:grid-cols-2 gap-6 h-full"
152+
>
153+
<div class="flex flex-col min-h-0">
154+
<h2 class="mb-3 text-xl text-neutral-800 dark:text-neutral-100">
155+
Markdown Input
156+
</h2>
157+
<textarea
158+
v-model="markdown"
159+
placeholder="Enter markdown here..."
160+
class="flex-1 w-full p-4 font-mono text-sm leading-relaxed border-2 border-neutral-200 dark:border-neutral-700 rounded-lg resize-none bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-100 focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-500/10 overflow-y-auto"
161+
/>
162+
</div>
163+
164+
<div class="flex flex-col min-h-0">
165+
<h2 class="mb-3 text-xl text-neutral-800 dark:text-neutral-100">
166+
Live Preview
167+
</h2>
168+
<div class="flex-1 border-2 border-neutral-200 dark:border-neutral-700 rounded-lg p-6 bg-white dark:bg-neutral-800 overflow-y-auto">
169+
<div class="leading-relaxed">
170+
<MDC
171+
:markdown="markdown"
172+
:components="customComponents"
173+
/>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
179+
<!-- Streaming Mode -->
180+
<div
181+
v-else
182+
class="h-full flex flex-col space-y-4 overflow-y-auto"
183+
>
184+
<div class="flex-shrink-0 bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded-r">
185+
<h3 class="text-lg font-semibold text-green-900 dark:text-green-100 mb-2">
186+
🔄 Streaming Demo
187+
</h3>
188+
<p class="text-green-800 dark:text-green-200 text-sm">
189+
Watch as markdown content streams in character-by-character, with automatic handling of incomplete syntax.
190+
This demonstrates MDC Syntax's unique ability to render partial markdown correctly.
191+
</p>
192+
</div>
193+
194+
<div class="flex-1 min-h-0">
195+
<StreamingPreview
196+
:markdown="markdown"
197+
:chunk-size="10"
198+
:delay-ms="30"
199+
:components="customComponents"
200+
/>
201+
</div>
202+
</div>
203+
</div>
204+
</div>
205+
</Suspense>
206+
</template>

‎examples/vue-vite/src/components/CustomAlert.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
type?: 'info' | 'warning' | 'error' | 'success'
4+
}>()
5+
6+
const typeStyles = {
7+
info: 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-900 dark:text-blue-100',
8+
warning: 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 text-yellow-900 dark:text-yellow-100',
9+
error: 'border-red-500 bg-red-50 dark:bg-red-900/30 text-red-900 dark:text-red-100',
10+
success: 'border-green-500 bg-green-50 dark:bg-green-900/30 text-green-900 dark:text-green-100',
11+
}
12+
</script>
13+
14+
<template>
15+
<div :class="['border-l-4 p-4 my-4 rounded-r', typeStyles[type || 'info']]">
16+
<slot />
17+
</div>
18+
</template>

‎examples/vue-vite/src/components/CustomHeading.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
id?: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<h1
9+
:id="id"
10+
class="text-green-500 border-b-2 border-green-500 pb-2"
11+
>
12+
✨ <slot />
13+
</h1>
14+
</template>

0 commit comments

Comments
 (0)