Simplify setup (#46)

src/routes/setup/+page.svelte

@@ -1,9 +1,15 @@
 <script>
 	import { DocsPage } from '$src/layout/page';
-	import { add_audio_loader, install } from './code';
-
-	import { Highlight, HighlightSvelte } from 'svelte-highlight';
+	import { Highlight } from 'svelte-highlight';
 	import lang_shell from 'svelte-highlight/languages/shell';
+	import lang_ts from 'svelte-highlight/languages/typescript';
+	import {
+		install,
+		load_audio_advanced,
+		load_audio_local,
+		load_audio_remote,
+		override_episode_state,
+	} from './code';
 </script>
 
 <DocsPage title="Setup" let:Section>
@@ -17,37 +23,82 @@
 			<Highlight language={lang_shell} code={install} />
 		</div>
 	</Section>
-	<Section title="Add Loader">
-		<p class="text-primary-600">
-			<b class="font-medium">Important</b>: The AudioLoader component does
-			<em>not</em>
-			render any UI. However it <em>is required</em> to use svelte-podcast.
+
+	<Section title="Audio Sources">
+		<p>
+			To get started, you'll need an audio file. velte-podcast uses a html <code
+				>{'<audio />'}</code
+			> element under the hood, so any file compatible with the audio element
+			will work.
 		</p>
 
 		<p>
-			This component is responsible for loading the audio sources and
-			persisting the audio state between page loads. This means that your
-			audio will continue playing even if the user refreshes the page, or you
-			use different UI for the media player.
+			You can provide your audio files via absolute URL's - hosted online, or
+			relative paths - hosted within your project.
 		</p>
 
+		<h3>Using a remote file (URL)</h3>
+
 		<p>
-			Add the AudioLoader component to your app. It should be as close to the
-			root of your app as possible to ensure the audio state behaves as
-			expected in nested routes.
+			An <em>audio url</em> could be a URL to an MP3 file from an RSS feed,
+			like this:
+			<code>https://media.transistor.fm/27a058c9/27b595e2.mp3</code>. It
+			could also be a path to a static file on your server.
 		</p>
 
-		<ul>
-			<li>You must have one of these for svelte-podcast to work.</li>
-			<li>You should also only load one instance of this at a time</li>
-			<li>
-				We recommend you loading it at the base of your app in your
-				layout.svelte file.
-			</li>
-		</ul>
-
 		<div class="codeblock not-prose flex flex-col items-stretch gap-2 py-1">
-			<HighlightSvelte code={add_audio_loader} />
+			<Highlight code={load_audio_remote} language={lang_ts} />
+		</div>
+
+		<h3>Using a local file (relative path)</h3>
+
+		<p>
+			If you're using SvelteKit, you can store <em>static files</em> 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
+			<code>/static/episides/episode-01.mp3</code>
+			you could load it as <code>/episides/episode-01.mp3</code>
+		</p>
+
+		<div class="codeblock not-prose flex flex-col items-stretch gap-2 py-1">
+			<Highlight code={load_audio_local} language={lang_ts} />
+		</div>
+
+		<h3>Additional options</h3>
+
+		<p>
+			Along side your audio source, you can optionally define arbitrary
+			metadata for you to use in your player, and determine if the episode
+			should autoplay once loaded. Learn more in the <a
+				href="/api/#audio.load">api docs</a
+			>
+		</p>
+
+		<div class="codeblock not-prose flex flex-col items-stretch gap-2 py-1">
+			<Highlight code={load_audio_advanced} language={lang_ts} />
 		</div>
 	</Section>
+
+	<Section title="Type Safety">
+		<p>
+			Svelte podast makes it easy for you to associate arbitrary metadata
+			with each audio source. We recommend defining the shape of your
+			metadata in a <code>.d.ts</code> file.
+		</p>
+
+		<p>
+			In this example, we'll assume that your metadata consists of an episode
+			title, episode artwork, and an optional episode guest name.
+		</p>
+
+		<div class="not-prose codeblock">
+			<Highlight code={override_episode_state} language={lang_ts} />
+		</div>
+
+		<p>
+			If you're using SvelteKit, we recommend keeping this in <code
+				>src/app.d.ts</code
+			>.
+		</p>
+	</Section>
 </DocsPage>

src/routes/setup/code/add-audio-loader.svelte

@@ -1,7 +1,4 @@
 <script>
-	import { AudioContext } from 'svelte-podcast';
 </script>
 
-<AudioContext />
-
 <slot />

src/routes/setup/code/index.js

@@ -1,6 +1,14 @@
 import { format_code } from '$src/layout/helper';
 import { default as add_audio_loader_src } from './add-audio-loader.svelte?raw';
 import { default as install_src } from './install.sh?raw';
+import { default as load_audio_advanced_src } from './load-audio-advanced?raw';
+import { default as load_audio_local_src } from './load-audio-local?raw';
+import { default as load_audio_remote_src } from './load-audio-remote?raw';
+import { default as override_episode_state_src } from './override-episode-state?raw';
 
 export const add_audio_loader = format_code(add_audio_loader_src);
 export const install = format_code(install_src);
+export const override_episode_state = format_code(override_episode_state_src);
+export const load_audio_local = format_code(load_audio_local_src);
+export const load_audio_remote = format_code(load_audio_remote_src);
+export const load_audio_advanced = format_code(load_audio_advanced_src);

src/routes/setup/code/load-audio-advanced.js

@@ -0,0 +1,14 @@
+import { audio } from 'svelte-podcast';
+
+audio.load('/episode-audio.mp3');
+
+audio.load(
+	'https://media.transistor.fm/27a058c9/27b595e2.mp3',
+	{
+		title: 'SvelteKit-superforms with Andreas Söderlund',
+		artwork:
+			'https://images.transistor.fm/file/transistor/images/show/12899/medium_1597678946-artwork.jpg',
+		guest_name: 'Andreas Söderlund',
+	},
+	false,
+);

src/routes/setup/code/load-audio-local.js

@@ -0,0 +1,3 @@
+import { audio } from 'svelte-podcast';
+
+audio.load('/episode-audio.mp3');

src/routes/setup/code/load-audio-remote.js

@@ -0,0 +1,3 @@
+import { audio } from 'svelte-podcast';
+
+audio.load('https://media.transistor.fm/27a058c9/27b595e2.mp3');

src/routes/setup/code/override-episode-state.ts

@@ -0,0 +1,11 @@
+// include this in your /src/app.d.ts file
+
+declare module 'svelte-podcast' {
+	interface EpisodeDetails {
+		title: string;
+		artwork: string;
+		guest_name: string;
+	}
+}
+
+export {};