Skip to content

Commit 1d6fdf9

Browse files
spences10spences10
authored
Merge branch 'main' into renovate/svead-0.x
2 parents 9610b52 + 38e2892 commit 1d6fdf9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+7726
-2154
lines changed

‎.changeset/config.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
"access": "public",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": []
10+
"ignore": [
11+
"web"
12+
]
1113
}

‎.github/workflows/unit-test.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ jobs:
2828
version: '^8.0.0'
2929
- name: Install dependencies
3030
run: pnpm recursive install
31+
- name: Install Playwright browsers
32+
run: pnpm exec playwright install chromium --with-deps
33+
working-directory: packages/sveltekit-embed
3134
- name: Run unit tests
3235
run: pnpm run test:ci
3336
working-directory: packages/sveltekit-embed

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@
2525
},
2626
"devDependencies": {
2727
"@changesets/cli": "^2.27.12",
28-
"cspell": "^8.17.3"
28+
"cspell": "^8.17.3",
29+
"prettier": "^3.5.3",
30+
"prettier-plugin-svelte": "^3.4.0",
31+
"prettier-plugin-tailwindcss": "^0.6.11"
32+
},
33+
"pnpm": {
34+
"onlyBuiltDependencies": [
35+
"esbuild"
36+
]
2937
}
3038
}

‎packages/sveltekit-embed/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ vite.config.js.timestamp-*
1111
vite.config.ts.timestamp-*
1212
.vercel
1313
.env*.local
14+
/coverage

‎packages/sveltekit-embed/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# sveltekit-embed
22

3+
## 0.0.21
4+
5+
### Patch Changes
6+
7+
- update testing approach on components
8+
39
## 0.0.20
410

511
### Patch Changes

‎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/tests/test.ts‎ renamed to ‎packages/sveltekit-embed/e2e/test.ts‎

File renamed without changes.

‎packages/sveltekit-embed/package.json‎

Lines changed: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,52 @@
11
{
22
"name": "sveltekit-embed",
3-
"version": "0.0.20",
3+
"version": "0.0.21",
44
"author": {
55
"name": "Scott Spence",
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",
@@ -27,6 +58,7 @@
2758
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
2859
"lint": "prettier --check . && eslint .",
2960
"format": "prettier --write .",
61+
"coverage": "pnpm exec vitest run --coverage",
3062
"test:integration": "playwright test",
3163
"test:unit": "vitest",
3264
"test:ci": "vitest run"
@@ -46,29 +78,32 @@
4678
"svelte": "^4.0.0 || ^5.0.0"
4779
},
4880
"devDependencies": {
81+
"@eslint/compat": "^1.2.9",
82+
"@eslint/js": "^9.27.0",
4983
"@playwright/test": "^1.52.0",
50-
"@sveltejs/adapter-auto": "^4.0.0",
51-
"@sveltejs/kit": "^2.20.7",
84+
"@sveltejs/adapter-auto": "^6.0.1",
85+
"@sveltejs/kit": "^2.21.1",
5286
"@sveltejs/package": "^2.3.11",
5387
"@sveltejs/vite-plugin-svelte": "^5.0.3",
54-
"@testing-library/svelte": "^5.2.7",
55-
"@types/eslint": "^9.6.1",
56-
"@typescript-eslint/eslint-plugin": "^8.31.0",
57-
"@typescript-eslint/parser": "^8.31.0",
58-
"eslint": "^9.25.1",
59-
"eslint-config-prettier": "^10.1.2",
60-
"eslint-plugin-svelte": "^2.46.1",
88+
"@vitest/browser": "^3.1.4",
89+
"@vitest/coverage-v8": "3.1.4",
90+
"eslint": "^9.27.0",
91+
"eslint-config-prettier": "^10.1.5",
92+
"eslint-plugin-svelte": "^3.9.0",
6193
"fathom-client": "^3.7.2",
94+
"globals": "^16.1.0",
6295
"jsdom": "^26.1.0",
6396
"prettier": "^3.5.3",
64-
"prettier-plugin-svelte": "^3.3.3",
65-
"publint": "^0.3.2",
66-
"svelte": "5.28.2",
67-
"svelte-check": "^4.1.6",
68-
"tslib": "^2.8.1",
97+
"prettier-plugin-svelte": "^3.4.0",
98+
"prettier-plugin-tailwindcss": "^0.6.11",
99+
"publint": "^0.3.12",
100+
"svelte": "5.33.1",
101+
"svelte-check": "^4.2.1",
69102
"typescript": "^5.8.3",
70-
"vite": "^6.3.3",
71-
"vitest": "^3.1.2"
103+
"typescript-eslint": "^8.32.1",
104+
"vite": "^6.3.5",
105+
"vitest": "^3.1.4",
106+
"vitest-browser-svelte": "^0.1.0"
72107
},
73108
"svelte": "./dist/index.js",
74109
"types": "./dist/index.d.ts",

‎packages/sveltekit-embed/playwright.config.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import type { PlaywrightTestConfig } from '@playwright/test';
1+
import { defineConfig } from '@playwright/test';
22

3-
const config: PlaywrightTestConfig = {
3+
export default defineConfig({
44
webServer: {
5-
command: 'npm run build && npm run preview',
5+
command: 'npm run build && PORT=4173 node build/index.js',
66
port: 4173,
77
},
8-
testDir: 'tests',
9-
testMatch: /(.+\.)?(test|spec)\.[jt]s/,
10-
};
11-
12-
export default config;
8+
testDir: 'e2e',
9+
});

‎packages/sveltekit-embed/src/index.test.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)