Initial Docs (#39)
This commit is contained in:
Ollie Taylor
GitHub
@@ -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;
|
||||
+102
-124
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user