From 29ef65733e9d62ce5ce7131c06eb36b28b312fe7 Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:13:18 +0100 Subject: [PATCH] Update Docs Site (#44) --- .changeset/six-donkeys-warn.md | 5 + .eslintrc.cjs | 7 +- .prettierrc | 1 - package.json | 16 +- src/app.d.ts | 4 + src/app.html | 13 +- src/app.postcss | 308 ++--- .../example-player/{index.ts => index.js} | 1 - .../example-player/player-stack.svelte | 58 +- .../example-player/player-widget.svelte | 51 +- .../example-player/utility/a11y-icon.svelte | 9 +- .../utility/{index.ts => index.js} | 0 .../example-player/utility/skip.svelte | 11 +- .../example-player/utility/spinner.svelte | 3 +- .../example-player/utility/timestamp.svelte | 7 +- src/components/preview-data-code.svelte | 6 - src/components/preview-data.svelte | 14 - src/content/__test.svx | 58 - src/content/components/anchor.svelte | 17 - .../components/content-list-item.svelte | 19 - src/content/components/content-title.svelte | 11 - src/content/components/content.svelte | 8 - src/content/components/features.svelte | 29 - src/content/components/index.ts | 6 - src/content/components/section-title.svelte | 9 - src/content/components/section.svelte | 9 - src/content/docs.md | 184 --- src/content/{episodes.ts => episodes.js} | 9 +- src/content/example/index.ts | 5 - src/content/utility/anchor-registry.ts | 37 - src/content/utility/code-opts.ts | 8 - src/globals.d.ts | 8 - src/layout/helper.js | 5 + src/layout/metadata.svelte | 36 + src/layout/page/component.svelte | 26 + src/layout/page/container.svelte | 12 + src/layout/page/index.js | 1 + src/layout/page/section-article.svelte | 19 + src/layout/page/section.svelte | 22 + src/layout/page/table-module.svelte | 33 + src/layout/page/table-schema.svelte | 40 + .../preview-component.svelte | 5 +- src/layout/sidebar.svelte | 179 +++ src/lib/audio/context.svelte | 9 +- src/lib/audio/player.svelte | 4 +- src/lib/audio/progress.svelte | 2 +- src/lib/audio/stores/audio-element.js | 4 + src/lib/audio/stores/episode-data.js | 54 +- src/lib/{utility => internal}/announce.js | 0 src/lib/internal/index.js | 7 + src/lib/{utility => internal}/use-url.js | 0 src/lib/user/user-preferences.js | 10 +- src/lib/user/user-progress.js | 10 +- src/lib/utility/index.js | 2 - src/markdown/hljs-svelte.ts | 59 - src/markdown/index.ts | 1 - src/markdown/use-markdown.ts | 103 -- .../{+layout.server.ts => +layout.server.js} | 0 src/routes/+layout.svelte | 238 +++- src/routes/+page.server.ts | 8 - src/routes/+page.svelte | 216 ++-- src/routes/api/+page.svelte | 349 ++++++ src/routes/api/code/index.js | 15 + .../api/code/load-audio-after-click.svelte} | 0 .../api/code/load-audio-after-mount.svelte} | 0 src/routes/api/code/load-audio-local.js | 9 + src/routes/api/code/load-audio-remote.js | 9 + src/routes/api/code/override-episode-state.ts | 11 + src/routes/api/code/seconds-to-timestamp.js | 8 + src/routes/demo/+page.svelte | 270 ----- src/routes/examples/+page.svelte | 126 ++ src/routes/setup/+page.svelte | 53 + .../setup/code/add-audio-loader.svelte} | 2 - src/routes/setup/code/index.js | 6 + src/routes/setup/code/install.sh | 5 + static/ads.txt | 0 static/humans.txt | 7 + static/robots.txt | 3 + tailwind.config.cjs | 17 +- yarn.lock | 1079 +---------------- 80 files changed, 1624 insertions(+), 2381 deletions(-) create mode 100644 .changeset/six-donkeys-warn.md rename src/components/example-player/{index.ts => index.js} (63%) rename src/components/example-player/utility/{index.ts => index.js} (100%) delete mode 100644 src/components/preview-data-code.svelte delete mode 100644 src/components/preview-data.svelte delete mode 100644 src/content/__test.svx delete mode 100644 src/content/components/anchor.svelte delete mode 100644 src/content/components/content-list-item.svelte delete mode 100644 src/content/components/content-title.svelte delete mode 100644 src/content/components/content.svelte delete mode 100644 src/content/components/features.svelte delete mode 100644 src/content/components/index.ts delete mode 100644 src/content/components/section-title.svelte delete mode 100644 src/content/components/section.svelte delete mode 100644 src/content/docs.md rename src/content/{episodes.ts => episodes.js} (82%) delete mode 100644 src/content/example/index.ts delete mode 100644 src/content/utility/anchor-registry.ts delete mode 100644 src/content/utility/code-opts.ts delete mode 100644 src/globals.d.ts create mode 100644 src/layout/helper.js create mode 100644 src/layout/metadata.svelte create mode 100644 src/layout/page/component.svelte create mode 100644 src/layout/page/container.svelte create mode 100644 src/layout/page/index.js create mode 100644 src/layout/page/section-article.svelte create mode 100644 src/layout/page/section.svelte create mode 100644 src/layout/page/table-module.svelte create mode 100644 src/layout/page/table-schema.svelte rename src/{components => layout}/preview-component.svelte (86%) create mode 100644 src/layout/sidebar.svelte rename src/lib/{utility => internal}/announce.js (100%) create mode 100644 src/lib/internal/index.js rename src/lib/{utility => internal}/use-url.js (100%) delete mode 100644 src/markdown/hljs-svelte.ts delete mode 100644 src/markdown/index.ts delete mode 100644 src/markdown/use-markdown.ts rename src/routes/{+layout.server.ts => +layout.server.js} (100%) delete mode 100644 src/routes/+page.server.ts create mode 100644 src/routes/api/+page.svelte create mode 100644 src/routes/api/code/index.js rename src/{content/example/load-audio-click.svelte => routes/api/code/load-audio-after-click.svelte} (100%) rename src/{content/example/load-audio-mount.svelte => routes/api/code/load-audio-after-mount.svelte} (100%) create mode 100644 src/routes/api/code/load-audio-local.js create mode 100644 src/routes/api/code/load-audio-remote.js create mode 100644 src/routes/api/code/override-episode-state.ts create mode 100644 src/routes/api/code/seconds-to-timestamp.js delete mode 100644 src/routes/demo/+page.svelte create mode 100644 src/routes/examples/+page.svelte create mode 100644 src/routes/setup/+page.svelte rename src/{content/example/add-loader.svelte => routes/setup/code/add-audio-loader.svelte} (81%) create mode 100644 src/routes/setup/code/index.js create mode 100644 src/routes/setup/code/install.sh create mode 100644 static/ads.txt create mode 100644 static/humans.txt create mode 100644 static/robots.txt diff --git a/.changeset/six-donkeys-warn.md b/.changeset/six-donkeys-warn.md new file mode 100644 index 0000000..cfd264c --- /dev/null +++ b/.changeset/six-donkeys-warn.md @@ -0,0 +1,5 @@ +--- +'svelte-podcast': minor +--- + +switch to jsdoc from ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4951171..28fc79f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -32,7 +32,12 @@ module.exports = { 'unused-imports/no-unused-imports': 'error', 'unused-imports/no-unused-vars': [ 'warn', - { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }, + { + vars: 'all', + varsIgnorePattern: '^_', + args: 'after-used', + argsIgnorePattern: '^_', + }, ], }, }; diff --git a/.prettierrc b/.prettierrc index 7bd91b3..1fe995c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,4 @@ { - "printWidth": 100, "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "arrowParens": "always", "bracketSpacing": true, diff --git a/package.json b/package.json index 08cca41..a6da630 100644 --- a/package.json +++ b/package.json @@ -60,33 +60,21 @@ "eslint-config-prettier": "^8.8.0", "eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-unused-imports": "^2.0.0", - "highlight.js": "^11.8.0", "postcss": "^8.4.25", "postcss-load-config": "^4.0.1", "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", "prettier-plugin-tailwindcss": "^0.3.0", "publint": "^0.1.16", - "rehype-add-classes": "^1.0.0", - "rehype-autolink-headings": "^6.1.1", - "rehype-external-links": "^2.1.0", - "rehype-highlight": "^6.0.0", - "rehype-sanitize": "^5.0.1", - "rehype-slug": "^5.1.0", - "rehype-stringify": "^9.0.3", - "remark-gfm": "^3.0.1", - "remark-github": "^11.2.4", - "remark-parse": "^10.0.2", - "remark-rehype": "^10.1.0", - "remark-toc": "^8.0.1", "svelte": "^4.0.5", "svelte-check": "^3.4.5", + "svelte-highlight": "^7.3.0", + "svelte-meta-tags": "^2.8.0", "svelte-preprocess": "^5.0.4", "svhighlight": "^0.7.1", "tailwindcss": "^3.3.2", "tslib": "^2.6.0", "typescript": "^5.1.6", - "unified": "^10.1.2", "vite": "^4.4.2" }, "svelte": "./dist/index.js", diff --git a/src/app.d.ts b/src/app.d.ts index e155a0b..793c217 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -15,4 +15,8 @@ declare global { } } +declare module '*.md' { + export default ComponentType; +} + export {}; diff --git a/src/app.html b/src/app.html index 21bc595..83d21b4 100644 --- a/src/app.html +++ b/src/app.html @@ -1,12 +1,19 @@ - + - + + + + + + + + %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss index c44fdc1..ae71f23 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -16,36 +16,14 @@ } @layer components { - .prose code { - @apply inline rounded bg-primary-100 px-2 py-1 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; - } + .richtext h1 a, + .richtext h2 a, + .richtext h3 a, + .richtext h4 a, + .richtext h5 a, + .richtext h6 a { + @apply relative underline decoration-transparent decoration-solid underline-offset-2; - .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: '#'; @@ -58,168 +36,122 @@ } } - .prose h3 a { - @apply text-primary-600; + .richtext code.hljs { + @apply p-0 text-sm; + overflow-wrap: anywhere; } - .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; - } - } - } + .richtext .codeblock code.hljs { + @apply overflow-hidden rounded-xl border border-mono-200 p-4 font-mono text-base leading-normal shadow-2xl shadow-mono-200; } - .prose #features + table td:first-child > * { - @apply sm:block sm:w-max; + .richtext { + @apply prose prose-lg prose-slate max-w-none prose-h5:mb-1 prose-h5:mt-10 prose-h5:text-sm prose-h5:font-medium prose-h5:leading-normal prose-h5:text-primary-800 prose-code:before:content-none prose-code:after:content-none; + } + + .richtext td, + .richtext th { + @apply px-4 py-2; + } + + .richtext td { + @apply min-w-max; + } + + /* HLJS */ + pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; + } + code.hljs { + padding: 3px 5px; + } + /* + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS + */ + .hljs { + color: #24292e; + background: #fff; + } + .hljs-doctag, + .hljs-keyword, + .hljs-meta .hljs-keyword, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-variable.language_ { + color: #d73a49; + } + .hljs-title, + .hljs-title.class_, + .hljs-title.class_.inherited__, + .hljs-title.function_ { + color: #6f42c1; + } + .hljs-attr, + .hljs-attribute, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-operator, + .hljs-selector-attr, + .hljs-selector-class, + .hljs-selector-id, + .hljs-variable { + color: #005cc5; + } + .hljs-meta .hljs-string, + .hljs-regexp, + .hljs-string { + color: #032f62; + } + .hljs-built_in, + .hljs-symbol { + color: #e36209; + } + .hljs-code, + .hljs-comment, + .hljs-formula { + color: #6a737d; + } + .hljs-name, + .hljs-quote, + .hljs-selector-pseudo, + .hljs-selector-tag { + color: #22863a; + } + .hljs-subst { + color: #24292e; + } + .hljs-section { + color: #005cc5; + font-weight: 700; + } + .hljs-bullet { + color: #735c0f; + } + .hljs-emphasis { + color: #24292e; + font-style: italic; + } + .hljs-strong { + color: #24292e; + font-weight: 700; + } + .hljs-addition { + color: #22863a; + background-color: #f0fff4; + } + .hljs-deletion { + color: #b31d28; + background-color: #ffeef0; } } - -/***** 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; -} diff --git a/src/components/example-player/index.ts b/src/components/example-player/index.js similarity index 63% rename from src/components/example-player/index.ts rename to src/components/example-player/index.js index 5eeb5a7..5d2f019 100644 --- a/src/components/example-player/index.ts +++ b/src/components/example-player/index.js @@ -1,3 +1,2 @@ -export { default as HeadlessTimeline } from './headless-timeline.svelte'; export { default as PlayerStack } from './player-stack.svelte'; export { default as PlayerWidget } from './player-widget.svelte'; diff --git a/src/components/example-player/player-stack.svelte b/src/components/example-player/player-stack.svelte index 0705150..d63a491 100644 --- a/src/components/example-player/player-stack.svelte +++ b/src/components/example-player/player-stack.svelte @@ -1,29 +1,36 @@ -
{/if} @@ -118,7 +120,9 @@ --svpod--timeline-track--shape--radius: var(--inner-radius); --svpod--timeline-track--shape--border: 2px; - --svpod--timeline-thumb--shape--height: var(--svpod--timeline-track--shape--height); + --svpod--timeline-thumb--shape--height: var( + --svpod--timeline-track--shape--height + ); --svpod--timeline-thumb--shape--width: 3px; --svpod--timeline-thumb--shape--radius: 1px; --svpod--timeline-thumb--shape--border: 0px; @@ -226,10 +230,15 @@ .svpod--timeline { :global(input[type='range']) { - --track--shape--height: calc(var(--svpod--timeline-track--shape--height)); - --thumb-border-offset: calc(var(--svpod--timeline-thumb--shape--border) * 2); + --track--shape--height: calc( + var(--svpod--timeline-track--shape--height) + ); + --thumb-border-offset: calc( + var(--svpod--timeline-thumb--shape--border) * 2 + ); --thumb--shape--height: calc( - var(--svpod--timeline-thumb--shape--height) - var(--thumb-border-offset) + var(--svpod--timeline-thumb--shape--height) - + var(--thumb-border-offset) ); --svpod--timeline-track--bg: var(--svpod--surface--base); diff --git a/src/components/example-player/utility/a11y-icon.svelte b/src/components/example-player/utility/a11y-icon.svelte index b751a1b..8f44218 100644 --- a/src/components/example-player/utility/a11y-icon.svelte +++ b/src/components/example-player/utility/a11y-icon.svelte @@ -1,8 +1,9 @@ - diff --git a/src/components/example-player/utility/index.ts b/src/components/example-player/utility/index.js similarity index 100% rename from src/components/example-player/utility/index.ts rename to src/components/example-player/utility/index.js diff --git a/src/components/example-player/utility/skip.svelte b/src/components/example-player/utility/skip.svelte index 7da406b..5b503d0 100644 --- a/src/components/example-player/utility/skip.svelte +++ b/src/components/example-player/utility/skip.svelte @@ -1,7 +1,12 @@ -
diff --git a/src/components/example-player/utility/spinner.svelte b/src/components/example-player/utility/spinner.svelte index 1f318d6..30ab187 100644 --- a/src/components/example-player/utility/spinner.svelte +++ b/src/components/example-player/utility/spinner.svelte @@ -1,4 +1,5 @@ - diff --git a/src/components/example-player/utility/timestamp.svelte b/src/components/example-player/utility/timestamp.svelte index 41ba760..f8fbcaa 100644 --- a/src/components/example-player/utility/timestamp.svelte +++ b/src/components/example-player/utility/timestamp.svelte @@ -1,7 +1,10 @@ - - -
{`//${description}\n\n${code}`}
diff --git a/src/components/preview-data.svelte b/src/components/preview-data.svelte deleted file mode 100644 index 4579790..0000000 --- a/src/components/preview-data.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - -
-

{name}

- -

subscription: ${name}

- 
{JSON.stringify({ data }, null, 2)}
- -

methods

- -
diff --git a/src/content/__test.svx b/src/content/__test.svx deleted file mode 100644 index 9c1e76b..0000000 --- a/src/content/__test.svx +++ /dev/null @@ -1,58 +0,0 @@ -# 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 - - - - - - - -``` - -[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 | diff --git a/src/content/components/anchor.svelte b/src/content/components/anchor.svelte deleted file mode 100644 index 1433279..0000000 --- a/src/content/components/anchor.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - {value} - - diff --git a/src/content/components/content-list-item.svelte b/src/content/components/content-list-item.svelte deleted file mode 100644 index 85608d3..0000000 --- a/src/content/components/content-list-item.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - -
  • -

    - {#if anchor} - - {:else} - {title} - {/if} -

    -

    - -

    -
    • diff --git a/src/content/components/content-title.svelte b/src/content/components/content-title.svelte deleted file mode 100644 index 4049423..0000000 --- a/src/content/components/content-title.svelte +++ /dev/null @@ -1,11 +0,0 @@ - - -

    -{#if subtitle} -

    {subtitle}

    -{/if} diff --git a/src/content/components/content.svelte b/src/content/components/content.svelte deleted file mode 100644 index a9e3c80..0000000 --- a/src/content/components/content.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - -
    - -
    diff --git a/src/content/components/features.svelte b/src/content/components/features.svelte deleted file mode 100644 index 10c7a47..0000000 --- a/src/content/components/features.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -
    - {#each features as feature} -
    -
    - - - {feature.title} -
    -
    {feature.description}
    -
    - {/each} -
    diff --git a/src/content/components/index.ts b/src/content/components/index.ts deleted file mode 100644 index a18b322..0000000 --- a/src/content/components/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -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'; diff --git a/src/content/components/section-title.svelte b/src/content/components/section-title.svelte deleted file mode 100644 index ba71ec6..0000000 --- a/src/content/components/section-title.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -

    - -

    diff --git a/src/content/components/section.svelte b/src/content/components/section.svelte deleted file mode 100644 index fa24444..0000000 --- a/src/content/components/section.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - -
    -
    - -
    -
    diff --git a/src/content/docs.md b/src/content/docs.md deleted file mode 100644 index e3dcb45..0000000 --- a/src/content/docs.md +++ /dev/null @@ -1,184 +0,0 @@ -## 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 - - - - - - - - -``` - -### 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 - -``` - -##### Example: Load audio after a user clicks a button - -```svelte - - - - - - - -``` - -## Components - -### `` - -Coming soon... - -### `` - -Coming soon... - -### `` - -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... diff --git a/src/content/episodes.ts b/src/content/episodes.js similarity index 82% rename from src/content/episodes.ts rename to src/content/episodes.js index a969568..f6a4d6b 100644 --- a/src/content/episodes.ts +++ b/src/content/episodes.js @@ -1,6 +1,11 @@ import { assets } from '$app/paths'; -export const episodes = { +/** + * Audio context module. + * @module episodes + */ + +export const episodes = Object.freeze({ syntax: { src: `${assets}/example-syntax.mp3`, title: `Supper Club × Rich Harris, Author of Svelte`, @@ -11,4 +16,4 @@ export const episodes = { 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; +}); diff --git a/src/content/example/index.ts b/src/content/example/index.ts deleted file mode 100644 index af2322b..0000000 --- a/src/content/example/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 }; diff --git a/src/content/utility/anchor-registry.ts b/src/content/utility/anchor-registry.ts deleted file mode 100644 index 7369872..0000000 --- a/src/content/utility/anchor-registry.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { writable } from 'svelte/store'; - -type Topic = string; - -const content = new Set(); - -const ropic_registry = writable([...content]); - -function add(value: Topic) { - ropic_registry.update((prev) => { - const content = new Set(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() - // eslint-disable-next-line no-control-regex - .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, -}; diff --git a/src/content/utility/code-opts.ts b/src/content/utility/code-opts.ts deleted file mode 100644 index cbcf98b..0000000 --- a/src/content/utility/code-opts.ts +++ /dev/null @@ -1,8 +0,0 @@ -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; diff --git a/src/globals.d.ts b/src/globals.d.ts deleted file mode 100644 index 9e38b61..0000000 --- a/src/globals.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -// 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; -} diff --git a/src/layout/helper.js b/src/layout/helper.js new file mode 100644 index 0000000..71c4f60 --- /dev/null +++ b/src/layout/helper.js @@ -0,0 +1,5 @@ +export const slugify = (/** @type {string} */ str) => + encodeURI(str.toLowerCase().trim().replaceAll(' ', '_')); + +export const format_code = (/** @type {string} */ code) => + code.replaceAll('\t', ' '); diff --git a/src/layout/metadata.svelte b/src/layout/metadata.svelte new file mode 100644 index 0000000..8b11725 --- /dev/null +++ b/src/layout/metadata.svelte @@ -0,0 +1,36 @@ + + + diff --git a/src/layout/page/component.svelte b/src/layout/page/component.svelte new file mode 100644 index 0000000..5b52dcf --- /dev/null +++ b/src/layout/page/component.svelte @@ -0,0 +1,26 @@ + + + + + + +
    +

    {title}

    +
    +     +     + + diff --git a/src/layout/page/container.svelte b/src/layout/page/container.svelte new file mode 100644 index 0000000..4ace9a6 --- /dev/null +++ b/src/layout/page/container.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/src/layout/page/index.js b/src/layout/page/index.js new file mode 100644 index 0000000..a9beb79 --- /dev/null +++ b/src/layout/page/index.js @@ -0,0 +1 @@ +export { default as DocsPage } from './component.svelte'; diff --git a/src/layout/page/section-article.svelte b/src/layout/page/section-article.svelte new file mode 100644 index 0000000..9fb5fe2 --- /dev/null +++ b/src/layout/page/section-article.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/layout/page/section.svelte b/src/layout/page/section.svelte new file mode 100644 index 0000000..ff93ff4 --- /dev/null +++ b/src/layout/page/section.svelte @@ -0,0 +1,22 @@ + + + +
    + + {title} + + + +
    +     diff --git a/src/layout/page/table-module.svelte b/src/layout/page/table-module.svelte new file mode 100644 index 0000000..bb06238 --- /dev/null +++ b/src/layout/page/table-module.svelte @@ -0,0 +1,33 @@ + + +
    + + + + + + + {#each rows as { method, description }} + + + + + {/each} + +
    MethodDescription
    + + {description}
    +
    diff --git a/src/layout/page/table-schema.svelte b/src/layout/page/table-schema.svelte new file mode 100644 index 0000000..66e95dc --- /dev/null +++ b/src/layout/page/table-schema.svelte @@ -0,0 +1,40 @@ + + +
    + + + + + + + + {#each rows as { property, type, description }} + + + + + + + + {/each} + +
    PropertyTypeDescription
    + + + + {description}
    +
    diff --git a/src/components/preview-component.svelte b/src/layout/preview-component.svelte similarity index 86% rename from src/components/preview-component.svelte rename to src/layout/preview-component.svelte index cd85773..bc0d814 100644 --- a/src/components/preview-component.svelte +++ b/src/layout/preview-component.svelte @@ -1,5 +1,6 @@ -
    diff --git a/src/layout/sidebar.svelte b/src/layout/sidebar.svelte new file mode 100644 index 0000000..ff66268 --- /dev/null +++ b/src/layout/sidebar.svelte @@ -0,0 +1,179 @@ + + + +
    + + Svelte-Podcast + + +
    diff --git a/src/lib/audio/context.svelte b/src/lib/audio/context.svelte index 050f4e9..d0f902d 100644 --- a/src/lib/audio/context.svelte +++ b/src/lib/audio/context.svelte @@ -1,8 +1,8 @@ -
    -
    -
    -
    - - Svelte-Podcast - -
    -
    - {#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)} - - {link.label} - - {/each} -
    -
    - - View Repository - -
    -
    -
    -
    + + {@html github} + - + +