{
  "$type": "site.standard.document",
  "content": {
    "$type": "at.markpub.markdown",
    "flavor": "gfm",
    "renderingRules": "markdown-it",
    "text": {
      "$type": "at.markpub.text",
      "markdown": "## Lazy-Loading Svelte Component (with Astro wrapper)\n\n```js\nimport LazyLoadDemo from '@components/Notes/Examples/LazyLoadDemo.astro';\n```\n\ninstantiate\n```astro\n<LazyLoadDemo />\n```\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2024-11-10-astro-svelte-5-mdx-tests/)\n\n---\n\n## Simple Svelte 5 Component\n\n```js\nimport DynamicCssBefore from '@components/Notes/Examples/DynamicCssBefore.svelte';\n```\n\ninstantiate\n```astro\n<DynamicCssBefore client:visible />\n```\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2024-11-10-astro-svelte-5-mdx-tests/)\n\n---\n\n## Simple Svelte 5 Component (SVG)\n\n```js\nimport SvgOffsetPath from '@components/Notes/Examples/SvgOffsetPath.svelte';\n```\n\ninstantiate\n```astro\n<SvgOffsetPath client:visible />\n```\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2024-11-10-astro-svelte-5-mdx-tests/)\n\n---\n\n## Svelte 5 Component with Children\n\n```js\nimport CanvasDotplot from '@components/Notes/Examples/CanvasDotplot.svelte';\n```\n\ninstantiate\n```astro\n<CanvasDotplot client:only=\"svelte\">\n\t<div>\n\t\t<h4>\n\t\t\t<code>Astro Children</code>\n\t\t</h4>\n\t</div>\n</CanvasDotplot>\n```\n<div style='--height: 300px;'>\n\t> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2024-11-10-astro-svelte-5-mdx-tests/)\n</div>\n\n## Legacy Svelte 3/4 Component mixed with Svelte 5 Components\n\n```js\nimport Layers from '@components/Notes/Examples/Layers.svelte';\n```\n\ninstantiate\n```astro\n<Layers client:visible />\n```\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/2024-11-10-astro-svelte-5-mdx-tests/)\n\n---\n"
    }
  },
  "path": "/notes/2024-11-10-astro-svelte-5-mdx-tests/",
  "publishedAt": "2024-11-10T00:00:00.000Z",
  "site": "at://did:plc:6aglx53tojyuwxwueap5og3h/site.standard.publication/self",
  "tags": [
    "MDX",
    "Svelte",
    "Astro"
  ],
  "textContent": "Lazy-Loading Svelte Component (with Astro wrapper)\n\nimport LazyLoadDemo from '@components/Notes/Examples/LazyLoadDemo.astro';\n\ninstantiate\n\n<LazyLoadDemo />\n\n▶ Interactive feature — view on fubits.dev\n\nSimple Svelte 5 Component\n\nimport DynamicCssBefore from '@components/Notes/Examples/DynamicCssBefore.svelte';\n\ninstantiate\n\n<DynamicCssBefore client:visible />\n\n▶ Interactive feature — view on fubits.dev\n\nSimple Svelte 5 Component (SVG)\n\nimport SvgOffsetPath from '@components/Notes/Examples/SvgOffsetPath.svelte';\n\ninstantiate\n\n<SvgOffsetPath client:visible />\n\n▶ Interactive feature — view on fubits.dev\n\nSvelte 5 Component with Children\n\nimport CanvasDotplot from '@components/Notes/Examples/CanvasDotplot.svelte';\n\ninstantiate\n\n<CanvasDotplot client:only=\"svelte\">\n<div>\n<h4>\n<code>Astro Children</code>\n</h4>\n</div>\n</CanvasDotplot>\n\n<div style='--height: 300px;'>\n▶ Interactive feature — view on fubits.dev\n</div>\n\nLegacy Svelte 3/4 Component mixed with Svelte 5 Components\n\nimport Layers from '@components/Notes/Examples/Layers.svelte';\n\ninstantiate\n\n<Layers client:visible />\n\n▶ Interactive feature — view on fubits.dev",
  "title": "MDX Tests: Astro & Svelte 5 & Canvas",
  "updatedAt": "2024-11-10T00:00:00.000Z"
}