SvelteKit Embed

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

Each component with the exception of Toot and Tweet is wrapped in an intersection observer GeneralObserver which will load up the component when it scrolls into the viewport.

Use it

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"
/>

Supported platforms

• AnchorFm
• Buzzsprout
• CodePen
• Deezer
• GenericEmbed
• Gist
• Guild
• Relive
• SimpleCast
• Slides
• SoundCloud
• Spotify
• StackBlitz
• Toot
• Tweet
• Vimeo
• YouTube
• Zencastr

Got questions?

Start a discussion

Something not work?

Create an issue

Developing locally

For the web page and testing new components there you'll need to have empty env variables. Rename the .sample.env file to .env.

mv .sample.env apps/web/.env

Create the component in the packages/sveltekit-embed/src/lib/components directory.

Export the component from the packages/sveltekit-embed/src/lib/index.ts file:

export { default as MyComponent } from './components/my-component.svelte';

Import the component locally into the src/routes/+page.md file, or create your own (+page.svelte) page for testing:

import {MyComponent} from 'sveltekit-embed'

After importing the component, add it to the Available Components List and document it:

## Available Components List

- [MyComponent](#mycomponent)

## MyComponent

Props:

```ts
myComponentId: string = '';
```

Usage:

```html
<MyComponent myComponentId="..." />
```

Output:

<MyComponent myComponentId="..." />

Running the dev server on the web page will package the changes for use in the web app.

Test locally, then submit a PR 🙏

Thanks

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

Packaging for NPM

Scott, this is here for you to remember how to do this 🙃

Although I detailed this in Making npm Packages with SvelteKit I think it's best to put it here as I always come to the README and the instructions are never there! 😅

Publish the project to NPM

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.8
# package with sveltekit
pnpm run package
# publish
npm publish
# push tags to github
git push --tags

Publish @next package

Same procedure except use the --tag flag:

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.13
# package with sveltekit
pnpm run package
# publish with tag
npm publish --tag next
# push tags to github
git push --tags

Move @next package to latest

# authenticate with npm
npm login
# move @next to latest
npm dist-tag add [email protected] latest

Contributors ✨

Thanks goes to these wonderful people

Scott Spence 💻	Cahllagerfeld 💻	Matías Hernández Arellano 💻	Julian Laubstein 💻	Maxime Dupont 💻	James Perkins 💻	João Palmeiro 💻
Jason Dent 💻
Add your contributions

(emoji key):

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