Skip to content

Commit 0ae18a3

Browse files
farnabazfarnabaz
committed
docs: update stream playground
1 parent 5b896d7 commit 0ae18a3

3 files changed

Lines changed: 37 additions & 44 deletions

File tree

‎docs/app/composables/useMDCStream.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Readable } from 'node:stream'
22
import type { MinimarkTree } from 'minimark'
33
import { readonly, ref, shallowRef } from 'vue'
4-
import { parseStreamIncremental, parseStreamIncrementalWithMarkdownIt } from 'mdc-syntax/stream'
4+
import { parseStreamIncremental } from 'mdc-syntax/stream'
55

66
export interface MDCStreamState {
77
body: MinimarkTree
@@ -58,16 +58,11 @@ export function useMDCStream(options?: MDCStreamOptions) {
5858
* @param stream - Node.js Readable or Web ReadableStream
5959
* @param useMarkdownIt - Use markdown-it parser instead of unified/remark
6060
*/
61-
async function startStream(
62-
stream: Readable | ReadableStream<Uint8Array>,
63-
useMarkdownIt = false,
64-
) {
61+
async function startStream(stream: Readable | ReadableStream<Uint8Array>) {
6562
isStreaming.value = true
6663

6764
try {
68-
const parser = useMarkdownIt
69-
? parseStreamIncrementalWithMarkdownIt
70-
: parseStreamIncremental
65+
const parser = parseStreamIncremental
7166

7267
for await (const result of parser(stream)) {
7368
// Update state with each chunk
@@ -96,6 +91,7 @@ export function useMDCStream(options?: MDCStreamOptions) {
9691
}
9792
}
9893
catch (error) {
94+
console.error(error)
9995
state.value = {
10096
...state.value,
10197
error: error as Error,

‎docs/app/pages/stream.vue‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ async function simulateStream() {
174174
// Start the stream
175175
streamController.start()
176176
177-
await startStream(streamController.stream, selectedParser.value === 'markdown-it')
177+
await startStream(streamController.stream)
178178
scrollToBottom()
179179
}
180180
@@ -205,43 +205,32 @@ function reset() {
205205
<template>
206206
<div class="h-[calc(100vh-64px)] flex flex-col overflow-hidden">
207207
<!-- Compact Header -->
208-
<div class="flex-shrink-0 bg-gradient-to-r from-primary to-purple-600 p-4">
209-
<div class="flex justify-between items-center">
208+
<div class="flex-shrink-0 relative px-3 py-3 sm:p-4">
209+
<div class="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.2),rgba(255,255,255,0.5))] dark:bg-grid-slate-700/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.2),rgba(255,255,255,0.5))]" />
210+
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-0">
210211
<div>
211-
<h1 class="text-white text-2xl font-bold mb-1">
212+
<h1 class="text-neutral-900 dark:text-white text-lg sm:text-2xl font-bold mb-0.5 sm:mb-1">
212213
MDC Syntax Streaming Demo
213214
</h1>
214-
<p class="text-white/90 text-sm">
215+
<p class="text-neutral-600 dark:text-neutral-400 text-xs sm:text-sm">
215216
Real-time markdown rendering with Vue 3
216217
</p>
217218
</div>
218-
<div class="flex gap-2 items-center">
219+
<div class="flex gap-2 items-center flex-wrap">
219220
<div
220221
v-if="isStreaming || elementsCount > 0"
221-
class="text-right mr-4"
222+
class="text-right mr-2 sm:mr-4"
222223
>
223224
<div class="text-white text-xs opacity-90">
224225
{{ bytesLength }} bytes · {{ elementsCount }} nodes
225226
</div>
226-
<div class="w-48 h-1 bg-white/20 rounded-full overflow-hidden mt-2">
227+
<div class="w-32 sm:w-48 h-1 bg-white/20 rounded-full overflow-hidden mt-1 sm:mt-2">
227228
<div
228229
class="h-full bg-white transition-all duration-300"
229230
:style="{ width: state.isComplete ? '100%' : '75%' }"
230231
/>
231232
</div>
232233
</div>
233-
<!-- <USelectMenu
234-
v-model="selectedParser"
235-
:items="[
236-
{ value: 'remark', label: 'Remark' },
237-
{ value: 'markdown-it', label: 'Markdown-it' },
238-
]"
239-
value-key="value"
240-
option-key="label"
241-
:disabled="isStreaming"
242-
size="sm"
243-
class="w-32"
244-
/> -->
245234
<UButton
246235
:disabled="isStreaming"
247236
size="sm"
@@ -273,9 +262,9 @@ function reset() {
273262
</div>
274263

275264
<!-- Two Column Layout -->
276-
<div class="flex-1 grid grid-cols-3 overflow-hidden">
265+
<div class="flex-1 grid grid-cols-1 lg:grid-cols-3 overflow-hidden">
277266
<!-- Rendered Output Column -->
278-
<div class="flex flex-col overflow-hidden bg-white dark:bg-neutral-950 col-span-2">
267+
<div class="flex flex-col overflow-hidden bg-white dark:bg-neutral-950 lg:col-span-2">
279268
<div class="flex justify-between items-center px-4 py-3 bg-neutral-100 dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 flex-shrink-0">
280269
<div class="flex items-center gap-2">
281270
<h3 class="text-neutral-800 dark:text-neutral-200 font-semibold">
@@ -324,8 +313,8 @@ function reset() {
324313
</div>
325314
</div>
326315

327-
<!-- Markdown Column -->
328-
<div class="flex flex-col overflow-hidden bg-white dark:bg-neutral-950 border-l border-neutral-200 dark:border-neutral-800">
316+
<!-- Markdown Column (hidden on mobile) -->
317+
<div class="hidden lg:flex flex-col overflow-hidden bg-white dark:bg-neutral-950 border-l border-neutral-200 dark:border-neutral-800">
329318
<div class="flex justify-between items-center px-4 py-3 bg-neutral-100 dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 flex-shrink-0">
330319
<h3 class="text-neutral-800 dark:text-neutral-200 font-semibold">
331320
Markdown
@@ -388,3 +377,17 @@ function reset() {
388377
background: rgb(100 116 139);
389378
}
390379
</style>
380+
381+
<style scoped>
382+
.bg-grid-slate-100 {
383+
background-image: linear-gradient(to right, rgb(148 163 184 / 0.25) 1px, transparent 1px),
384+
linear-gradient(to bottom, rgb(148 163 184 / 0.25) 1px, transparent 1px);
385+
background-size: 4rem 4rem;
386+
}
387+
388+
.dark .bg-grid-slate-700\/25 {
389+
background-image: linear-gradient(to right, rgb(51 65 85 / 0.25) 1px, transparent 1px),
390+
linear-gradient(to bottom, rgb(51 65 85 / 0.25) 1px, transparent 1px);
391+
background-size: 4rem 4rem;
392+
}
393+
</style>

‎docs/app/utils/components-manifest.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,18 @@ const components = {
1717
}
1818

1919
export default function resolveComponent(name: string) {
20-
// Try the name as-is first
21-
let componentKey = name as keyof typeof components
22-
23-
// If not found, try converting kebab-case to PascalCase
24-
if (!components[componentKey]) {
25-
componentKey = pascalCase(name) as keyof typeof components
26-
}
27-
2820
if (name === 'span') {
2921
return null
3022
}
3123

32-
const loader = components[componentKey]
24+
// Try the name as-is first
25+
const componentKey = name as keyof typeof components
26+
const pascalName = pascalCase(name) as keyof typeof components
27+
28+
const loader = components[componentKey] || components[pascalName]
3329
if (!loader) {
34-
// Return a fallback component instead of throwing
35-
console.warn(`Component "${name}" not found in manifest, using fallback`)
3630
// @ts-expect-error - this is a fallback
37-
return import('#content/components').then(m => m[pascalCase(name)]())
31+
return import('#content/components').then(m => m[pascalName]?.())
3832
}
3933

4034
return loader()

0 commit comments

Comments
 (0)