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.
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"
/>
- AnchorFm
- Buzzsprout
- CodePen
- Deezer
- GenericEmbed
- Gist
- Guild
- Relive
- SimpleCast
- Slides
- SoundCloud
- Spotify
- StackBlitz
- Toot
- Tweet
- Vimeo
- YouTube
- Zencastr
Create an issue
- Add more components
- Tests... need expanding
- If you know how to type a custom action in Svelte, please submit a PR
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 🙏
Credit to @pauliescanlon for the original version of this project in MDX Embed.
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
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 💻 |
||||||
|
(emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!