spences10/sveltekit-embed

This is stars and forks stats for /spences10/sveltekit-embed repository. As of 03 May, 2024 this repository has 170 stars and 9 forks.

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? Start a discussion 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 [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): This project follows the all-contributors specification. Contributions of any kind welcome!