cyber-mawonaj/oki-podcast-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Headless Improvements (#41)

Browse Source
This commit is contained in:
Ollie Taylor
2023-07-10 16:35:58 +01:00
committed by GitHub
parent 980588930a
commit 16366ec7f3
54 changed files with 1406 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.ts → src/routes/+layout.server.ts
View File
src/routes/+layout.svelte
+2 -2
View File
@@ -4,7 +4,7 @@
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 { Audio } from 'svelte-podcast';
import '../app.postcss';
const page_links = [
@@ -62,6 +62,6 @@
</div>
</header>
<AudioLoader />
<Audio />
<slot />
src/routes/+page.server.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import content from '$src/content/docs.md?raw';
import { use_markdown } from '$src/markdown';
import type { PageServerLoad } from './$types';
import { use_markdown } from './use-markdown';
export const load = (async () => {
const post = await use_markdown(content);
src/routes/+page.svelte
+7 -9
View File
@@ -2,21 +2,18 @@
import { base } from '$app/paths';
import { Section } from '$src/content/components';
// import Docs from '$src/content/docs.md';
//import { PodcastPlayer } from '$src/components/example-player/_player';
import PlayerWidget from '$src/components/example-player/player-widget.svelte';
import { episodes } from '$src/content/episodes';
import { onMount } from 'svelte';
import { episode_audio, PlayerWidget } from 'svelte-podcast';
import type { PageServerData } from './$types';
export let data: PageServerData;
onMount(() => {
// load the episode on mount without any metadata
episode_audio.load(episodes.knomii.src, {
/* optional metadata */
});
});
let audio_src: string | undefined = episodes.knomii.src;
</script>
<!-- <PodcastPlayer title="Example title" /> -->
<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)]"
@@ -86,8 +83,9 @@
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
src={audio_src}
class="w-full border border-mono-100"
include={{
options={{
duration: true,
current_time: true,
playback_rate: true,
src/routes/demo/+page.svelte
+8 -8
View File
@@ -1,16 +1,16 @@
<script lang="ts">
import PlayerStack from '$src/components/example-player/player-stack.svelte';
import PlayerWidget from '$src/components/example-player/player-widget.svelte';
import PreviewComponent from '$src/components/preview-component.svelte';
import PreviewDataCode from '$src/components/preview-data-code.svelte';
import PreviewData from '$src/components/preview-data.svelte';
import { Section } from '$src/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: {
@@ -180,11 +180,11 @@
description="clears all user preferences and resets them to default values"
/>
<PreviewDataCode
code={`user_preferences.set.playback_rate(value: number)`}
code={`user_preferences.set_playback_rate(value: number)`}
description="sets the users prefered playback_rate (speed)"
/>
<PreviewDataCode
code={`user_preferences.set.volume(value: number)`}
code={`user_preferences.set_volume(value: number)`}
description="sets the users prefered volume"
/>
</PreviewData>
@@ -259,7 +259,7 @@
<h6>Playback Rate</h6>
{#each [0.5, 1, 2, 3] as rate}
<button type="button" on:click={() => user_preferences.set.playback_rate(rate)}>
<button type="button" on:click={() => user_preferences.set_playback_rate(rate)}>
{rate}x
</button>
{/each}
src/routes/demo/preview-component.svelte
-20
View File
@@ -1,20 +0,0 @@
<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>
src/routes/demo/preview-data-code.svelte
-6
View File
@@ -1,6 +0,0 @@
<script lang="ts">
export let code: string;
export let description: string;
</script>
<pre><code class="hljs language-js">{`//${description}\n\n${code}`}</code></pre>
src/routes/demo/preview-data.svelte
-14
View File
@@ -1,14 +0,0 @@
<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>
src/routes/hljs-svelte.ts
-59
View File
@@ -1,59 +0,0 @@
/*
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: [
{
// eslint-disable-next-line no-useless-escape
begin: /[\{]/,
// eslint-disable-next-line no-useless-escape
end: /[\}]/,
skip: true,
},
{
// eslint-disable-next-line no-useless-escape
begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm,
className: 'keyword',
relevance: 10,
},
],
},
],
};
}
src/routes/use-markdown.ts
-103
View File
@@ -1,103 +0,0 @@
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;
}