peasy-seo-embed 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +285 -0
  3. package/dist/embed.esm.js +2856 -0
  4. package/dist/embed.min.js +1880 -0
  5. package/dist/index.d.ts +15 -0
  6. package/package.json +41 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Peasy Tools
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,285 @@
1
+ # peasy-seo-embed
2
+
3
+ [![npm](https://img.shields.io/npm/v/peasy-seo-embed)](https://www.npmjs.com/package/peasy-seo-embed)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
5
+ [![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](https://www.npmjs.com/package/peasy-seo-embed)
6
+ [![Size](https://img.shields.io/badge/gzipped-<8KB-green)](https://bundlephobia.com/package/peasy-seo-embed)
7
+
8
+ Embed **PeasySEO** widgets on any website or blog. SEO analysis tools — meta tags, sitemaps, robots.txt, and audits. Each widget is completely isolated via **Shadow DOM**, requires **zero dependencies**, and supports **3 built-in themes** (light, dark, sepia). The self-executing script finds all `data-peasy-seo` elements on the page and renders interactive widgets automatically, including support for dynamically added elements in single-page applications via MutationObserver.
9
+
10
+ PeasySEO is part of the [Peasy Tools](https://peasytools.com) ecosystem, providing 11 widget types for embedding file format information, tool cards, conversion guides, glossary terms, search boxes, and interactive tools directly into your pages.
11
+
12
+ > **Try the interactive widget builder at [widget.peasyseo.com](https://widget.peasyseo.com)** -- build, preview, and copy embed code for any widget type.
13
+
14
+ <p align="center">
15
+ <img src="demo.gif" alt="peasy-seo-embed demo -- embed peasyseo widgets with Shadow DOM isolation and theme support" width="800">
16
+ </p>
17
+
18
+ ## Table of Contents
19
+
20
+ - [Quick Start](#quick-start)
21
+ - [Widget Types](#widget-types)
22
+ - [Widget Options](#widget-options)
23
+ - [Themes](#themes)
24
+ - [CDN Options](#cdn-options)
25
+ - [Examples](#examples)
26
+ - [Format Info Card](#format-info-card)
27
+ - [Tool Card](#tool-card)
28
+ - [Search Box](#search-box)
29
+ - [Format Badge (Inline)](#format-badge-inline)
30
+ - [Interactive Tool](#interactive-tool)
31
+ - [Glossary Tooltip](#glossary-tooltip)
32
+ - [Compact Widget (Sidebar)](#compact-widget-sidebar)
33
+ - [Dark Theme](#dark-theme)
34
+ - [Technical Details](#technical-details)
35
+ - [Learn More](#learn-more)
36
+ - [Peasy Tools Family](#peasy-tools-family)
37
+ - [License](#license)
38
+
39
+ ## Quick Start
40
+
41
+ ```html
42
+ <!-- 1. Place a widget element where you want it -->
43
+ <div data-peasy-seo="tool"
44
+ data-slug="meta-analyzer"
45
+ data-theme="light">
46
+ </div>
47
+
48
+ <!-- 2. Load the embed script once, anywhere on the page -->
49
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
50
+ ```
51
+
52
+ That's it. The script will find all `data-peasy-seo` elements, fetch data from the PeasySEO API, and render each widget with full Shadow DOM style isolation.
53
+
54
+ ## Widget Types
55
+
56
+ PeasySEO supports 11 widget types -- 11 common types available on all Peasy sites.
57
+
58
+ | Type | Description | Usage |
59
+ |------|-------------|-------|
60
+ | `format` | File format info card with specs, MIME type, and use cases | `<div data-peasy-seo="format" data-slug="..."></div>` |
61
+ | `tool` | Tool card with description and direct launch link | `<div data-peasy-seo="tool" data-slug="..."></div>` |
62
+ | `convert` | Conversion card showing input/output format pair | `<div data-peasy-seo="convert" data-slug="..."></div>` |
63
+ | `compare` | Side-by-side comparison of two formats or tools | `<div data-peasy-seo="compare" data-slug="..."></div>` |
64
+ | `glossary` | Glossary term tooltip with definition on hover | `<div data-peasy-seo="glossary" data-slug="..."></div>` |
65
+ | `gallery` | Grid gallery of available tools for a category | `<div data-peasy-seo="gallery" data-slug="..."></div>` |
66
+ | `guide` | Guide/tutorial card with summary and read-more link | `<div data-peasy-seo="guide" data-slug="..."></div>` |
67
+ | `usecase` | Use-case card showing when and why to use a tool | `<div data-peasy-seo="usecase" data-slug="..."></div>` |
68
+ | `badge` | Inline badge showing format type or tool category | `<div data-peasy-seo="badge" data-slug="..."></div>` |
69
+ | `search` | Search box with autocomplete for tools and formats | `<div data-peasy-seo="search" data-slug="..."></div>` |
70
+ | `interactive` | Embedded interactive tool via iframe | `<div data-peasy-seo="interactive" data-slug="..."></div>` |
71
+
72
+ ## Widget Options
73
+
74
+ All options are set via `data-*` attributes on the widget element.
75
+
76
+ | Attribute | Values | Default | Description |
77
+ |-----------|--------|---------|-------------|
78
+ | `data-peasy-seo` | format, tool, convert, compare, glossary, gallery, guide, usecase, badge, search, interactive | *required* | Widget type to render |
79
+ | `data-slug` | any valid slug | -- | Format or tool slug (format, tool, glossary, guide, usecase widgets) |
80
+ | `data-from` | format slug | -- | Source format for conversion widget |
81
+ | `data-to` | format slug | -- | Target format for conversion widget |
82
+ | `data-a` | slug | -- | First item for comparison widget |
83
+ | `data-b` | slug | -- | Second item for comparison widget |
84
+ | `data-category` | category slug | -- | Filter gallery by category |
85
+ | `data-url` | full URL | -- | Tool URL for interactive (iframe) widget |
86
+ | `data-height` | e.g. "500px" | "400px" | Iframe height for interactive widget |
87
+ | `data-label` | any string | slug | Display label for badge widget |
88
+ | `data-placeholder` | any string | "Search tools..." | Search input placeholder text |
89
+ | `data-theme` | light, dark, sepia, auto | light | Visual theme for the widget |
90
+ | `data-size` | compact, default, large | default | Widget size variant |
91
+ | `data-lang` | en, ko, ja, es, etc. | en | Language for widget labels |
92
+ | `data-track` | true, false | false | Send anonymous usage analytics |
93
+
94
+ ## Themes
95
+
96
+ Three built-in themes are available, plus an auto mode that follows the user's OS preference.
97
+
98
+ ```html
99
+ <!-- Light theme (default) -- clean white background -->
100
+ <div data-peasy-seo="tool" data-slug="meta-analyzer" data-theme="light"></div>
101
+
102
+ <!-- Dark theme -- dark background, light text -->
103
+ <div data-peasy-seo="tool" data-slug="meta-analyzer" data-theme="dark"></div>
104
+
105
+ <!-- Sepia theme -- warm, paper-like appearance -->
106
+ <div data-peasy-seo="tool" data-slug="meta-analyzer" data-theme="sepia"></div>
107
+
108
+ <!-- Auto theme -- follows prefers-color-scheme -->
109
+ <div data-peasy-seo="tool" data-slug="meta-analyzer" data-theme="auto"></div>
110
+ ```
111
+
112
+ Each theme sets CSS custom properties inside the Shadow DOM. The accent color (`#22C55E`) is consistent across all themes, providing brand recognition for PeasySEO.
113
+
114
+ ## CDN Options
115
+
116
+ ### jsDelivr (recommended -- global CDN, auto-updates with npm)
117
+
118
+ ```html
119
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
120
+ ```
121
+
122
+ ### npm (for bundlers like webpack, Vite, Rollup)
123
+
124
+ ```bash
125
+ npm install peasy-seo-embed
126
+ ```
127
+
128
+ ```javascript
129
+ // Just import -- the script self-executes and activates all widgets
130
+ import 'peasy-seo-embed';
131
+ ```
132
+
133
+ ### ESM import (for modern module-based setups)
134
+
135
+ ```html
136
+ <script type="module">
137
+ import 'https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.esm.js';
138
+ </script>
139
+ ```
140
+
141
+ ## Examples
142
+
143
+ ### Format Info Card
144
+
145
+ Display detailed information about a file format including MIME type, extensions, and use cases.
146
+
147
+ ```html
148
+ <!-- PeasySEO format info card with light theme -->
149
+ <div data-peasy-seo="format" data-slug="meta-analyzer" data-theme="light"></div>
150
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
151
+ ```
152
+
153
+ ### Tool Card
154
+
155
+ Show a tool card with its description, category, and a direct link to launch the tool.
156
+
157
+ ```html
158
+ <!-- PeasySEO tool card -->
159
+ <div data-peasy-seo="tool" data-slug="meta-analyzer" data-theme="light"></div>
160
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
161
+ ```
162
+
163
+ ### Search Box
164
+
165
+ Add a search widget with autocomplete for finding tools and formats.
166
+
167
+ ```html
168
+ <!-- Search across PeasySEO tools and formats -->
169
+ <div data-peasy-seo="search"
170
+ data-placeholder="Search PeasySEO tools..."
171
+ data-theme="light">
172
+ </div>
173
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
174
+ ```
175
+
176
+ ### Format Badge (Inline)
177
+
178
+ Display a compact inline badge showing a format type or tool category.
179
+
180
+ ```html
181
+ <p>This file is in <div data-peasy-seo="badge" data-slug="meta-analyzer"></div> format.</p>
182
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
183
+ ```
184
+
185
+ ### Interactive Tool
186
+
187
+ Embed a full interactive tool via iframe with complete isolation.
188
+
189
+ ```html
190
+ <!-- Embed an interactive PeasySEO tool -->
191
+ <div data-peasy-seo="interactive"
192
+ data-url="https://peasyseo.com/embed/meta-analyzer/"
193
+ data-height="500px"
194
+ data-theme="light">
195
+ </div>
196
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
197
+ ```
198
+
199
+ ### Glossary Tooltip
200
+
201
+ Show a glossary term with its definition, rendered as a tooltip-style card.
202
+
203
+ ```html
204
+ <div data-peasy-seo="glossary" data-slug="lossless" data-theme="light"></div>
205
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
206
+ ```
207
+
208
+ ### Compact Widget (Sidebar)
209
+
210
+ Use the compact size for sidebar placements.
211
+
212
+ ```html
213
+ <div data-peasy-seo="format"
214
+ data-slug="meta-analyzer"
215
+ data-theme="light"
216
+ data-size="compact">
217
+ </div>
218
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
219
+ ```
220
+
221
+ ### Dark Theme
222
+
223
+ ```html
224
+ <div data-peasy-seo="format"
225
+ data-slug="meta-analyzer"
226
+ data-theme="dark"
227
+ data-size="large">
228
+ </div>
229
+ <script src="https://cdn.jsdelivr.net/npm/peasy-seo-embed@1/dist/embed.min.js"></script>
230
+ ```
231
+
232
+ ## Technical Details
233
+
234
+ - **Shadow DOM**: Complete CSS isolation -- widget styles never leak into your page, and your page styles never affect the widget
235
+ - **Zero dependencies**: No jQuery, React, Alpine, or any external library required
236
+ - **System fonts**: Uses the system font stack -- no Google Fonts request, instant text rendering
237
+ - **Self-executing**: Include the script tag and add data attributes -- no initialization code needed
238
+ - **MutationObserver**: Automatically detects and renders widgets added dynamically (SPA-compatible)
239
+ - **Lazy loading**: Widgets outside the viewport use IntersectionObserver for deferred initialization
240
+ - **CORS**: PeasySEO API has CORS enabled for all origins
241
+ - **Bundle size**: < 8KB gzipped (IIFE) -- minimal impact on page load
242
+ - **Accessibility**: Semantic HTML, proper ARIA attributes, keyboard navigation support
243
+ - **Powered by**: Each widget includes a subtle "PeasySEO" backlink in the footer
244
+
245
+ ## Learn More
246
+
247
+ Visit [peasyseo.com](https://peasyseo.com) for the full PeasySEO experience.
248
+
249
+ - **All Tools**: [peasyseo.com](https://peasyseo.com)
250
+ - **Formats**: [peasyseo.com/formats/](https://peasyseo.com/formats/)
251
+ - **Glossary**: [peasyseo.com/glossary/](https://peasyseo.com/glossary/)
252
+ - **Guides**: [peasyseo.com/guides/](https://peasyseo.com/guides/)
253
+ - **API Documentation**: [peasyseo.com/developers/](https://peasyseo.com/developers/)
254
+ - **OpenAPI Spec**: [peasyseo.com/api/openapi.json](https://peasyseo.com/api/openapi.json)
255
+ - **Widget Builder**: [widget.peasyseo.com](https://widget.peasyseo.com)
256
+ - **npm Package**: [npmjs.com/package/peasy-seo-embed](https://www.npmjs.com/package/peasy-seo-embed)
257
+
258
+ ## Peasy Tools Family
259
+
260
+ Part of [Peasy Tools](https://peasytools.com) -- simple, fast, free developer tools.
261
+
262
+ | Site | Domain | npm | Focus |
263
+ |------|--------|-----|-------|
264
+ | PeasyPDF | [peasypdf.com](https://peasypdf.com) | [npm](https://www.npmjs.com/package/peasy-pdf-embed) | PDF tools, conversion, compression, merging, and splitting |
265
+ | PeasyImage | [peasyimage.com](https://peasyimage.com) | [npm](https://www.npmjs.com/package/peasy-image-embed) | Image conversion, compression, resizing, and format tools |
266
+ | PeasyVideo | [peasyvideo.com](https://peasyvideo.com) | [npm](https://www.npmjs.com/package/peasy-video-embed) | Video conversion, compression, trimming, and format tools |
267
+ | PeasyAudio | [peasyaudio.com](https://peasyaudio.com) | [npm](https://www.npmjs.com/package/peasy-audio-embed) | Audio conversion, compression, trimming, and format tools |
268
+ | PeasyCSS | [peasycss.com](https://peasycss.com) | [npm](https://www.npmjs.com/package/peasy-css-embed) | CSS tools, minification, formatting, color conversion, and previews |
269
+ | PeasyText | [peasytext.com](https://peasytext.com) | [npm](https://www.npmjs.com/package/peasy-text-embed) | Text tools, word counting, encoding, hashing, and formatting |
270
+ | PeasyTools | [peasytools.com](https://peasytools.com) | [npm](https://www.npmjs.com/package/peasy-tools-embed) | The Peasy Tools hub |
271
+ | PeasyFormats | [peasyformats.com](https://peasyformats.com) | [npm](https://www.npmjs.com/package/peasy-formats-embed) | File format encyclopedia |
272
+ | PeasyDev | [peasydev.com](https://peasydev.com) | [npm](https://www.npmjs.com/package/peasy-dev-embed) | Developer tools |
273
+ | PeasyDesign | [peasydesign.com](https://peasydesign.com) | [npm](https://www.npmjs.com/package/peasy-design-embed) | Design tools |
274
+ | PeasyQR | [peasyqr.com](https://peasyqr.com) | [npm](https://www.npmjs.com/package/peasy-qr-embed) | QR code generation, scanning, and customization tools |
275
+ | **PeasySEO** | [peasyseo.com](https://peasyseo.com) | [npm](https://www.npmjs.com/package/peasy-seo-embed) | SEO analysis tools |
276
+ | PeasySafe | [peasysafe.com](https://peasysafe.com) | [npm](https://www.npmjs.com/package/peasy-safe-embed) | Security tools |
277
+ | PeasySocial | [peasysocial.com](https://peasysocial.com) | [npm](https://www.npmjs.com/package/peasy-social-embed) | Social media tools |
278
+ | PeasyMath | [peasymath.com](https://peasymath.com) | [npm](https://www.npmjs.com/package/peasy-math-embed) | Math tools |
279
+ | PeasyGen | [peasygen.com](https://peasygen.com) | [npm](https://www.npmjs.com/package/peasy-gen-embed) | Generator tools |
280
+
281
+ ## License
282
+
283
+ MIT -- see [LICENSE](./LICENSE).
284
+
285
+ Built by [Peasy Tools](https://peasytools.com).