update components to use :example

docs/scripts/stackblitz-template/src/app.html

@@ -7,37 +7,40 @@
 		%sveltekit.head%
 		<script>
 			// Intercept console methods and send to parent window
-			(function() {
+			(function () {
 				const originalConsole = {
 					log: console.log,
 					warn: console.warn,
 					error: console.error,
 					info: console.info
 				};
 
-				['log', 'warn', 'error', 'info'].forEach(level => {
-					console[level] = function(...args) {
+				['log', 'warn', 'error', 'info'].forEach((level) => {
+					console[level] = function (...args) {
 						// Call original console method
 						originalConsole[level].apply(console, args);
 
 						// Send to parent window if in iframe
 						if (window.parent !== window) {
 							try {
-								window.parent.postMessage({
-									type: 'console',
-									level: level,
-									args: args.map(arg => {
-										// Handle objects/arrays
-										if (typeof arg === 'object' && arg !== null) {
-											try {
-												return JSON.parse(JSON.stringify(arg));
-											} catch (e) {
-												return String(arg);
+								window.parent.postMessage(
+									{
+										type: 'console',
+										level: level,
+										args: args.map((arg) => {
+											// Handle objects/arrays
+											if (typeof arg === 'object' && arg !== null) {
+												try {
+													return JSON.parse(JSON.stringify(arg));
+												} catch (e) {
+													return String(arg);
+												}
 											}
-										}
-										return arg;
-									})
-								}, '*');
+											return arg;
+										})
+									},
+									'*'
+								);
 							} catch (e) {
 								// Ignore errors posting message
 							}

docs/scripts/stackblitz-utils.ts

@@ -14,7 +14,10 @@ import path from 'path';
  *
  * Note: This is only available in Node.js context (build scripts)
  */
-export function readAllFilesFromDirectory(dir: string, baseDir: string = dir): Record<string, string> {
+export function readAllFilesFromDirectory(
+	dir: string,
+	baseDir: string = dir
+): Record<string, string> {
 	const files: Record<string, string> = {};
 
 	const entries = fs.readdirSync(dir, { withFileTypes: true });

docs/src/content/components/AnnotationLine.md

@@ -5,10 +5,6 @@ layers: [svg, canvas, html]
 related: [AnnotationPoint, AnnotationRange]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
-<Example name="horizontal" showCode />
+:example{ name="horizontal" showCode }

docs/src/content/components/AnnotationPoint.md

@@ -5,10 +5,6 @@ layers: [svg, canvas, html]
 related: [AnnotationLine, AnnotationRange]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
-<Example name="line-to-point" showCode />
+:example{ name="line-to-point" showCode }

docs/src/content/components/AnnotationRange.md

@@ -5,10 +5,6 @@ layers: [svg, canvas, html]
 related: [AnnotationLine, AnnotationPoint]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
-<Example name="vertical-with-pattern-range" showCode />
+:example{ name="vertical-with-pattern-range" showCode }

docs/src/content/components/Arc.md

@@ -5,24 +5,22 @@ layers: [svg, canvas]
 related: [Pie, ArcChart, PieChart]
 ---
 
-<script lang="ts">
-	import Example from '$lib/components/Example.svelte';
-</script>
-
-> See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples
+::tip
+See also: [ArcChart](/docs/components/ArcChart) and [PieChart](/docs/components/PieChart) for simplified examples
+::
 
 ## Usage
 
-<Example name="partial-arc" showCode />
+:example{ name="partial-arc" showCode }
 
 ## Text along path
 
 `Arc` can be used with the `children` snippet, `getArcTextProps`, and `Text` to write text along the `inner`, `outer`, or `middle` of the arc path.
 
 The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc
 
-<Example name="label-direction" />
+:example{ name="label-direction" }
 
 ## Playground
 
-<Example name="playground" />
+:example{ name="playground" }

docs/src/content/components/ArcChart.md

@@ -5,82 +5,83 @@ layers: [svg, canvas]
 related: [Chart, Pie]
 ---
 
-<script lang="ts">
-	import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
-<Example name="basic" showCode />
+:example{ name="basic" showCode }
 
 <!-- ## Examples
 
 ### Basic
 
-<Example name="basic" />
+:example{ name="basic" }
 
 ### Gradient with text
 
-<Example name="gradient-with-text" />
+:example{ name="gradient-with-text" }
 
 ### Color
 
-<Example name="color" />
+:example{ name="color" }
 
 ### Track size
 
-<Example name="track-size" />
+:example{ name="track-size" }
 
 ### Radius (offset)
 
-> If a `*radius` property is negative (ex. `-20`), the value will be applied as an offset from the charts `width` / `height`.
+::note
+If a `*radius` property is negative (ex. `-20`), the value will be applied as an offset from the charts `width` / `height`.
+::
 
-<Example name="radius-offset" />
+:example{ name="radius-offset" }
 
 ### Radius (percent)
 
-> If a `*radius` property is `>0` and `<1` (ex: `0.8`), the value will be applied as an offset from the charts `width` / `height`.
+::note If a `*radius` property is `>0` and `<1` (ex: `0.8`), the value will be applied as an offset from the charts `width` / `height`.
+::
 
-<Example name="radius-percent" />
+:example{ name="radius-percent" }
 
 ### Radius (fixed)
 
-> If a `*radius` property is `>=1` (ex: `80`), the value will be applied as a discrete value.
+::note
+If a `*radius` property is `>=1` (ex: `80`), the value will be applied as a discrete value.
+::
 
-<Example name="radius-fixed" />
+:example{ name="radius-fixed" }
 
 ### Series
 
-<Example name="series" />
+:example{ name="series" }
 
 ### Series (arc)
 
-<Example name="series-arc" />
+:example{ name="series-arc" }
 
 ### Series (90° starting angle)
 
-<Example name="series-start-90" />
+:example{ name="series-start-90" }
 
 ### Series (180° starting angle)
 
-<Example name="series-start-180" />
+:example{ name="series-start-180" }
 
 ### Series (track color)
 
-<Example name="series-track-color" />
+:example{ name="series-track-color" }
 
 ### Series (individual tracks, max value, and color)
 
-<Example name="series-individual" />
+:example{ name="series-individual" }
 
 ### Series (labels)
 
-<Example name="series-labels" />
+:example{ name="series-labels" }
 
 ### Motion (tween)
 
-<Example name="series-motion-tween" />
+:example{ name="series-motion-tween" }
 
 ### Motion (spring)
 
-<Example name="series-motion-spring" /> -->
+:example{ name="series-motion-spring" } -->

docs/src/content/components/Area.md

@@ -5,16 +5,14 @@ layers: [svg, canvas]
 related: []
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
-> See also: [AreaChart](/docs/components/AreaChart) for simplified examples
+::info
+See also: [AreaChart](/docs/components/AreaChart) for simplified examples
+::
 
 ## Usage
 
-<Example name="basic" showCode />
+:example{ name="basic" showCode }
 
 ## Playground
 
-<Example name="playground" />
+:example{ name="playground" }