SvelteKit Embed

This is a collection of embed components I use on a regular basis packaged up for use.

Each component is wrapped in an intersection observer GeneralObserver which will load up the component when it scrolls into the viewport.

Use

npm i -D sveltekit-embed

Use like a normal Svelte component:

<script>
  import { AnchorFm } from 'sveltekit-embed'
</script>

<AnchorFm
  height="165"
  episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
/>

Got questions?

Start a discussion

Something not work?

Create an issue

Todo

• [ ] Add more components
• [ ] Tests... need adding
• [ ] If you know how to type a custom action in Svelte, please submit a PR

Developing locally

Import the component locally into the index.md file:

import MyComponent from '$lib/components/my-component.svelte'

Test the package locally with the package:local script:

npm run package:local

And add it to the import statement in the index.md file:

import { MyComponent } from 'sveltekit-embed'

Test locally, then submit a PR 🙏

If you're adding a new component to be used in the package then add an export to the src/lib/index.ts file.

Thanks

Credit to @pauliescanlon for the original version of this project in MDX Embed.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Scott Spence 💻

Cahllagerfeld 💻

This project follows the all-contributors specification. Contributions of any kind welcome!