Initial Docs (#39)

2023-07-09 22:18:06 +01:00
parent 9232f4d52e
commit e01855b89b
51 changed files with 3056 additions and 613 deletions
@@ -1,12 +1,10 @@
 // See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces

-declare module './lib/types' {
-	interface EpisodeDetails {
-		title: string;
-		artwork: string;
+/*
+	declare module './lib/types' {
+		interface EpisodeDetails {}
 	}
-}
+*/

 declare global {
 	namespace App {
@@ -1,17 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scroll-smooth hover:scroll-auto">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/icon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body
-		style="
-			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-				Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-		"
-	>
+	<body class="scroll-smooth hover:scroll-auto">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
@@ -0,0 +1,225 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	article.section-content p {
+		@apply my-2 text-lg leading-normal;
+	}
+	article.section-content li p {
+		@apply my-0;
+	}
+	article.section-content mark {
+		@apply bg-primary-100 text-primary-900;
+	}
+}
+
+@layer components {
+	.prose code {
+		@apply inline rounded bg-primary-100 py-1 px-2 font-mono leading-none text-primary-800;
+		overflow-wrap: anywhere;
+	}
+	.prose code::before,
+	.prose code::after {
+		content: '';
+	}
+	h1.anchor,
+	h2.anchor,
+	h3.anchor,
+	h4.anchor,
+	h5.anchor,
+	h6.anchor {
+		@apply m-0 text-3xl font-semibold leading-10 text-mono-900;
+	}
+
+	.prose h1 a,
+	.prose h2 a,
+	.prose h3 a,
+	.prose h4 a,
+	.prose h5 a,
+	.prose h6 a,
+	h1.anchor a,
+	h2.anchor a,
+	h3.anchor a,
+	h4.anchor a,
+	h5.anchor a,
+	h6.anchor a {
+		@apply relative font-medium underline decoration-transparent decoration-solid decoration-2 underline-offset-2;
+		&::before {
+			@apply absolute -left-[1.25ch] inline-block font-light leading-normal text-mono-400;
+			content: '#';
+		}
+		&:hover::before {
+			@apply text-primary-500;
+		}
+		&:hover {
+			@apply decoration-primary-500;
+		}
+	}
+
+	.prose h3 a {
+		@apply text-primary-600;
+	}
+
+	.prose #table-of-contents + ol {
+		list-style: decimal-leading-zero;
+	}
+	.prose #table-of-contents + ol,
+	.prose #table-of-contents + ul {
+		ul,
+		ol,
+		li {
+			@apply my-0.5;
+		}
+
+		ol {
+			list-style: lower-alpha;
+			ol {
+				list-style: disc;
+				ol {
+					list-style: circle;
+				}
+			}
+		}
+	}
+
+	.prose #features + table td:first-child > * {
+		@apply sm:block sm:w-max;
+	}
+}
+
+/***** prism-theme	*****/
+/*
+ * Laserwave Theme originally by Jared Jones for Visual Studio Code
+ * https://github.com/Jaredk3nt/laserwave
+ *
+ * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	background: #27212e;
+	color: #ffffff;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
+	/* The following properties are standard, please leave them as they are */
+	font-size: 1em;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+	/* The following properties are also standard */
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+	background: #eb64b927;
+	color: inherit;
+}
+
+code[class*='language-']::selection,
+code[class*='language-'] ::selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+	background: #eb64b927;
+	color: inherit;
+}
+
+/* Properties specific to code blocks */
+pre[class*='language-'] {
+	padding: 1em; /* this is standard */
+	margin: 0.5em 0; /* this is the default */
+	overflow: auto; /* this is standard */
+	border-radius: 0.5em;
+}
+
+/* Properties specific to inline code */
+:not(pre) > code[class*='language-'] {
+	padding: 0.2em 0.3em;
+	border-radius: 0.5rem;
+	white-space: normal; /* this is standard */
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #91889b;
+}
+
+.token.punctuation {
+	color: #7b6995;
+}
+
+.token.builtin,
+.token.constant,
+.token.boolean {
+	color: #ffe261;
+}
+
+.token.number {
+	color: #b381c5;
+}
+
+.token.important,
+.token.atrule,
+.token.property,
+.token.keyword {
+	color: #40b4c4;
+}
+
+.token.doctype,
+.token.operator,
+.token.inserted,
+.token.tag,
+.token.class-name,
+.token.symbol {
+	color: #74dfc4;
+}
+
+.token.attr-name,
+.token.function,
+.token.deleted,
+.token.selector {
+	color: #eb64b9;
+}
+
+.token.attr-value,
+.token.regex,
+.token.char,
+.token.string {
+	color: #b4dce7;
+}
+
+.token.entity,
+.token.url,
+.token.variable {
+	color: #ffffff;
+}
+
+/* The following rules are pretty similar across themes, but feel free to adjust them */
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.namespace {
+	opacity: 0.7;
+}
@@ -0,0 +1,58 @@
+# Hello World
+
+this is some content from @OllieJT on pr #32
+
+this is on https://github.com/OllieJT/svelte-podcast/pull/39
+
+> this is a quote
+
+## this is a subheading
+
+`const this_is = "code"`
+
+```js
+const this_is = 'code_block';
+console.log(this_is);
+```
+
+```js {1,3-4} showLineNumbers
+function fancyAlert(arg) {
+	if (arg) {
+		$.facebox({ div: '#foo' });
+	}
+}
+```
+
+```svelte {1,3-4} showLineNumbers
+<script>
+	import { episode_audio } from 'svelte-podcast';
+</script>
+
+<!-- load the episode on click -->
+<button
+	on:click={() =>
+		episode_audio.load('/episode-audio.mp3', {
+			/* optional metadata */
+		})}
+>
+	Load Episode
+</button>
+
+<!-- unload the episode on click -->
+<button on:click={() => episode_audio.unload()}>Unload Episode</button>
+```
+
+[This is a link](https://www.google.com)
+
+- this is a list
+- this is a list
+- this is a list
+
+1. this is a numbered list
+2. this is a numbered list
+3. this is a numbered list
+
+| this | is  | a   | table |
+| ---- | --- | --- | ----- |
+| this | is  | a   | table |
+| this | is  | a   | table |
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { topics } from '$content/utility/anchor-registry';
+	import { Hashtag } from '@inqling/svelte-icons/heroicon-24-outline';
+
+	export let value: string;
+	$: id = topics.slugify(value || '');
+	topics.add(value);
+</script>
+
+<a href="/#{id}" class="group relative -ml-[1em] hover:text-black">
+	<Hashtag class="h-[1em] w-[1em] -translate-x-1 text-mono-300 group-hover:text-primary-600" /><span
+		class="underline decoration-primary-50/0 decoration-4 group-hover:decoration-primary-500"
+		>{value}</span
+	>
+	<span class="pointer-events-none absolute -top-10 h-px w-px" {id} />
+</a>
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+	export let anchor: boolean = false;
+</script>
+
+<li class="list-item list-disc text-primary-800">
+	<h4 class="text-lg font-medium leading-normal text-primary-600">
+		{#if anchor}
+			<Anchor value={title} />
+		{:else}
+			{title}
+		{/if}
+	</h4>
+	<p class="mt-0 text-mono-600">
+		<slot />
+	</p>
+</li>
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+	export let subtitle: string | undefined = undefined;
+</script>
+
+<h3 class="text-xl font-medium leading-relaxed text-mono-900"><Anchor value={title} /></h3>
+{#if subtitle}
+	<p class="text-xl font-normal leading-normal text-mono-500">{subtitle}</p>
+{/if}
@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<article
+	class="section-content my-4 w-full border-t-2 border-mono-100 py-4 text-mono-600 first-of-type:border-t-0 first-of-type:pt-0"
+>
+	<slot />
+</article>
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { SvelteIcon } from '@inqling/svelte-icons';
+
+	type Feature = {
+		icon: SvelteIcon;
+		title: string;
+		description: string;
+	};
+
+	export let features: Feature[];
+</script>
+
+<dl
+	class="mx-auto grid max-w-2xl grid-cols-1 gap-6 py-6 text-base leading-7 text-mono-600 sm:grid-cols-2 sm:gap-y-10 lg:mx-0 lg:max-w-none"
+>
+	{#each features as feature}
+		<div class="relative pl-9">
+			<dt class="inline font-semibold text-mono-900">
+				<svelte:component
+					this={feature.icon}
+					class="absolute top-1 left-1 h-5 w-5 text-primary-600"
+				/>
+
+				{feature.title}
+			</dt>
+			<dd class="inline">{feature.description}</dd>
+		</div>
+	{/each}
+</dl>
@@ -0,0 +1,6 @@
+export { default as ContentListItem } from './content-list-item.svelte';
+export { default as ContentTitle } from './content-title.svelte';
+export { default as Content } from './content.svelte';
+export { default as Features } from './features.svelte';
+export { default as SectionTitle } from './section-title.svelte';
+export { default as Section } from './section.svelte';
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+</script>
+
+<h2 class="text-3xl font-normal leading-loose text-primary-600">
+	<Anchor value={title} />
+</h2>
@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<!-- <div class="relative mx-auto w-full max-w-7xl p-4 sm:px-6 lg:px-8"> -->
+<div class="relative mx-auto w-full max-w-prose p-4 text-lg sm:px-6 lg:px-8">
+	<section class="w-full">
+		<slot />
+	</section>
+</div>
@@ -0,0 +1,184 @@
+## Table of contents
+
+## What is svelte-podcast?
+
+### Motivation
+
+At it's core svelte-podcast provides tooling to make the following tasks easier:
+
+#### I want to build a custom audio player
+
+The default audio element is quite nice, but there are 2 main reasons why people want to build their own;
+
+1. to customize the look and feel
+2. to add custom functionality.
+
+svelte-podcast provides a simple API enabling you to resolve both of these desires.
+
+#### I find managing the state of audio difficult
+
+It's one thing to load, play, and pause audio on a single page, but what if you want to build more custom or advanced behaviours like
+
+> Can audio continue playing when the user navigates to a new page.
+
+> Can I play/pause an episode from content like an article?
+
+> Can I highlight show notes relevant to the current timestamp?
+
+svelte-podcast makes solving these challenges easier by simplifying your interactions with the audio element.
+
+#### I find RSS frustrating to work with
+
+We're still working on this, it'll be coming soon™️!
+
+### Features
+
+| Feature             | Description                                                                                    |
+| ------------------- | ---------------------------------------------------------------------------------------------- |
+| **Simple API**      | Get essential audio data like the current timestamp, duration, play state and more...          |
+| **Simple Controls** | Control your active audio source with play, pause, seek, and more methods...                   |
+| **Extensible**      | Define your own metadata for each episode to easily association content with the current audio |
+| **Save Progress**   | Save and load a users progress and preferences to localStorage, or your own database           |
+| **Persistence**     | If your site makes use of client side routing, audio will continue playing when users navigate |
+| **Typescript**      | 1st class types, with type overrides for defining your own metadata requirements               |
+
+## Get Started
+
+### Install
+
+Install the latest version of svelte-podcast with your preferred package manager.
+
+```sh
+# with npm
+npm install svelte-podcast@latest
+
+# with yarn
+yarn add svelte-podcast@latest
+
+# with pnpm
+pnpm add svelte-podcast@latest
+```
+
+### Setup
+
+Add the AudioLoader component to your root layout. You must have one of these for svelte-podcast to work. You should also only load one instance of this at a time, and so we recommend you loading it at the base of your app.
+
+```svelte
+<!-- /routes/+layout.svelte -->
+<script>
+	import { AudioLoader } from 'svelte-podcast';
+</script>
+
+<AudioLoader />
+
+<!-- your layout -->
+
+<slot />
+```
+
+### Load an episode
+
+All you need to load an episode is a URL to an audio file. svelte-podcast uses a html audio element under the hood, so any audio file compatible with the autio element is also compatible with this package.
+
+#### Using a URL (Most Common)
+
+An **audio url** could be a URL to an MP3 file from an RSS feed, like this: `https://media.transistor.fm/27a058c9/27b595e2.mp3`. It could also be a path to a static file on your server.
+
+#### Using a static file
+
+If you're using SvelteKit, you can store **static files** in the /static directory. When your site is built, everything in the static directory will be at the root of your site. If you have a file in `/static/episides/episode-01.mp3` you could load it as `/episides/episode-01.mp3`
+
+#### Using the AudioLoader component
+
+Only one piece of audio can be loaded at a time, however a users progress for each audio is saved in localStorage when they play, pause, or skip. You can load audio via the `episode_audio` store from anywhere in your project.
+
+##### Example: Load audio after page is loaded
+
+```svelte
+<script>
+	import { onMount } from 'svelte';
+	import { episode_audio } from 'svelte-podcast';
+
+	onMount(() => {
+		// load the episode on mount without any metadata
+		episode_audio.load('/episode-audio.mp3', {
+			/* optional metadata */
+		});
+	});
+</script>
+```
+
+##### Example: Load audio after a user clicks a button
+
+```svelte
+<script>
+	import { episode_audio } from 'svelte-podcast';
+</script>
+
+<!-- load the episode on click -->
+<button
+	on:click={() =>
+		episode_audio.load('/episode-audio.mp3', {
+			/* optional metadata */
+		})}
+>
+	Load Episode
+</button>
+
+<!-- unload the episode on click -->
+<button on:click={() => episode_audio.unload()}>Unload Episode</button>
+```
+
+## Components
+
+### `<PlayerWidget/>`
+
+Coming soon...
+
+### `<PlayerStack/>`
+
+Coming soon...
+
+### `<HeadlessTimeline/>`
+
+Coming soon...
+
+## Utilities
+
+### Debug Mode
+
+Coming soon...
+
+### audio
+
+Coming soon...
+
+### episode_progress
+
+Coming soon...
+
+### episode_details
+
+Coming soon...
+
+### user_progress & user_preferences
+
+Coming soon...
+
+### save_podcast_state
+
+Coming soon...
+
+### secondsToTimestamp
+
+Coming soon...
+
+## Typescript
+
+### Override types
+
+Coming soon...
+
+### Exported types
+
+Coming soon...
@@ -0,0 +1,14 @@
+import { assets } from '$app/paths';
+
+export const episodes = {
+	syntax: {
+		src: `${assets}/example-syntax.mp3`,
+		title: `Supper Club × Rich Harris, Author of Svelte`,
+		artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
+	},
+	knomii: {
+		src: `${assets}/example-knomii.mp3`,
+		title: `Empowerment starts with letting go of control`,
+		artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
+	},
+} as const;
@@ -0,0 +1,9 @@
+<script>
+	import { AudioLoader } from 'svelte-podcast';
+</script>
+
+<AudioLoader />
+
+<!-- your layout -->
+
+<slot />
@@ -0,0 +1,5 @@
+import example_add_loader from './add-loader.svelte?raw';
+import example_load_audio_click from './load-audio-click.svelte?raw';
+import example_load_audio_mount from './load-audio-mount.svelte?raw';
+
+export { example_add_loader, example_load_audio_click, example_load_audio_mount };
@@ -0,0 +1,16 @@
+<script>
+	import { episode_audio } from 'svelte-podcast';
+</script>
+
+<!-- load the episode on click -->
+<button
+	on:click={() =>
+		episode_audio.load('/episode-audio.mp3', {
+			/* optional metadata */
+		})}
+>
+	Load Episode
+</button>
+
+<!-- unload the episode on click -->
+<button on:click={() => episode_audio.unload()}>Unload Episode</button>
@@ -0,0 +1,11 @@
+<script>
+	import { onMount } from 'svelte';
+	import { episode_audio } from 'svelte-podcast';
+
+	onMount(() => {
+		// load the episode on mount without any metadata
+		episode_audio.load('/episode-audio.mp3', {
+			/* optional metadata */
+		});
+	});
+</script>
@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+
+type Topic = string;
+
+const content = new Set<Topic>();
+
+const ropic_registry = writable<Topic[]>([...content]);
+
+function add(value: Topic) {
+	ropic_registry.update((prev) => {
+		const content = new Set<Topic>(prev.filter(Boolean));
+		Boolean(value) && content.add(value);
+		return [...content];
+	});
+}
+
+function slugify(value: string) {
+	// replace all apaces with dashes
+	const slug = value
+		.replace(/\s+/g, '-')
+		.toLowerCase()
+		.trim()
+		.replace(/[^\x00-\x7F]/g, '-')
+		.replace(/[^a-z0-9-]/g, '-')
+		.replace(/^-+/, '')
+		.replace(/-+$/, '')
+		.replace(/--+/g, '-');
+
+	return encodeURI(slug);
+}
+
+export const topics = {
+	subscribe: ropic_registry.subscribe,
+	add,
+	slugify,
+};
@@ -0,0 +1,8 @@
+import type { CodeBlockProps } from 'svhighlight/code/CodeBlock.svelte';
+
+export const code_opts = {
+	background: 'bg-mono-900',
+	focusType: 'highlight',
+	highlightColor: 'bg-mono-800',
+	headerClasses: 'bg-mono-800',
+} satisfies CodeBlockProps;
@@ -0,0 +1,8 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+
+// import type { ComponentType, SvelteComponentTyped } from 'svelte';
+
+declare module '*.md' {
+	export default ComponentType<SvelteComponentTyped>;
+}
@@ -14,7 +14,7 @@ export const audio_element = readable<HTMLAudioElement | null>(null, (set) => {
 		el.id = ID;
 		el.setAttribute('preload', 'metadata');
 		el.muted = false;
-		el.autoplay = true;
+		el.autoplay = false;
 		el.controls = false;

 		const preferences = get(user_preferences);
@@ -74,7 +74,7 @@ export const episode_audio = {
 		el.src = '';
 		episode_details.set(null);
 	},
-	play: (t?: HandleType) => {
+	play: (t: HandleType = 'set') => {
 		const el = get(audio_element);
 		if (!el) return no_element('play');

@@ -84,7 +84,7 @@ export const episode_audio = {
 			el.play();
 		}
 	},
-	pause: (t?: HandleType) => {
+	pause: (t: HandleType = 'set') => {
 		user_progress.save();
 		const el = get(audio_element);
 		if (!el) return no_element('pause');
@@ -95,7 +95,7 @@ export const episode_audio = {
 			el.pause();
 		}
 	},
-	mute: (t?: HandleType) => {
+	mute: (t: HandleType = 'set') => {
 		const el = get(audio_element);
 		if (!el) return no_element('mute');

@@ -105,7 +105,7 @@ export const episode_audio = {
 			el.muted = true;
 		}
 	},
-	unmute: (t?: HandleType) => {
+	unmute: (t: HandleType = 'set') => {
 		const el = get(audio_element);
 		if (!el) return no_element('unmute');

@@ -1,7 +1,67 @@
 <script lang="ts">
+	import { assets, base } from '$app/paths';
+	import { page } from '$app/stores';
+	import { Github } from '@inqling/svelte-icons/simple-icons';
+	import clsx from 'clsx';
+	import 'highlight.js/styles/github-dark.css';
 	import { AudioLoader } from 'svelte-podcast';
+	import '../app.postcss';
+
+	const page_links = [
+		{ label: 'Docs', href: '/' },
+		{ label: 'Demo', href: '/demo' },
+	] as const;
 </script>

+<header
+	class="sticky top-0 z-50 border-b border-mono-100 bg-white text-lg leading-none lg:overflow-y-visible"
+	id="navigation"
+>
+	<div class="mx-auto max-w-prose px-4 py-1 sm:py-2 sm:px-6 lg:px-8">
+		<div class="relative grid grid-cols-12 gap-1 text-base md:gap-3">
+			<div class="col-span-2 flex items-center justify-start leading-none">
+				<a href="{base}/#navigation" class="flex-shrink-0 py-1">
+					<img
+						class="block h-8 w-auto"
+						width={60}
+						height={32}
+						src="{assets}/logo.png"
+						alt="Svelte-Podcast"
+					/>
+				</a>
+			</div>
+			<div class="col-span-8 flex items-center justify-center leading-none sm:gap-1">
+				{#each page_links as link}
+					{@const is_homepage = link.href === '/' && $page.url.pathname === link.href}
+					{@const is_match = link.href !== '/' && $page.url.pathname.startsWith(link.href)}
+					<a
+						href={base + link.href}
+						class={clsx(
+							'flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium leading-none ring-inset focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 focus:ring-offset-2 sm:px-4 sm:text-base',
+							is_homepage || is_match
+								? 'bg-primary-200 text-primary-900'
+								: 'text-mono-500 hover:bg-mono-100 hover:text-mono-900',
+						)}
+					>
+						{link.label}
+					</a>
+				{/each}
+			</div>
+			<div class="col-span-2 flex items-center justify-end leading-none">
+				<a
+					href="https://github.com/OllieJT/svelte-podcast"
+					target="_blank"
+					rel="noreferrer"
+					class="flex-shrink-0 rounded-full bg-white p-1 text-mono-500 ring-2 ring-transparent transition-all ease-out hover:text-mono-900 hover:ring-mono-200 hover:ring-offset-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+				>
+					<span class="sr-only">View Repository</span>
+					<Github class="h-6 w-6" aria-hidden="true" />
+				</a>
+			</div>
+		</div>
+	</div>
+</header>
+
 <AudioLoader />

 <slot />
@@ -0,0 +1,2 @@
+export const trailingSlash = 'always';
+export const prerender = true;
@@ -0,0 +1,8 @@
+import content from '$content/docs.md?raw';
+import type { PageServerLoad } from './$types';
+import { use_markdown } from './use-markdown';
+
+export const load = (async () => {
+	const post = await use_markdown(content);
+	return { html: post.value };
+}) satisfies PageServerLoad;
@@ -1,130 +1,108 @@
 <script lang="ts">
-	import {
-		episode_audio,
-		episode_progress,
-		PlayerStack,
-		PlayerWidget,
-		user_preferences,
-		user_progress,
-	} from 'svelte-podcast';
+	import { base } from '$app/paths';
+	import { Section } from '$content/components';
+	// import Docs from '$content/docs.md';
+	import { episodes } from '$content/episodes';
+	import { onMount } from 'svelte';
+	import { episode_audio, PlayerWidget } from 'svelte-podcast';
+	import type { PageServerData } from './$types';

-	const sources = {
-		syntax: {
-			src: `/example-syntax.mp3`,
-			title: `Supper Club × Rich Harris, Author of Svelte`,
-			artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
-		},
-		knomii: {
-			src: `/example-knomii.mp3`,
-			title: `Empowerment starts with letting go of control`,
-			artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
-		},
-	} as const;
+	export let data: PageServerData;

-	let current_time = 0;
-	$: current_time = $episode_progress.current_time;
-
-	$: console.log('details :: ', $episode_audio?.details);
+	onMount(() => {
+		// load the episode on mount without any metadata
+		episode_audio.load(episodes.knomii.src, {
+			/* optional metadata */
+		});
+	});
 </script>

-<pre>{JSON.stringify(
-		{
-			$episode_audio,
-			$episode_progress,
-			$user_preferences,
-		},
-		null,
-		2,
-	)}</pre>
+<div class="relative isolate bg-white">
+	<svg
+		class="absolute inset-0 -z-10 h-full w-full stroke-mono-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+		aria-hidden="true"
+	>
+		<defs>
+			<pattern
+				id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
+				width="200"
+				height="200"
+				x="50%"
+				y="-1"
+				patternUnits="userSpaceOnUse"
+			>
+				<path d="M.5 200V.5H200" fill="none" />
+			</pattern>
+		</defs>
+		<rect
+			width="100%"
+			height="100%"
+			stroke-width="0"
+			fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
+		/>
+	</svg>
+	<main>
+		<div class="relative py-24 sm:py-32 lg:pb-40">
+			<div class="mx-auto max-w-7xl px-6 lg:px-8">
+				<div class="mx-auto max-w-2xl text-center">
+					<h1>
+						<span class="block text-xl font-medium text-primary-600">
+							svelte-podcast<span class="sr-only">: </span>
+						</span>
+						<span class="text-4xl font-bold tracking-tight text-mono-900 sm:text-6xl">
+							The fastest way to build a podcast site with Svelte.
+						</span>
+					</h1>
+					<p class="mt-6 text-xl leading-8 text-mono-600">
+						A suite of tools and components to build your own podcast players, and work with RSS
+						podcast data in SvelteKit.
+						<span class="mt-3 block text-base leading-none text-primary-800">
+							<span
+								class="inline-block rounded-full bg-primary-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-primary-600"
+							>
+								Coming Soon<span class="sr-only">:</span>
+							</span>
+							<span class="tracking-wide">SSR utilities for consuming RSS podcast feeds</span>
+						</span>
+					</p>
+					<div class="mt-10 flex items-center justify-center gap-x-3">
+						<a
+							href="{base}/#get-started"
+							class="rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+						>
+							Get started
+						</a>
+						<a
+							href="{base}/demo"
+							class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-mono-600 hover:bg-primary-50 hover:text-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+						>
+							Examples <span aria-hidden="true">→</span>
+						</a>
+					</div>
+				</div>
+				<div class="mt-16 flow-root sm:mt-24">
+					<div
+						class="-m-2 rounded-xl border border-mono-100 bg-white p-1 shadow-2xl shadow-mono-200 sm:p-2 lg:-m-4 lg:rounded-2xl lg:p-4"
+					>
+						<PlayerWidget
+							class="w-full border border-mono-100"
+							include={{
+								duration: true,
+								current_time: true,
+								playback_rate: true,
+								skip_back: 10,
+								skip_forward: 30,
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+</div>

-<h1>Demo</h1>
-<a href="/another-page">Another Page</a>
-<button type="button" on:click={user_progress.clear}>Clear progress for all episodes</button>
-<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
-
-<h5>Load Audio</h5>
-<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}
-	>Syntax</button
->
-<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
-	>Knomii</button
->
-<button type="button" on:click={() => episode_audio.unload()}>None</button>
-
-<h5>Custom audio controls</h5>
-
-<h6>Play / Pause Actions</h6>
-
-<button type="button" on:click={() => episode_audio.play()}>Play</button>
-<button type="button" on:click={() => episode_audio.pause()}>Pause</button>
-<button type="button" on:click={() => episode_audio.pause('toggle')}>Toggle</button>
-
-<h6>Audio Actions</h6>
-
-<button type="button" on:click={() => episode_audio.mute()}>Mute</button>
-<button type="button" on:click={() => episode_audio.unmute()}>Unmute</button>
-<button type="button" on:click={() => episode_audio.mute('toggle')}>Toggle</button>
-
-<h6>Seeking</h6>
-
-<button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
-<button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</button
->
-<button type="button" on:click={() => episode_audio.skip(10, 'forward')}>Skip 10s</button>
-<button type="button" on:click={() => episode_audio.skip(10, 'backward')}>Rewind 10s</button>
-
-<h6>Playback Rate</h6>
-
-{#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => user_preferences.set.playback_rate(rate)}>
-		{rate}x
-	</button>
-{/each}
-
-<hr />
-
-<!-- <PodcastPlayer
-	artwork={$episode_audio?.details?.artwork}
-	title={$episode_audio?.details?.title || 'Podcast Name'}
-/> -->
-
-<br />
-<PlayerWidget />
-<br />
-<br />
-<PlayerWidget include={{ playback_rate: true }} />
-<br />
-<br />
-<PlayerWidget include={{ skip_back: 10, skip_forward: 30 }} />
-<br />
-<br />
-<PlayerWidget
-	style="width: 100%;"
-	include={{
-		current_time: true,
-		playback_rate: true,
-		duration: true,
-		skip_back: 10,
-		skip_forward: 30,
-	}}
-/>
-
-<br />
-<br />
-<PlayerStack style="width:400px;" />
-<br />
-<br />
-<PlayerStack include={{ playback_rate: true }} />
-<br />
-<br />
-<PlayerStack include={{ skip_back: 10, skip_forward: 30, timestamps: true }} />
-<br />
-<br />
-<PlayerStack
-	include={{
-		playback_rate: true,
-		timestamps: true,
-		skip_back: 10,
-		skip_forward: 30,
-	}}
-/>
+<Section>
+	<div class="prose prose-lg prose-slate">
+		{@html data.html}
+	</div>
+</Section>
@@ -1,108 +0,0 @@
-<script lang="ts">
-	import {
-		episode_audio,
-		episode_progress,
-		PlayerWidget,
-		user_preferences,
-		user_progress,
-	} from 'svelte-podcast';
-
-	const sources = {
-		syntax: {
-			src: `/example-syntax.mp3`,
-			title: `Supper Club × Rich Harris, Author of Svelte`,
-			artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
-		},
-		knomii: {
-			src: `/example-knomii.mp3`,
-			title: `Empowerment starts with letting go of control`,
-			artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
-		},
-	} as const;
-
-	let current_time = 0;
-	$: current_time = $episode_progress.current_time;
-
-	$: console.log('details :: ', $episode_audio?.details);
-</script>
-
-<pre>{JSON.stringify(
-		{
-			$episode_audio,
-			$episode_progress,
-			$user_preferences,
-		},
-		null,
-		2,
-	)}</pre>
-
-<h1>Demo</h1>
-<a href="/another-page">Another Page</a>
-<button type="button" on:click={user_progress.clear}>Clear progress for all episodes</button>
-<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
-
-<h5>Load Audio</h5>
-<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}
-	>Syntax</button
->
-<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
-	>Knomii</button
->
-<button type="button" on:click={() => episode_audio.unload()}>None</button>
-
-<h5>Custom audio controls</h5>
-
-<h6>Play / Pause Actions</h6>
-
-<button type="button" on:click={() => episode_audio.play()}>Play</button>
-<button type="button" on:click={() => episode_audio.pause()}>Pause</button>
-<button type="button" on:click={() => episode_audio.pause('toggle')}>Toggle</button>
-
-<h6>Audio Actions</h6>
-
-<button type="button" on:click={() => episode_audio.mute()}>Mute</button>
-<button type="button" on:click={() => episode_audio.unmute()}>Unmute</button>
-<button type="button" on:click={() => episode_audio.mute('toggle')}>Toggle</button>
-
-<h6>Seeking</h6>
-
-<button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
-<button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</button
->
-<button type="button" on:click={() => episode_audio.skip(10, 'forward')}>Skip 10s</button>
-<button type="button" on:click={() => episode_audio.skip(10, 'backward')}>Rewind 10s</button>
-
-<h6>Playback Rate</h6>
-
-{#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => user_preferences.set.playback_rate(rate)}>
-		{rate}x
-	</button>
-{/each}
-
-<hr />
-
-<!-- <PodcastPlayer
-	artwork={$episode_audio?.details?.artwork}
-	title={$episode_audio?.details?.title || 'Podcast Name'}
-/> -->
-
-<br />
-<PlayerWidget />
-<br />
-<br />
-<PlayerWidget include={{ playback_rate: true }} />
-<br />
-<br />
-<PlayerWidget include={{ skip_back: 10, skip_forward: 30 }} />
-<br />
-<br />
-<PlayerWidget
-	include={{
-		current_time: true,
-		playback_rate: true,
-		duration: true,
-		skip_back: 10,
-		skip_forward: 30,
-	}}
-/>
@@ -0,0 +1,262 @@
+<script lang="ts">
+	import { Section } from '$content/components';
+	import {
+		episode_audio,
+		episode_progress,
+		PlayerStack,
+		PlayerWidget,
+		user_preferences,
+		user_progress,
+	} from 'svelte-podcast';
+	import PreviewComponent from './preview-component.svelte';
+	import PreviewDataCode from './preview-data-code.svelte';
+	import PreviewData from './preview-data.svelte';
+
+	const sources = {
+		syntax: {
+			src: `/example-syntax.mp3`,
+			title: `Supper Club × Rich Harris, Author of Svelte`,
+			artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
+		},
+		knomii: {
+			src: `/example-knomii.mp3`,
+			title: `Empowerment starts with letting go of control`,
+			artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
+		},
+	} as const;
+
+	// let current_time = 0;
+	// $: current_time = $episode_progress.current_time;
+
+	$: console.log('details :: ', $episode_audio?.details);
+
+	let player_widget_current_time = true;
+	$: player_widget = {
+		current_time: true,
+		playback_rate: true,
+		duration: true,
+		skip_back: 10,
+		skip_forward: 30,
+	};
+
+	$: player_stack = {
+		playback_rate: true,
+		timestamps: true,
+		skip_back: 10,
+		skip_forward: 30,
+	};
+</script>
+
+<Section>
+	<div class="flex flex-col items-stretch space-y-6">
+		<h1>This page is a work in progress</h1>
+	</div>
+</Section>
+
+<Section>
+	<PreviewComponent name="PlayerWidget">
+		<svelte:fragment slot="options">
+			<div>
+				<label for="pw_current_time">current_time</label>
+				<input id="pw_current_time" type="checkbox" bind:checked={player_widget.current_time} />
+			</div>
+			<div>
+				<label for="pw_playback_rate">playback_rate</label>
+				<input id="pw_playback_rate" type="checkbox" bind:checked={player_widget.playback_rate} />
+			</div>
+			<div>
+				<label for="pw_duration">duration</label>
+				<input id="pw_duration" type="checkbox" bind:checked={player_widget.duration} />
+			</div>
+			<div>
+				<label for="pw_skip_back">skip_back</label>
+				<input id="pw_skip_back" type="number" bind:value={player_widget.skip_back} />
+			</div>
+			<div>
+				<label for="pw_skip_forward">skip_forward</label>
+				<input id="pw_skip_forward" type="number" bind:value={player_widget.skip_forward} />
+			</div>
+		</svelte:fragment>
+
+		<PlayerWidget include={player_widget} />
+	</PreviewComponent>
+</Section>
+
+<Section>
+	<PreviewComponent name="PlayerStack">
+		<svelte:fragment slot="options">
+			<div>
+				<label for="pw_playback_rate">playback_rate</label>
+				<input id="pw_playback_rate" type="checkbox" bind:checked={player_stack.playback_rate} />
+			</div>
+			<div>
+				<label for="pw_timestamps">timestamps</label>
+				<input id="pw_timestamps" type="checkbox" bind:checked={player_stack.timestamps} />
+			</div>
+			<div>
+				<label for="pw_skip_back">skip_back</label>
+				<input id="pw_skip_back" type="number" bind:value={player_stack.skip_back} />
+			</div>
+			<div>
+				<label for="pw_skip_forward">skip_forward</label>
+				<input id="pw_skip_forward" type="number" bind:value={player_stack.skip_forward} />
+			</div>
+		</svelte:fragment>
+
+		<PlayerStack class="max-w-sm" include={player_stack} />
+	</PreviewComponent>
+</Section>
+
+<Section>
+	<div class="prose prose-lg prose-slate">
+		<h2>Data</h2>
+		<p>
+			The following are the stores that are available to you based on the active episode being
+			played in the above examples.
+		</p>
+		<PreviewData name="episode_audio" data={episode_audio}>
+			<PreviewDataCode
+				code={`episode_audio.subscribe()`}
+				description="subscribes to the episode_audio data"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.load(\n\tsrc: string,\n\tdetails: { [key: string]: string | number | boolean] }\n)`}
+				description="loads an episode into the player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.load(src: string, details: { [key: string]: string | number | boolean] })`}
+				description="loads an episode into the player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.unload()`}
+				description="unloads the episode from the player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start')`}
+				description="seeks to a specific part of the audio"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.skip(seconds: number, type: 'forward' | 'backward' = 'forward')`}
+				description="seeks forward or backward relative to the current time"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.play(action: "toggle" | "set" = "set")`}
+				description="plays the audio currently loaded in the player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.pause(action: "toggle" | "set" = "set")`}
+				description="pauses the audio currently loaded in the player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.mute(action: "toggle" | "set" = "set")`}
+				description="mutes the audio player"
+			/>
+			<PreviewDataCode
+				code={`episode_audio.unmute(action: "toggle" | "set" = "set")`}
+				description="unmutes the audio player"
+			/>
+		</PreviewData>
+		<PreviewData name="episode_progress" data={episode_progress}>
+			<PreviewDataCode
+				code={`episode_progress.subscribe()`}
+				description="subscribes to the episode_progress data"
+			/>
+		</PreviewData>
+		<PreviewData name="user_preferences" data={user_preferences}>
+			<PreviewDataCode
+				code={`user_preferences.subscribe()`}
+				description="subscribes to the user_preferences data"
+			/>
+			<PreviewDataCode
+				code={`user_preferences.clear()`}
+				description="clears all user preferences and resets them to default values"
+			/>
+			<PreviewDataCode
+				code={`user_preferences.set.playback_rate(value: number)`}
+				description="sets the users prefered playback_rate (speed)"
+			/>
+			<PreviewDataCode
+				code={`user_preferences.set.volume(value: number)`}
+				description="sets the users prefered volume"
+			/>
+		</PreviewData>
+		<PreviewData name="user_progress" data={user_progress}>
+			<PreviewDataCode
+				code={`user_progress.subscribe()`}
+				description="subscribes to the user_progress data"
+			/>
+			<button type="button" on:click={user_progress.clear}>user_progress.clear()</button>
+			<PreviewDataCode
+				code={`user_progress.clear()`}
+				description="clears all user progress for all episodes"
+			/>
+			<button type="button" on:click={user_progress.clear}>user_progress.clear()</button>
+			<PreviewDataCode
+				code={`user_progress.get(src:string)`}
+				description="gets the users progress (seconds) for a specific episode"
+			/>
+			<button type="button" on:click={user_progress.save}>user_progress.save()</button>
+			<PreviewDataCode
+				code={`user_progress.save()`}
+				description="saves all user progress for all episodes they have interacted with in the current session"
+			/>
+		</PreviewData>
+	</div>
+</Section>
+
+<h1>Demo</h1>
+<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
+
+<hr />
+
+<h5>Load Audio</h5>
+<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}>
+	Syntax
+</button>
+<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
+	>Knomii</button
+>
+<button type="button" on:click={() => episode_audio.unload()}>None</button>
+
+<hr />
+
+<h5>Custom audio controls</h5>
+
+<h6>Play / Pause Actions</h6>
+
+<button type="button" on:click={() => episode_audio.play()}>Play</button>
+<button type="button" on:click={() => episode_audio.pause()}>Pause</button>
+<button type="button" on:click={() => episode_audio.pause('toggle')}>Toggle</button>
+
+<hr />
+
+<h6>Audio Actions</h6>
+
+<button type="button" on:click={() => episode_audio.mute()}>Mute</button>
+<button type="button" on:click={() => episode_audio.unmute()}>Unmute</button>
+<button type="button" on:click={() => episode_audio.mute('toggle')}>Toggle</button>
+
+<hr />
+
+<h6>Seeking</h6>
+
+<button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
+<button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</button
+>
+<button type="button" on:click={() => episode_audio.skip(10, 'forward')}>Skip 10s</button>
+<button type="button" on:click={() => episode_audio.skip(10, 'backward')}>Rewind 10s</button>
+
+<hr />
+
+<h6>Playback Rate</h6>
+
+{#each [0.5, 1, 2, 3] as rate}
+	<button type="button" on:click={() => user_preferences.set.playback_rate(rate)}>
+		{rate}x
+	</button>
+{/each}
+
+<!-- <PodcastPlayer
+	artwork={$episode_audio?.details?.artwork}
+	title={$episode_audio?.details?.title || 'Podcast Name'}
+/> -->
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let name: string;
+</script>
+
+<div class="flex flex-col items-stretch space-y-6">
+	<div class="prose prose-lg prose-slate">
+		<h3>{name}</h3>
+	</div>
+
+	<fieldset>
+		<legend>{name} options</legend>
+		<slot name="options" />
+	</fieldset>
+
+	<div class="w-full rounded-md border p-3">
+		<div class="mx-auto w-max">
+			<slot />
+		</div>
+	</div>
+</div>
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let code: string;
+	export let description: string;
+</script>
+
+<pre><code class="hljs language-js">{`//${description}\n\n${code}`}</code></pre>
@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let name: string;
+	export let data: unknown;
+</script>
+
+<div class="flex flex-col items-stretch space-y-6">
+	<h3>{name}</h3>
+
+	<h4>subscription: ${name}</h4>
+	<pre><code class="hljs language-json">{JSON.stringify({ data }, null, 2)}</code></pre>
+
+	<h4>methods</h4>
+	<slot />
+</div>
@@ -0,0 +1,56 @@
+/*
+Language: Svelte.js
+Requires: xml.js, javascript.js, css.js
+Author: Alexey Schebelev
+Description: Components of Svelte Framework
+Link: https://github.com/AlexxNB/highlightjs-svelte/blob/master/src/svelte.js
+*/
+
+import type { HLJSApi } from 'highlight.js';
+
+export function hljsDefineSvelte(hljs: HLJSApi) {
+	return {
+		subLanguage: 'xml',
+		contains: [
+			hljs.COMMENT('<!--', '-->', { relevance: 10 }),
+			{
+				begin: /^(\s*)(<script(\s*context="module")?>)/gm,
+				end: /^(\s*)(<\/script>)/gm,
+				subLanguage: 'javascript',
+				excludeBegin: true,
+				excludeEnd: true,
+				contains: [
+					{
+						begin: /^(\s*)(\$:)/gm,
+						end: /(\s*)/gm,
+						className: 'keyword',
+					},
+				],
+			},
+			{
+				begin: /^(\s*)(<style.*>)/gm,
+				end: /^(\s*)(<\/style>)/gm,
+				subLanguage: 'css',
+				excludeBegin: true,
+				excludeEnd: true,
+			},
+			{
+				begin: /\{/gm,
+				end: /\}/gm,
+				subLanguage: 'javascript',
+				contains: [
+					{
+						begin: /[\{]/,
+						end: /[\}]/,
+						skip: true,
+					},
+					{
+						begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm,
+						className: 'keyword',
+						relevance: 10,
+					},
+				],
+			},
+		],
+	};
+}
@@ -0,0 +1,103 @@
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeSlug from 'rehype-slug';
+// import rehypeAddClasses from 'rehype-add-classes';
+import rehypeStringify from 'rehype-stringify';
+import remarkGfm from 'remark-gfm';
+import remarkGithub from 'remark-github';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import remarkToc from 'remark-toc';
+import { unified } from 'unified';
+import { hljsDefineSvelte } from './hljs-svelte';
+
+export async function use_markdown(markdown: string) {
+	const pipeline = unified()
+		.use(remarkParse)
+		.use(remarkGfm)
+		.use(remarkGithub, { repository: 'https://github.com/OllieJT/svelte-podcast.git' })
+		.use(remarkToc, { tight: true, ordered: true, maxDepth: 4 })
+		.use(remarkRehype)
+		.use(rehypeStringify)
+		.use(rehypeSanitize, {
+			...defaultSchema,
+			attributes: {
+				...defaultSchema.attributes,
+
+				pre: [
+					...(defaultSchema.attributes?.pre || []),
+					[
+						'className',
+						'language-html',
+						'language-typescript',
+						'language-javascript',
+						'language-svelte',
+						'language-sh',
+					],
+				],
+
+				code: [
+					...(defaultSchema.attributes?.code || []),
+					[
+						'className',
+						'language-html',
+						'language-typescript',
+						'language-javascript',
+						'language-svelte',
+						'language-sh',
+					],
+				],
+
+				span: [
+					...(defaultSchema.attributes?.span || []),
+					[
+						'className',
+						'token',
+						'comment',
+						'prolog',
+						'cdata',
+						'punctuation',
+						'builtin',
+						'constant',
+						'boolean',
+						'number',
+						'important',
+						'atrule',
+						'property',
+						'keyword',
+						'doctype',
+						'operator',
+						'inserted',
+						'tag',
+						'class-name',
+						'symbol',
+						'attr-name',
+						'function',
+						'deleted',
+						'selector',
+						'attr-value',
+						'regex',
+						'char',
+						'string',
+						'entity',
+						'url',
+						'variable',
+						'bold',
+						'italic',
+						'namespace',
+					],
+				],
+			},
+		})
+		// .use(rehypeAddClasses, {})
+		.use(rehypeHighlight, { languages: { svelte: hljsDefineSvelte } })
+		.use(rehypeSlug)
+		.use(rehypeAutolinkHeadings, { behavior: 'wrap' })
+		.use(rehypeExternalLinks, { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] });
+
+	const output = await pipeline.process(markdown);
+
+	return output;
+}