Docs UI (#48)

src/routes/components/+page.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { episodes } from '$src/content/episodes';
+	import { DocsPage } from '$src/layout/page';
+	import { HighlightSvelte } from 'svelte-highlight';
+	import { PlayerCss, ProgressCss, player_css, progress_css } from './code';
+
+	/** @type { string | undefined} */
+	let audio_src = episodes.knomii.src;
+	audio_src;
+</script>
+
+<DocsPage title="Examples" let:Section>
+	<Section title="AudioPlayer">
+		<p>
+			A component that does not render any UI. Instead, it provides
+			convenient functions, values, and headless components via expoded
+			values
+		</p>
+
+		<p>This component should help</p>
+		<div class="not-prose py-4">
+			<PlayerCss />
+		</div>
+
+		<div class="codeblock not-prose flex flex-col items-stretch gap-2 py-1">
+			<HighlightSvelte code={player_css} />
+		</div>
+	</Section>
+	<Section title="AudioProgress">
+		<div class="not-prose py-4">
+			<ProgressCss />
+		</div>
+
+		<div class="codeblock not-prose flex flex-col items-stretch gap-2 py-1">
+			<HighlightSvelte code={progress_css} />
+		</div>
+	</Section>
+</DocsPage>

src/routes/components/code/audio-player.svelte

@@ -0,0 +1,21 @@
+<script>
+	// @ts-nocheck
+
+	import { AudioPlayer } from 'svelte-podcast';
+
+	/** @type { string | undefined} */
+	let src = '/static/example-syntax.mp3';
+</script>
+
+<AudioPlayer
+	src="/static/example-syntax.mp3"
+	metadata={{
+		title: `Supper Club × Rich Harris, Author of Svelte`,
+		artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
+	}}
+	let:Player
+	let:action
+	let:attributes
+>
+	<pre>{JSON.stringify({ attributes }, null, 3)}</pre>
+</AudioPlayer>

src/routes/components/code/audio-progress.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { AudioProgress } from 'svelte-podcast/audio';
+</script>
+
+<AudioProgress step={10} />

src/routes/components/code/index.js

@@ -0,0 +1,8 @@
+import { format_code } from '$src/layout/helper';
+import { default as player_css_src } from './audio-player.svelte?raw';
+import { default as progress_css_src } from './audio-progress.svelte?raw';
+export { default as PlayerCss } from './audio-player.svelte';
+export { default as ProgressCss } from './audio-progress.svelte';
+
+export const player_css = format_code(player_css_src);
+export const progress_css = format_code(progress_css_src);