SvelteKit Embed: Add Various Media to Your Site
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?
Something not work?
Create an issue
Todo
- Add more components
- Tests... need expanding
- If you know how to type a custom action in Svelte, please submit a PR
Developing locally
Rename the .sample.env file to .env.
mv .sample.env .env
Create the component in the src/lib/components directory.
Add the component to the 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:
import {MyComponent} from '$lib'
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="..." />
Test the package locally with the package:local script:
npm run package:local
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 sveltekit-embed@0.0.13 latest
Download Details:
Author: spences10
Source Code: https://github.com/spences10/sveltekit-embed
License: MIT license
