## Demo: mdsvex

### Greeting.md
```svelte
<script>
  let { name = 'world' } = $props();
  const renderedAt = new Date().toISOString();
</script>

## Hello, {name}!

This block was authored in **Markdown** but compiled into a Svelte component
via [`mdsvex`](https://mdsvex.pngwn.io/), so prose, _emphasis_, `inline code`,
and a normal Svelte `<script>` block all coexist.

Headings get `id` attributes via `rehype-slug`, so this section is linkable as
`#hello-name`. The page was rendered at:

> {renderedAt}
```

### Snippet.svx
```svelte
<script>
  let { items = [] } = $props();
</script>

### A `.svx` file

Same compile pipeline as `.md` — mdsvex accepts both extensions. This snippet
shows a fenced code block (run through the framework's syntax highlighter)
plus a Svelte `{#each}` loop driven by a prop:

```ts
const items = ['Hydration', 'CSS imports', 'MdSvex'];
```

<ol>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ol>
```

### MdsvexDemo.svelte
```svelte
<script>
  import DemoPage from '../../components/DemoPage.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';
  import Greeting from './Greeting.md';
  import Snippet from './Snippet.svx';

  const sources = await loadSources(files);
</script>

<DemoPage
  title="MdSvex"
  description="`.md` and `.svx` files compile through mdsvex into Svelte components — pass them anywhere a `.svelte` component is accepted, or import them as children."
  {sources}
>
  <div class="mdsvex-output">
    <Greeting name="Mochi" />
    <hr />
    <Snippet items={['Hydration', 'CSS imports', 'MdSvex']} />
  </div>
</DemoPage>

<style>
  .mdsvex-output {
    padding: 1rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    line-height: 1.6;
  }
  .mdsvex-output :global(h2),
  .mdsvex-output :global(h3) {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-weight: 500;
  }
  .mdsvex-output :global(p) {
    margin: 0 0 0.9rem;
    color: var(--text-muted);
  }
  .mdsvex-output :global(ul),
  .mdsvex-output :global(ol) {
    margin: 0 0 0.9rem;
    padding-left: 1.5rem;
    color: var(--text-muted);
  }
  .mdsvex-output :global(li) {
    margin-bottom: 0.2rem;
  }
  .mdsvex-output :global(blockquote) {
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.9rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent-soft-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  .mdsvex-output :global(blockquote p:last-child) {
    margin-bottom: 0;
    color: inherit;
  }
  .mdsvex-output :global(.code-block) {
    margin: 1rem 0 1.25rem;
  }
  .mdsvex-output :global(hr) {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px dashed var(--border-strong);
  }
</style>
```

### routes.ts
```ts
import { Mochi } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/mdsvex': Mochi.page('./src/demos/mdsvex/MdsvexDemo.svelte'),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```