Ollie Taylor
138 lines
4.3 KiB
Svelte
138 lines
4.3 KiB
Svelte
<script>
|
|
import { base } from '$app/paths';
|
|
import { PlayerWidget } from '$src/components/example-player';
|
|
import { episodes } from '$src/content/episodes';
|
|
import { DocsPage } from '$src/layout/page';
|
|
|
|
/** @type { string | undefined} */
|
|
let audio_src = episodes.knomii.src;
|
|
</script>
|
|
|
|
<DocsPage title="Docs" let:Section>
|
|
<header
|
|
slot="header"
|
|
class="relative isolate bg-white"
|
|
aria-labelledby="hero"
|
|
>
|
|
<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>
|
|
<div>
|
|
<div class="relative py-24">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center">
|
|
<h1 id="hero">
|
|
<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}/setup"
|
|
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}/api"
|
|
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 grid grid-cols-1 grid-rows-1 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
|
|
src={audio_src}
|
|
class="w-full border border-mono-100"
|
|
options={{
|
|
duration: true,
|
|
current_time: true,
|
|
playback_rate: true,
|
|
skip_back: 10,
|
|
skip_forward: 30,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<Section title="Introduction">
|
|
<p>
|
|
Svelte-Podcast streamlines the creation of custom audio players and
|
|
simplifies state management in Svelte apps.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Build custom Audio Player UI</b>
|
|
<br />
|
|
Simplify the creation of custom audio players with a set of headless components
|
|
that keep out of your way and take care of core functionality.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Easily manage Audio State</b>
|
|
<br />
|
|
Loading, controlling, and keeping track of multiple audio sources is a pain.
|
|
svelte-podcast abstracts this away and provides a simple interface to manage
|
|
audio state.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Track user preferences</b>
|
|
<br />
|
|
Users expect a lot from media players. It should remember their preferences
|
|
like playback speed, and it should remember where they were in an episode
|
|
even after reloading the page. svelte-podcast takes care of this for you,
|
|
and provides you with access to extend this with your own database.
|
|
</p>
|
|
</Section>
|
|
</DocsPage>
|