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"
/>
Create an issue
- Add more components
- Tests... need adding
- If you know how to type a custom action in Svelte, please submit a PR
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.
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 sveltkit
pnpm run package
# publish from package directory
cd package
# publish
npm publish
# push tags to github
git push --tags
Thanks goes to these wonderful people (emoji key):
Scott Spence 💻 |
Cahllagerfeld 💻 |
Matías Hernández Arellano 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!