Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spences10/sveltekit-embed
SvelteKit embed components
https://github.com/spences10/sveltekit-embed
codepen deezer embed spotify svelte youtube
Last synced: about 20 hours ago
JSON representation
SvelteKit embed components
- Host: GitHub
- URL: https://github.com/spences10/sveltekit-embed
- Owner: spences10
- License: mit
- Created: 2021-07-17T17:50:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T21:26:11.000Z (about 2 months ago)
- Last Synced: 2024-10-29T23:43:38.297Z (about 2 months ago)
- Topics: codepen, deezer, embed, spotify, svelte, youtube
- Language: TypeScript
- Homepage: https://sveltekit-embed.pages.dev
- Size: 4.8 MB
- Stars: 205
- Watchers: 4
- Forks: 12
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-svelte-kit - SvelteKit Embed Components
- awesome-sveltekit - [code
README
# SvelteKit Embed
[](#contributors-)
[](https://madewithsvelte.com/p/sveltekit-embed/shield-link)
[](https://github.com/spences10/sveltekit-embed/actions/workflows/unit-test.yml)
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
```bash
npm i -D sveltekit-embed
```
Use like a normal Svelte component:
```html
import { AnchorFm } from 'sveltekit-embed';
```
## 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](https://github.com/spences10/sveltekit-embed/discussions/new)
## Something not work?
Create an
[issue](https://github.com/spences10/sveltekit-embed/issues/new)
## 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`.
```bash
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:
```ts
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:
```svelte
import {MyComponent} from 'sveltekit-embed'
```
After importing the component, add it to the
`Available Components List` and document it:
```markdown
## Available Components List
- [MyComponent](#mycomponent)
```
````markdown
## MyComponent
Props:
```ts
myComponentId: string = '';
```
Usage:
```html
```
Output:
````
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](https://github.com/pauliescanlon) for the
original version of this project in
[MDX Embed](https://github.com/pauliescanlon/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](https://scottspence.com/posts/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**
```bash
# 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:
```bash
# 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**
```bash
# 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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!