feat: ✨ new Zencastr component

Author: spences10

.vscode/settings.json

@@ -22,6 +22,7 @@
     "sveltkit",
     "vieria",
     "vite",
+    "zencastr",
     "Zrzbx"
   ],
   "css.validate": false,

src/lib/components/zencastr.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  export let zencastrId: string = ''
+
+  // TODO: want to do this the Svelte way, but using <svelte:head> doesn't work
+  onMount(() => {
+    const script = document.createElement('script')
+    script.async = true
+    script.src = 'https://zencastr.com/static/js/embed-player.js'
+    document.body.appendChild(script)
+  })
+</script>
+
+<section style="display:flex; justify-content: center;">
+  <blockquote
+    class="zenplayer"
+    data-episode-href={`https://zencastr.com/embed/${zencastrId}`}
+    style="background: black; border-radius: 12px; font-family: system-ui; width: 480px; height: 480px; position: relative; color: white; margin: 0;"
+  >
+    <img
+      alt=""
+      style="width: 120px; display: inline-block; position: absolute; top: calc(50%); left: calc(50%); transform: translate(-50%, -50%);"
+    />
+    <a
+      href={`https://zencastr.com/embed/${zencastrId}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      style="color: white; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); text-decoration: none;"
+    >
+      View on Zencastr
+    </a>
+  </blockquote>
+</section>

src/lib/components/zencastr.test.ts

@@ -0,0 +1,12 @@
+import Zencastr from '$lib/components/zencastr.svelte'
+import { cleanup, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it } from 'vitest'
+
+describe('Zencastr', () => {
+  afterEach(() => cleanup())
+
+  it('mounts', () => {
+    const { container } = render(Zencastr)
+    expect(container).toBeTruthy()
+  })
+})

src/lib/index.ts

@@ -14,4 +14,5 @@ export { default as Toot } from './components/toot.svelte'
 export { default as Tweet } from './components/tweet.svelte'
 export { default as Vimeo } from './components/vimeo.svelte'
 export { default as YouTube } from './components/you-tube.svelte'
+export { default as Zencastr } from './components/zencastr.svelte'
 

src/routes/+page.md

@@ -15,6 +15,7 @@
     Tweet,
     Vimeo,
     YouTube,
+    Zencastr
   } from '$lib'
   import { Head } from 'svead'
   import { page } from '$app/stores'
@@ -470,3 +471,21 @@ Usage:
 Output:
 
 <YouTube youTubeId="L7_z8rcbFPg" />
+
+## Zencastr
+
+Props:
+
+```ts
+zencastrId: string = ''
+```
+
+Usage:
+
+```html
+<Zencastr zencastrId="TARGseQu" />
+```
+
+Output:
+
+<Zencastr zencastrId='TARGseQu'/>