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
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
Author: spences10
Source Code: https://github.com/spences10/sveltekit-embed
License: MIT license