Skip to content

Commit be59203

Browse files
spences10spences10
committed
chore: Update package.json and README.md for sveltekit-embed
- Enhanced package description for clarity and SEO. - Added keywords to improve discoverability. - Included homepage, repository, bugs, and funding information in package.json. - Expanded README.md with installation instructions, features, usage examples, and supported platforms.
1 parent b79f1ac commit be59203

File tree

2 files changed

+220
-3
lines changed

2 files changed

+220
-3
lines changed

‎packages/sveltekit-embed/README.md‎

Lines changed: 187 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,189 @@
11
# SvelteKit Embed 🌱
22

3-
[docs](../../README.md)
3+
[![npm version](https://badge.fury.io/js/sveltekit-embed.svg)](https://badge.fury.io/js/sveltekit-embed)
4+
[![npm downloads](https://img.shields.io/npm/dm/sveltekit-embed.svg)](https://www.npmjs.com/package/sveltekit-embed)
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6+
[![Tests: Unit](https://github.com/spences10/sveltekit-embed/actions/workflows/unit-test.yml/badge.svg)](https://github.com/spences10/sveltekit-embed/actions/workflows/unit-test.yml)
7+
8+
A collection of embed components for SvelteKit applications. Easily
9+
embed content from popular platforms like YouTube, Spotify, Vimeo,
10+
CodePen, and many more with performant, lazy-loaded components.
11+
12+
## ✨ Features
13+
14+
- 🚀 **Lazy Loading**: All components (except `Toot` and `Tweet`) use
15+
intersection observer for performance
16+
- 📱 **Responsive**: Mobile-friendly designs that adapt to different
17+
screen sizes
18+
- 🎨 **Customizable**: Flexible props to customize appearance and
19+
behavior
20+
- 🔒 **TypeScript**: Full TypeScript support with proper type
21+
definitions
22+
- ⚡ **SvelteKit Optimized**: Built specifically for SvelteKit
23+
applications
24+
- 🌐 **19 Platforms Supported**: Wide range of supported embed
25+
platforms
26+
27+
## 📦 Installation
28+
29+
```bash
30+
npm install sveltekit-embed
31+
```
32+
33+
```bash
34+
pnpm add sveltekit-embed
35+
```
36+
37+
```bash
38+
yarn add sveltekit-embed
39+
```
40+
41+
## 🚀 Quick Start
42+
43+
Import and use any component in your Svelte/SvelteKit application:
44+
45+
```svelte
46+
<script>
47+
import { YouTube, Spotify, CodePen } from 'sveltekit-embed';
48+
</script>
49+
50+
<!-- YouTube Video -->
51+
<YouTube youTubeId="dQw4w9WgXcQ" />
52+
53+
<!-- Spotify Track -->
54+
<Spotify
55+
spotifyLink="track/4iV5W9uYEdYUVa79Axb7Rh"
56+
width="100%"
57+
height="152"
58+
/>
59+
60+
<!-- CodePen -->
61+
<CodePen codePenId="xxGYWQG" height="300" defaultTab="result" />
62+
```
63+
64+
## 🌟 Supported Platforms
65+
66+
| Platform | Component | Description |
67+
| ---------------- | ------------------ | ----------------------------------- |
68+
| **AnchorFm** | `<AnchorFm />` | Podcast episodes from Anchor.fm |
69+
| **Buzzsprout** | `<Buzzsprout />` | Podcast episodes from Buzzsprout |
70+
| **CodePen** | `<CodePen />` | Interactive code examples |
71+
| **Deezer** | `<Deezer />` | Music tracks and playlists |
72+
| **GenericEmbed** | `<GenericEmbed />` | Generic iframe embed for any URL |
73+
| **Gist** | `<Gist />` | GitHub Gists |
74+
| **Guild** | `<Guild />` | Guild.xyz embeds |
75+
| **Relive** | `<Relive />` | Relive activity summaries |
76+
| **SimpleCast** | `<SimpleCast />` | SimpleCast podcast episodes |
77+
| **Slides** | `<Slides />` | Slide presentations |
78+
| **SoundCloud** | `<SoundCloud />` | Audio tracks from SoundCloud |
79+
| **Spotify** | `<Spotify />` | Music tracks, albums, and playlists |
80+
| **StackBlitz** | `<StackBlitz />` | Live coding environments |
81+
| **Toot** | `<Toot />` | Mastodon posts |
82+
| **Tweet** | `<Tweet />` | Twitter/X posts |
83+
| **Vimeo** | `<Vimeo />` | Vimeo videos |
84+
| **YouTube** | `<YouTube />` | YouTube videos |
85+
| **Zencastr** | `<Zencastr />` | Zencastr podcast episodes |
86+
87+
## 📖 Usage Examples
88+
89+
### YouTube
90+
91+
```svelte
92+
<script>
93+
import { YouTube } from 'sveltekit-embed';
94+
</script>
95+
96+
<YouTube youTubeId="dQw4w9WgXcQ" aspectRatio="16:9" width="100%" />
97+
```
98+
99+
### Spotify
100+
101+
```svelte
102+
<script>
103+
import { Spotify } from 'sveltekit-embed';
104+
</script>
105+
106+
<!-- Track -->
107+
<Spotify spotifyLink="track/4iV5W9uYEdYUVa79Axb7Rh" />
108+
109+
<!-- Album -->
110+
<Spotify spotifyLink="album/1DFixLWuPkv3KT3TnV35m3" />
111+
112+
<!-- Playlist -->
113+
<Spotify spotifyLink="playlist/37i9dQZF1DXcBWIGoYBM5M" />
114+
```
115+
116+
### CodePen
117+
118+
```svelte
119+
<script>
120+
import { CodePen } from 'sveltekit-embed';
121+
</script>
122+
123+
<CodePen
124+
codePenId="xxGYWQG"
125+
height="400"
126+
defaultTab="result"
127+
theme="dark"
128+
/>
129+
```
130+
131+
### Anchor.fm
132+
133+
```svelte
134+
<script>
135+
import { AnchorFm } from 'sveltekit-embed';
136+
</script>
137+
138+
<AnchorFm
139+
height="165"
140+
episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
141+
/>
142+
```
143+
144+
## ⚡ Performance Features
145+
146+
All embed components (except `Toot` and `Tweet`) are automatically
147+
wrapped with an intersection observer that:
148+
149+
- Only loads the embed when it's about to enter the viewport
150+
- Reduces initial page load time
151+
- Improves Core Web Vitals scores
152+
- Saves bandwidth for users
153+
154+
## 🔧 TypeScript Support
155+
156+
Full TypeScript support is included with proper type definitions for
157+
all components and their props.
158+
159+
```typescript
160+
import type { YouTubeProps, SpotifyProps } from 'sveltekit-embed';
161+
```
162+
163+
## 🤝 Contributing
164+
165+
Contributions are welcome! Please read our
166+
[contributing guidelines](https://github.com/spences10/sveltekit-embed/blob/main/CONTRIBUTING.md)
167+
and
168+
[code of conduct](https://github.com/spences10/sveltekit-embed/blob/main/CODE_OF_CONDUCT.md).
169+
170+
## 📝 License
171+
172+
MIT © [Scott Spence](https://scottspence.com)
173+
174+
## 🙏 Credits
175+
176+
This project was inspired by
177+
[@pauliescanlon](https://github.com/pauliescanlon)'s
178+
[MDX Embed](https://github.com/pauliescanlon/mdx-embed).
179+
180+
## 📋 Links
181+
182+
- [Documentation](https://github.com/spences10/sveltekit-embed#readme)
183+
- [GitHub Repository](https://github.com/spences10/sveltekit-embed)
184+
- [Issues](https://github.com/spences10/sveltekit-embed/issues)
185+
- [Discussions](https://github.com/spences10/sveltekit-embed/discussions)
186+
187+
---
188+
189+
Made with ❤️ for the Svelte community

‎packages/sveltekit-embed/package.json‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,47 @@
66
"email": "yo@scottspence.dev",
77
"url": "https://scottspence.com"
88
},
9-
"description": "This is a collection of embed components I use on a regular basis packaged up for use.",
9+
"description": "A collection of embed components for SvelteKit. Easily embed content from YouTube, Spotify, Vimeo, CodePen, and many more with performant, lazy-loaded components.",
1010
"keywords": [
1111
"svelte",
1212
"sveltekit",
13+
"embed",
14+
"components",
1315
"youtube",
1416
"spotify",
17+
"vimeo",
18+
"codepen",
1519
"deezer",
16-
"vimeo"
20+
"soundcloud",
21+
"twitter",
22+
"mastodon",
23+
"github",
24+
"gist",
25+
"iframe",
26+
"lazy-loading",
27+
"intersection-observer",
28+
"performance",
29+
"responsive",
30+
"typescript",
31+
"ui-components"
1732
],
1833
"license": "MIT",
34+
"homepage": "https://github.com/spences10/sveltekit-embed#readme",
35+
"repository": {
36+
"type": "git",
37+
"url": "https://github.com/spences10/sveltekit-embed.git",
38+
"directory": "packages/sveltekit-embed"
39+
},
40+
"bugs": {
41+
"url": "https://github.com/spences10/sveltekit-embed/issues"
42+
},
43+
"funding": {
44+
"type": "github",
45+
"url": "https://github.com/sponsors/spences10"
46+
},
47+
"engines": {
48+
"node": ">=18.0.0"
49+
},
1950
"scripts": {
2051
"dev": "vite dev",
2152
"build": "vite build && npm run package",

0 commit comments

Comments
 (0)