cryptologo-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.
- package/LICENSE +21 -0
- package/README.md +218 -0
- package/dist/embed.esm.js +253 -0
- package/dist/embed.min.js +253 -0
- package/dist/index.d.ts +5 -0
- package/package.json +35 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 dobestan
|
|
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,218 @@
|
|
|
1
|
+
# cryptologo-embed
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/cryptologo-embed)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.npmjs.com/package/cryptologo-embed)
|
|
6
|
+
|
|
7
|
+
Embeddable widgets for [CryptoLogo](https://crypto-logo.com) — a database of **413 cryptocurrency logos** available in SVG, PNG, WebP, and ICO formats. Add rich crypto coin cards, glossary terms, search, and inline logo badges to any website with a single `<script>` tag.
|
|
8
|
+
|
|
9
|
+
CryptoLogo serves as a centralized brand asset repository for the cryptocurrency ecosystem. Every logo is curated in multiple vector and raster formats, ensuring pixel-perfect rendering at any resolution. The database covers major Layer 1 chains (Bitcoin, Ethereum, Solana, Cardano), DeFi protocols (Uniswap, Aave, Compound), stablecoins (USDT, USDC, DAI), and emerging tokens.
|
|
10
|
+
|
|
11
|
+
> **Try the live widget builder at [widget.crypto-logo.com](https://widget.crypto-logo.com)**
|
|
12
|
+
|
|
13
|
+
## Table of Contents
|
|
14
|
+
|
|
15
|
+
- [Quick Start](#quick-start)
|
|
16
|
+
- [Widget Types](#widget-types)
|
|
17
|
+
- [Coin Card](#coin-card)
|
|
18
|
+
- [Glossary Term](#glossary-term)
|
|
19
|
+
- [Search](#search)
|
|
20
|
+
- [Logo Badge](#logo-badge)
|
|
21
|
+
- [Themes & Styles](#themes--styles)
|
|
22
|
+
- [Sizes](#sizes)
|
|
23
|
+
- [Widget Options](#widget-options)
|
|
24
|
+
- [CDN Options](#cdn-options)
|
|
25
|
+
- [Rich Snippets](#rich-snippets)
|
|
26
|
+
- [About Cryptocurrency Logos](#about-cryptocurrency-logos)
|
|
27
|
+
- [License](#license)
|
|
28
|
+
|
|
29
|
+
## Quick Start
|
|
30
|
+
|
|
31
|
+
Add the script tag to your page. All widgets with `data-cryptologo` attributes render automatically:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!-- Load the CryptoLogo embed widget -->
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/cryptologo-embed@1/dist/embed.min.js"></script>
|
|
36
|
+
|
|
37
|
+
<!-- Coin card widget -->
|
|
38
|
+
<div data-cryptologo="entity" data-slug="bitcoin"></div>
|
|
39
|
+
|
|
40
|
+
<!-- Inline logo badge -->
|
|
41
|
+
The price of <span data-cryptologo="logo-badge" data-slug="ethereum"></span> has risen.
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The script is self-executing, zero-dependency, and uses Shadow DOM for style isolation. Widgets lazy-load via IntersectionObserver and support SPA navigation via MutationObserver.
|
|
45
|
+
|
|
46
|
+
## Widget Types
|
|
47
|
+
|
|
48
|
+
### Coin Card
|
|
49
|
+
|
|
50
|
+
Display a cryptocurrency coin card with logo, symbol badge, category, and description.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!-- Bitcoin coin card with dark theme -->
|
|
54
|
+
<div data-cryptologo="entity"
|
|
55
|
+
data-slug="bitcoin"
|
|
56
|
+
data-theme="dark"
|
|
57
|
+
data-style-variant="modern">
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
API: `GET https://crypto-logo.com/api/v1/coins/{slug}/`
|
|
62
|
+
|
|
63
|
+
Shows: 48px logo image, coin name, ticker symbol badge, category tag, description excerpt, and a link to the full coin page on CryptoLogo.
|
|
64
|
+
|
|
65
|
+
### Glossary Term
|
|
66
|
+
|
|
67
|
+
Display a cryptocurrency glossary definition card.
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<!-- Blockchain glossary term -->
|
|
71
|
+
<div data-cryptologo="glossary"
|
|
72
|
+
data-slug="blockchain"
|
|
73
|
+
data-theme="auto">
|
|
74
|
+
</div>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
API: `GET https://crypto-logo.com/api/v1/glossary/{slug}/`
|
|
78
|
+
|
|
79
|
+
Useful for embedding crypto terminology definitions within educational content, blog posts, or documentation.
|
|
80
|
+
|
|
81
|
+
### Search
|
|
82
|
+
|
|
83
|
+
Embed a search form that links to CryptoLogo search results.
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<div data-cryptologo="search"
|
|
87
|
+
data-placeholder="Find a cryptocurrency logo..."
|
|
88
|
+
data-size="large">
|
|
89
|
+
</div>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
The form submits to `https://crypto-logo.com/search/` with the query parameter.
|
|
93
|
+
|
|
94
|
+
### Logo Badge
|
|
95
|
+
|
|
96
|
+
Inline badge widget for embedding within text. Renders a 16px coin logo and name as an inline element.
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<p>
|
|
100
|
+
The price of <span data-cryptologo="logo-badge" data-slug="bitcoin"></span>
|
|
101
|
+
surpassed $100,000, while <span data-cryptologo="logo-badge" data-slug="ethereum"></span>
|
|
102
|
+
crossed the $5,000 mark.
|
|
103
|
+
</p>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Designed to flow naturally within paragraph text. The badge links to the coin page on CryptoLogo.
|
|
107
|
+
|
|
108
|
+
## Themes & Styles
|
|
109
|
+
|
|
110
|
+
### 4 Themes
|
|
111
|
+
|
|
112
|
+
| Theme | Description |
|
|
113
|
+
|-------|-------------|
|
|
114
|
+
| `light` | White background, dark text |
|
|
115
|
+
| `dark` | Dark background, light text |
|
|
116
|
+
| `sepia` | Warm parchment tones |
|
|
117
|
+
| `auto` | Follows `prefers-color-scheme` with live `matchMedia` listener |
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<div data-cryptologo="entity" data-slug="bitcoin" data-theme="auto"></div>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 2 Styles
|
|
124
|
+
|
|
125
|
+
| Style | Description |
|
|
126
|
+
|-------|-------------|
|
|
127
|
+
| `modern` | Amber accent top bar, subtle shadow, rounded badges |
|
|
128
|
+
| `minimal` | Flat design, no shadow, transparent logo background |
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<div data-cryptologo="entity" data-slug="bitcoin" data-style-variant="minimal"></div>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Sizes
|
|
135
|
+
|
|
136
|
+
| Size | Max Width | Use Case |
|
|
137
|
+
|------|-----------|----------|
|
|
138
|
+
| `compact` | 280px | Sidebars, narrow columns |
|
|
139
|
+
| `default` | 420px | Standard content width |
|
|
140
|
+
| `large` | 720px | Full-width sections |
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<div data-cryptologo="entity" data-slug="bitcoin" data-size="compact"></div>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Widget Options
|
|
147
|
+
|
|
148
|
+
| Attribute | Values | Default | Description |
|
|
149
|
+
|-----------|--------|---------|-------------|
|
|
150
|
+
| `data-cryptologo` | `entity`, `glossary`, `search`, `logo-badge` | — | Widget type (required) |
|
|
151
|
+
| `data-slug` | coin/term slug | — | Content identifier |
|
|
152
|
+
| `data-theme` | `light`, `dark`, `sepia`, `auto` | `auto` | Color theme |
|
|
153
|
+
| `data-size` | `compact`, `default`, `large` | `default` | Widget width |
|
|
154
|
+
| `data-style-variant` | `modern`, `minimal` | `modern` | Visual style |
|
|
155
|
+
| `data-placeholder` | string | — | Search placeholder text |
|
|
156
|
+
| `data-no-snippet` | `true` | — | Disable JSON-LD injection |
|
|
157
|
+
|
|
158
|
+
## CDN Options
|
|
159
|
+
|
|
160
|
+
### jsDelivr (Recommended)
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<script src="https://cdn.jsdelivr.net/npm/cryptologo-embed@1/dist/embed.min.js"></script>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### npm
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
npm install cryptologo-embed
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
```javascript
|
|
173
|
+
import { initEntityWidgets, initSearchWidgets } from 'cryptologo-embed';
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### ESM Import
|
|
177
|
+
|
|
178
|
+
```html
|
|
179
|
+
<script type="module">
|
|
180
|
+
import 'https://cdn.jsdelivr.net/npm/cryptologo-embed@1/dist/embed.esm.js';
|
|
181
|
+
</script>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## Rich Snippets
|
|
185
|
+
|
|
186
|
+
Entity and glossary widgets automatically inject [DefinedTerm](https://schema.org/DefinedTerm) JSON-LD structured data into your page, improving SEO for cryptocurrency-related content. Injection is idempotent (once per slug) and can be disabled per widget:
|
|
187
|
+
|
|
188
|
+
```html
|
|
189
|
+
<div data-cryptologo="entity" data-slug="bitcoin" data-no-snippet="true"></div>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## About Cryptocurrency Logos
|
|
193
|
+
|
|
194
|
+
Cryptocurrency logos are a critical part of the digital asset ecosystem's brand identity. Each token project maintains official brand guidelines specifying exact colors (hex codes, RGB, CMYK), minimum clear space, and acceptable usage contexts.
|
|
195
|
+
|
|
196
|
+
### Logo Formats in CryptoLogo
|
|
197
|
+
|
|
198
|
+
| Format | Extension | Use Case |
|
|
199
|
+
|--------|-----------|----------|
|
|
200
|
+
| **SVG** | `.svg` | Websites, apps — infinite scaling, small file size, CSS-stylable |
|
|
201
|
+
| **PNG** | `.png` | Social media, presentations — transparent background, raster |
|
|
202
|
+
| **WebP** | `.webp` | Modern web — 25-34% smaller than PNG with equal quality |
|
|
203
|
+
| **ICO** | `.ico` | Favicons, Windows apps — multi-resolution icon container |
|
|
204
|
+
|
|
205
|
+
### Why Consistent Logo Assets Matter
|
|
206
|
+
|
|
207
|
+
- **Brand recognition**: Users identify tokens by their logo before reading the name
|
|
208
|
+
- **Cross-platform consistency**: The same Bitcoin orange (#F7931A) across every exchange, wallet, and portfolio tracker
|
|
209
|
+
- **Legal compliance**: Many projects enforce trademark guidelines for logo usage
|
|
210
|
+
- **Accessibility**: High-contrast SVG logos render cleanly on any display density
|
|
211
|
+
|
|
212
|
+
CryptoLogo provides all 413 cryptocurrency logos with consistent sizing, transparent backgrounds, and standardized naming conventions.
|
|
213
|
+
|
|
214
|
+
Learn more: [CryptoLogo Coin Database](https://crypto-logo.com/) | [CryptoLogo API](https://crypto-logo.com/developers/)
|
|
215
|
+
|
|
216
|
+
## License
|
|
217
|
+
|
|
218
|
+
MIT License. See [LICENSE](./LICENSE).
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
var i={site:"cryptologo",name:"CryptoLogo",domain:"crypto-logo.com",accent:"#F59E0B",attribute:"data-cryptologo",apiBase:"https://crypto-logo.com/api/v1/",searchPath:"/search/",entityName:"Coins",entitySlug:"coins"};var $="cryptologo_embed_";function P(e){try{let t=sessionStorage.getItem($+e);if(!t)return null;let r=JSON.parse(t);return Date.now()-r.ts>3e5?(sessionStorage.removeItem($+e),null):r.data}catch{return null}}function j(e,t){try{let r={data:t,ts:Date.now()};sessionStorage.setItem($+e,JSON.stringify(r))}catch{}}async function f(e,t){let r=t,a=P(r);if(a)return a;let n=e.endsWith("/")?e+t:e+"/"+t,s=await fetch(n,{headers:{Accept:"application/json"}});if(!s.ok)throw new Error(`API error: ${s.status} ${s.statusText}`);let p=await s.json();return j(r,p),p}function b(e){return e!=="auto"?e:typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function x(e){if(typeof window>"u"||!window.matchMedia)return;window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",r=>{e(r.matches?"dark":"light")})}function m(e){return`
|
|
2
|
+
:host { display: inline-block; max-width: 100%; }
|
|
3
|
+
|
|
4
|
+
/* \u2500\u2500 Theme variables \u2500\u2500 */
|
|
5
|
+
.cryptologo-widget[data-theme="light"] {
|
|
6
|
+
--bg: #ffffff; --text: #1e293b; --border: #e2e8f0;
|
|
7
|
+
--muted: #64748b; --surface: #f8fafc; --accent: ${e};
|
|
8
|
+
--accent-light: ${e}1a; --link: ${e};
|
|
9
|
+
}
|
|
10
|
+
.cryptologo-widget[data-theme="dark"] {
|
|
11
|
+
--bg: #1a1a1a; --text: #f3f4f6; --border: #374151;
|
|
12
|
+
--muted: #9ca3af; --surface: #111827; --accent: ${e};
|
|
13
|
+
--accent-light: ${e}33; --link: #fbbf24;
|
|
14
|
+
}
|
|
15
|
+
.cryptologo-widget[data-theme="sepia"] {
|
|
16
|
+
--bg: #f5f0e8; --text: #3d3529; --border: #d4c5a9;
|
|
17
|
+
--muted: #8b7d6b; --surface: #ede8df; --accent: ${e};
|
|
18
|
+
--accent-light: ${e}1a; --link: #b45309;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* \u2500\u2500 Size variants \u2500\u2500 */
|
|
22
|
+
.cryptologo-widget[data-size="compact"] { max-width: 280px; font-size: 13px; }
|
|
23
|
+
.cryptologo-widget[data-size="compact"] .cryptologo-body { padding: 12px; }
|
|
24
|
+
.cryptologo-widget[data-size="default"] { max-width: 420px; font-size: 14px; }
|
|
25
|
+
.cryptologo-widget[data-size="default"] .cryptologo-body { padding: 16px; }
|
|
26
|
+
.cryptologo-widget[data-size="large"] { max-width: 720px; font-size: 15px; }
|
|
27
|
+
.cryptologo-widget[data-size="large"] .cryptologo-body { padding: 20px; }
|
|
28
|
+
|
|
29
|
+
/* \u2500\u2500 Base layout \u2500\u2500 */
|
|
30
|
+
.cryptologo-widget {
|
|
31
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
32
|
+
color: var(--text); background: var(--bg);
|
|
33
|
+
border: 1px solid var(--border); border-radius: 8px;
|
|
34
|
+
overflow: hidden; line-height: 1.5; width: 100%;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
}
|
|
37
|
+
.cryptologo-widget * { box-sizing: border-box; }
|
|
38
|
+
|
|
39
|
+
.cryptologo-body { padding: 16px; }
|
|
40
|
+
|
|
41
|
+
/* \u2500\u2500 Common elements \u2500\u2500 */
|
|
42
|
+
.cryptologo-title {
|
|
43
|
+
font-weight: 600; font-size: 1.1em; margin: 0 0 4px;
|
|
44
|
+
color: var(--text); display: flex; align-items: center; gap: 8px;
|
|
45
|
+
}
|
|
46
|
+
.cryptologo-subtitle { color: var(--muted); font-size: 0.85em; margin: 0 0 8px; }
|
|
47
|
+
.cryptologo-desc { color: var(--text); font-size: 0.9em; margin: 8px 0; line-height: 1.6; }
|
|
48
|
+
.cryptologo-badge {
|
|
49
|
+
display: inline-block; padding: 2px 8px; border-radius: 4px;
|
|
50
|
+
font-size: 0.75em; font-weight: 600; letter-spacing: 0.03em;
|
|
51
|
+
background: var(--accent-light); color: var(--accent);
|
|
52
|
+
}
|
|
53
|
+
.cryptologo-link {
|
|
54
|
+
color: var(--link); text-decoration: none; font-size: 0.85em;
|
|
55
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
56
|
+
}
|
|
57
|
+
.cryptologo-link:hover { text-decoration: underline; }
|
|
58
|
+
|
|
59
|
+
/* \u2500\u2500 Powered by \u2500\u2500 */
|
|
60
|
+
.cryptologo-powered {
|
|
61
|
+
padding: 8px 16px; border-top: 1px solid var(--border);
|
|
62
|
+
text-align: right; font-size: 0.7em;
|
|
63
|
+
}
|
|
64
|
+
.cryptologo-powered a {
|
|
65
|
+
color: var(--muted); text-decoration: none;
|
|
66
|
+
}
|
|
67
|
+
.cryptologo-powered a:hover { text-decoration: underline; }
|
|
68
|
+
|
|
69
|
+
/* \u2500\u2500 Loading skeleton \u2500\u2500 */
|
|
70
|
+
.cryptologo-loading { padding: 16px; }
|
|
71
|
+
.cryptologo-skeleton {
|
|
72
|
+
background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
|
|
73
|
+
background-size: 200% 100%;
|
|
74
|
+
animation: cryptologo-shimmer 1.5s infinite;
|
|
75
|
+
border-radius: 4px;
|
|
76
|
+
}
|
|
77
|
+
@keyframes cryptologo-shimmer {
|
|
78
|
+
0% { background-position: -200% 0; }
|
|
79
|
+
100% { background-position: 200% 0; }
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* \u2500\u2500 Error \u2500\u2500 */
|
|
83
|
+
.cryptologo-error {
|
|
84
|
+
padding: 16px; color: #ef4444; font-size: 0.85em; text-align: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* \u2500\u2500 Logo image \u2500\u2500 */
|
|
88
|
+
.cryptologo-logo {
|
|
89
|
+
width: 48px; height: 48px; border-radius: 50%;
|
|
90
|
+
object-fit: contain; flex-shrink: 0;
|
|
91
|
+
background: var(--surface); border: 1px solid var(--border);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* \u2500\u2500 Copy button \u2500\u2500 */
|
|
95
|
+
.cryptologo-copy-btn {
|
|
96
|
+
background: none; border: 1px solid var(--border); border-radius: 4px;
|
|
97
|
+
padding: 4px 6px; cursor: pointer; color: var(--muted);
|
|
98
|
+
display: inline-flex; align-items: center;
|
|
99
|
+
}
|
|
100
|
+
.cryptologo-copy-btn:hover { background: var(--surface); color: var(--text); }
|
|
101
|
+
|
|
102
|
+
/* \u2500\u2500 Header with accent bar \u2500\u2500 */
|
|
103
|
+
.cryptologo-header {
|
|
104
|
+
display: flex; align-items: center; gap: 12px;
|
|
105
|
+
}
|
|
106
|
+
.cryptologo-header-info { flex: 1; min-width: 0; }
|
|
107
|
+
|
|
108
|
+
/* \u2500\u2500 Inline badge (for logo-badge widget) \u2500\u2500 */
|
|
109
|
+
.cryptologo-inline-badge {
|
|
110
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
111
|
+
font-size: inherit; line-height: inherit;
|
|
112
|
+
}
|
|
113
|
+
.cryptologo-inline-badge img {
|
|
114
|
+
width: 16px; height: 16px; border-radius: 50%;
|
|
115
|
+
vertical-align: middle;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* \u2500\u2500 Search \u2500\u2500 */
|
|
119
|
+
.cryptologo-search-form {
|
|
120
|
+
display: flex; gap: 8px;
|
|
121
|
+
}
|
|
122
|
+
.cryptologo-search-input {
|
|
123
|
+
flex: 1; padding: 8px 12px; border: 1px solid var(--border);
|
|
124
|
+
border-radius: 6px; font-size: 0.9em; background: var(--surface);
|
|
125
|
+
color: var(--text); outline: none;
|
|
126
|
+
}
|
|
127
|
+
.cryptologo-search-input:focus { border-color: var(--accent); }
|
|
128
|
+
.cryptologo-search-btn {
|
|
129
|
+
padding: 8px 16px; border: none; border-radius: 6px;
|
|
130
|
+
background: var(--accent); color: #fff; font-weight: 600;
|
|
131
|
+
cursor: pointer; font-size: 0.9em;
|
|
132
|
+
}
|
|
133
|
+
.cryptologo-search-btn:hover { opacity: 0.9; }
|
|
134
|
+
`}function w(e){return`
|
|
135
|
+
/* Modern style: accent top bar + subtle shadow */
|
|
136
|
+
.cryptologo-widget.cryptologo-style-modern {
|
|
137
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
|
|
138
|
+
border-top: 3px solid ${e};
|
|
139
|
+
}
|
|
140
|
+
.cryptologo-style-modern .cryptologo-title {
|
|
141
|
+
font-size: 1.15em;
|
|
142
|
+
}
|
|
143
|
+
.cryptologo-style-modern .cryptologo-logo {
|
|
144
|
+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
145
|
+
}
|
|
146
|
+
.cryptologo-style-modern .cryptologo-badge {
|
|
147
|
+
border-radius: 12px;
|
|
148
|
+
padding: 2px 10px;
|
|
149
|
+
}
|
|
150
|
+
`}function v(){return`
|
|
151
|
+
/* Minimal style: flat, no shadow, thin border */
|
|
152
|
+
.cryptologo-widget.cryptologo-style-minimal {
|
|
153
|
+
box-shadow: none;
|
|
154
|
+
border-radius: 6px;
|
|
155
|
+
}
|
|
156
|
+
.cryptologo-style-minimal .cryptologo-title {
|
|
157
|
+
font-size: 1em;
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
}
|
|
160
|
+
.cryptologo-style-minimal .cryptologo-logo {
|
|
161
|
+
box-shadow: none;
|
|
162
|
+
border: none;
|
|
163
|
+
background: transparent;
|
|
164
|
+
}
|
|
165
|
+
.cryptologo-style-minimal .cryptologo-badge {
|
|
166
|
+
background: transparent;
|
|
167
|
+
border: 1px solid var(--border);
|
|
168
|
+
color: var(--muted);
|
|
169
|
+
}
|
|
170
|
+
.cryptologo-style-minimal .cryptologo-powered {
|
|
171
|
+
border-top: none;
|
|
172
|
+
padding-top: 4px;
|
|
173
|
+
}
|
|
174
|
+
`}function l(e){let t=document.createElement("div");return t.appendChild(document.createTextNode(e)),t.innerHTML}function E(e,t){return e.length<=t?e:e.slice(0,t).trimEnd()+"\u2026"}function u(e,t){let r=e.attachShadow({mode:"open"}),a=document.createElement("style");return a.textContent=t,r.appendChild(a),r}function y(e){let t=document.createElement("div");return t.className=e,t}function k(){return`
|
|
175
|
+
<div class="cryptologo-loading">
|
|
176
|
+
<div class="cryptologo-skeleton" style="width:60%;height:16px;margin-bottom:8px"></div>
|
|
177
|
+
<div class="cryptologo-skeleton" style="width:80%;height:12px;margin-bottom:6px"></div>
|
|
178
|
+
<div class="cryptologo-skeleton" style="width:40%;height:12px"></div>
|
|
179
|
+
</div>
|
|
180
|
+
`}function S(e){return`<div class="cryptologo-error">${l(e)}</div>`}function T(e,t){return`
|
|
181
|
+
<div class="cryptologo-powered">
|
|
182
|
+
<a href="https://${e}/" target="_blank" rel="noopener">
|
|
183
|
+
Powered by ${l(t)}
|
|
184
|
+
</a>
|
|
185
|
+
</div>
|
|
186
|
+
`}function L(){return'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>'}var q="data-cryptologo-snippet",D=new Set;function C(e,t){if(e.getAttribute("data-no-snippet")==="true")return;let r=t.url;if(D.has(r))return;D.add(r);let a={"@context":"https://schema.org","@type":"DefinedTerm",name:t.name,description:t.description,url:t.url,inDefinedTermSet:{"@type":"DefinedTermSet",name:"CryptoLogo Cryptocurrency Database",url:"https://crypto-logo.com/"}},n=document.createElement("script");n.type="application/ld+json",n.setAttribute(q,t.url),n.textContent=JSON.stringify(a),document.head.appendChild(n)}function B(){document.querySelectorAll(`[${i.attribute}="entity"]`).forEach(r=>M(r)),new MutationObserver(r=>{for(let a of r)a.addedNodes.forEach(n=>{n instanceof HTMLElement&&(n.getAttribute(i.attribute)==="entity"&&M(n),n.querySelectorAll?.(`[${i.attribute}="entity"]`).forEach(s=>{M(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function M(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t){let o=u(e,m(i.accent)),d=y("cryptologo-widget");d.setAttribute("data-theme","light"),d.setAttribute("data-size","default"),d.innerHTML=S("Missing data-slug attribute"),o.appendChild(d);return}let r=e.dataset.theme||"auto",a=e.dataset.size||"default",n=e.dataset.styleVariant||"modern",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${n}`);c.setAttribute("data-theme",b(r)),c.setAttribute("data-size",a),c.innerHTML=`<div class="cryptologo-body">${k()}</div>`,p.appendChild(c),r==="auto"&&x(o=>c.setAttribute("data-theme",o)),f(i.apiBase,`coins/${t}/`).then(o=>{let d=o.description?E(o.description,180):"",g=l(o.logo_url||""),h=`https://${i.domain}/coins/${l(o.slug)}/`;c.innerHTML=`
|
|
187
|
+
<div class="cryptologo-body">
|
|
188
|
+
<div class="cryptologo-header">
|
|
189
|
+
${g?`<img class="cryptologo-logo" src="${g}" alt="${l(o.name)} logo" loading="lazy">`:""}
|
|
190
|
+
<div class="cryptologo-header-info">
|
|
191
|
+
<h3 class="cryptologo-title">
|
|
192
|
+
${l(o.name)}
|
|
193
|
+
<span class="cryptologo-badge">${l(o.symbol)}</span>
|
|
194
|
+
</h3>
|
|
195
|
+
${o.category?`<p class="cryptologo-subtitle">${l(o.category)}</p>`:""}
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
${d?`<p class="cryptologo-desc">${l(d)}</p>`:""}
|
|
199
|
+
<a class="cryptologo-link" href="${h}" target="_blank" rel="noopener">
|
|
200
|
+
View on CryptoLogo ${L()}
|
|
201
|
+
</a>
|
|
202
|
+
</div>
|
|
203
|
+
${T(i.domain,i.name)}
|
|
204
|
+
`,C(e,{name:o.name,description:o.description||`${o.name} (${o.symbol}) cryptocurrency logo and brand assets`,url:h})}).catch(o=>{c.innerHTML=`<div class="cryptologo-body">${S(o.message)}</div>`})}function _(){document.querySelectorAll(`[${i.attribute}="glossary"]`).forEach(r=>z(r)),new MutationObserver(r=>{for(let a of r)a.addedNodes.forEach(n=>{n instanceof HTMLElement&&(n.getAttribute(i.attribute)==="glossary"&&z(n),n.querySelectorAll?.(`[${i.attribute}="glossary"]`).forEach(s=>{z(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function z(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t){let o=u(e,m(i.accent)),d=y("cryptologo-widget");d.setAttribute("data-theme","light"),d.setAttribute("data-size","default"),d.innerHTML=S("Missing data-slug attribute"),o.appendChild(d);return}let r=e.dataset.theme||"auto",a=e.dataset.size||"default",n=e.dataset.styleVariant||"modern",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${n}`);c.setAttribute("data-theme",b(r)),c.setAttribute("data-size",a),c.innerHTML=`<div class="cryptologo-body">${k()}</div>`,p.appendChild(c),r==="auto"&&x(o=>c.setAttribute("data-theme",o)),f(i.apiBase,`glossary/${t}/`).then(o=>{let d=E(o.definition||"",250),g=`https://${i.domain}/glossary/${l(o.slug)}/`;c.innerHTML=`
|
|
205
|
+
<div class="cryptologo-body">
|
|
206
|
+
<h3 class="cryptologo-title">
|
|
207
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
|
208
|
+
${l(o.term)}
|
|
209
|
+
</h3>
|
|
210
|
+
${o.category?`<p class="cryptologo-subtitle">${l(o.category)}</p>`:""}
|
|
211
|
+
<p class="cryptologo-desc">${l(d)}</p>
|
|
212
|
+
<a class="cryptologo-link" href="${g}" target="_blank" rel="noopener">
|
|
213
|
+
Full definition ${L()}
|
|
214
|
+
</a>
|
|
215
|
+
</div>
|
|
216
|
+
${T(i.domain,i.name)}
|
|
217
|
+
`,C(e,{name:o.term,description:o.definition||"",url:g})}).catch(o=>{c.innerHTML=`<div class="cryptologo-body">${S(o.message)}</div>`})}function I(){document.querySelectorAll(`[${i.attribute}="search"]`).forEach(r=>H(r)),new MutationObserver(r=>{for(let a of r)a.addedNodes.forEach(n=>{n instanceof HTMLElement&&(n.getAttribute(i.attribute)==="search"&&H(n),n.querySelectorAll?.(`[${i.attribute}="search"]`).forEach(s=>{H(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function H(e){if(e.shadowRoot)return;let t=e.dataset.theme||"auto",r=e.dataset.size||"default",a=e.dataset.styleVariant||"modern",n=e.dataset.placeholder||"Search 413 cryptocurrency logos...",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${a}`);c.setAttribute("data-theme",b(t)),c.setAttribute("data-size",r);let o=`https://${i.domain}${i.searchPath}`;c.innerHTML=`
|
|
218
|
+
<div class="cryptologo-body">
|
|
219
|
+
<h3 class="cryptologo-title">
|
|
220
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
221
|
+
Search CryptoLogo
|
|
222
|
+
</h3>
|
|
223
|
+
<form class="cryptologo-search-form" action="${l(o)}" method="get" target="_blank">
|
|
224
|
+
<input class="cryptologo-search-input" type="text" name="q" placeholder="${l(n)}" autocomplete="off">
|
|
225
|
+
<button class="cryptologo-search-btn" type="submit">Search</button>
|
|
226
|
+
</form>
|
|
227
|
+
</div>
|
|
228
|
+
${T(i.domain,i.name)}
|
|
229
|
+
`,p.appendChild(c),t==="auto"&&x(d=>c.setAttribute("data-theme",d))}var R=`
|
|
230
|
+
:host { display: inline; }
|
|
231
|
+
.cryptologo-inline-badge {
|
|
232
|
+
display: inline-flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: 4px;
|
|
235
|
+
font-size: inherit;
|
|
236
|
+
line-height: inherit;
|
|
237
|
+
text-decoration: none;
|
|
238
|
+
color: inherit;
|
|
239
|
+
}
|
|
240
|
+
.cryptologo-inline-badge:hover { text-decoration: underline; }
|
|
241
|
+
.cryptologo-inline-badge img {
|
|
242
|
+
width: 16px;
|
|
243
|
+
height: 16px;
|
|
244
|
+
border-radius: 50%;
|
|
245
|
+
vertical-align: middle;
|
|
246
|
+
object-fit: contain;
|
|
247
|
+
}
|
|
248
|
+
.cryptologo-inline-badge .cryptologo-badge-symbol {
|
|
249
|
+
font-size: 0.8em;
|
|
250
|
+
opacity: 0.6;
|
|
251
|
+
font-weight: 500;
|
|
252
|
+
}
|
|
253
|
+
`;function W(){document.querySelectorAll(`[${i.attribute}="logo-badge"]`).forEach(r=>A(r)),new MutationObserver(r=>{for(let a of r)a.addedNodes.forEach(n=>{n instanceof HTMLElement&&(n.getAttribute(i.attribute)==="logo-badge"&&A(n),n.querySelectorAll?.(`[${i.attribute}="logo-badge"]`).forEach(s=>{A(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function A(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t)return;let r=e.attachShadow({mode:"open"}),a=document.createElement("style");a.textContent=R,r.appendChild(a);let n=document.createElement("span");n.className="cryptologo-inline-badge",n.textContent=t,r.appendChild(n),f(i.apiBase,`coins/${t}/`).then(s=>{let p=`https://${i.domain}/coins/${l(s.slug)}/`,c=l(s.logo_url||"");n.innerHTML="";let o=document.createElement("a");if(o.className="cryptologo-inline-badge",o.href=p,o.target="_blank",o.rel="noopener",c){let h=document.createElement("img");h.src=c,h.alt=`${s.name} logo`,h.loading="lazy",o.appendChild(h)}let d=document.createElement("span");d.textContent=l(s.name),o.appendChild(d);let g=document.createElement("span");g.className="cryptologo-badge-symbol",g.textContent=` (${l(s.symbol)})`,o.appendChild(g),n.replaceWith(o)}).catch(()=>{n.textContent=t})}function N(){B(),_(),I(),W()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",N):N();export{B as initEntityWidgets,_ as initGlossaryWidgets,W as initLogoBadgeWidgets,I as initSearchWidgets};
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
"use strict";var CryptoLogoEmbed=(()=>{var $=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var O=(e,t)=>{for(var o in t)$(e,o,{get:t[o],enumerable:!0})},G=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of q(t))!R.call(e,r)&&r!==o&&$(e,r,{get:()=>t[r],enumerable:!(a=j(t,r))||a.enumerable});return e};var V=e=>G($({},"__esModule",{value:!0}),e);var X={};O(X,{initEntityWidgets:()=>H,initGlossaryWidgets:()=>D,initLogoBadgeWidgets:()=>W,initSearchWidgets:()=>_});var i={site:"cryptologo",name:"CryptoLogo",domain:"crypto-logo.com",accent:"#F59E0B",attribute:"data-cryptologo",apiBase:"https://crypto-logo.com/api/v1/",searchPath:"/search/",entityName:"Coins",entitySlug:"coins"};var M="cryptologo_embed_";function J(e){try{let t=sessionStorage.getItem(M+e);if(!t)return null;let o=JSON.parse(t);return Date.now()-o.ts>3e5?(sessionStorage.removeItem(M+e),null):o.data}catch{return null}}function U(e,t){try{let o={data:t,ts:Date.now()};sessionStorage.setItem(M+e,JSON.stringify(o))}catch{}}async function f(e,t){let o=t,a=J(o);if(a)return a;let r=e.endsWith("/")?e+t:e+"/"+t,s=await fetch(r,{headers:{Accept:"application/json"}});if(!s.ok)throw new Error(`API error: ${s.status} ${s.statusText}`);let p=await s.json();return U(o,p),p}function b(e){return e!=="auto"?e:typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function x(e){if(typeof window>"u"||!window.matchMedia)return;window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",o=>{e(o.matches?"dark":"light")})}function m(e){return`
|
|
2
|
+
:host { display: inline-block; max-width: 100%; }
|
|
3
|
+
|
|
4
|
+
/* \u2500\u2500 Theme variables \u2500\u2500 */
|
|
5
|
+
.cryptologo-widget[data-theme="light"] {
|
|
6
|
+
--bg: #ffffff; --text: #1e293b; --border: #e2e8f0;
|
|
7
|
+
--muted: #64748b; --surface: #f8fafc; --accent: ${e};
|
|
8
|
+
--accent-light: ${e}1a; --link: ${e};
|
|
9
|
+
}
|
|
10
|
+
.cryptologo-widget[data-theme="dark"] {
|
|
11
|
+
--bg: #1a1a1a; --text: #f3f4f6; --border: #374151;
|
|
12
|
+
--muted: #9ca3af; --surface: #111827; --accent: ${e};
|
|
13
|
+
--accent-light: ${e}33; --link: #fbbf24;
|
|
14
|
+
}
|
|
15
|
+
.cryptologo-widget[data-theme="sepia"] {
|
|
16
|
+
--bg: #f5f0e8; --text: #3d3529; --border: #d4c5a9;
|
|
17
|
+
--muted: #8b7d6b; --surface: #ede8df; --accent: ${e};
|
|
18
|
+
--accent-light: ${e}1a; --link: #b45309;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* \u2500\u2500 Size variants \u2500\u2500 */
|
|
22
|
+
.cryptologo-widget[data-size="compact"] { max-width: 280px; font-size: 13px; }
|
|
23
|
+
.cryptologo-widget[data-size="compact"] .cryptologo-body { padding: 12px; }
|
|
24
|
+
.cryptologo-widget[data-size="default"] { max-width: 420px; font-size: 14px; }
|
|
25
|
+
.cryptologo-widget[data-size="default"] .cryptologo-body { padding: 16px; }
|
|
26
|
+
.cryptologo-widget[data-size="large"] { max-width: 720px; font-size: 15px; }
|
|
27
|
+
.cryptologo-widget[data-size="large"] .cryptologo-body { padding: 20px; }
|
|
28
|
+
|
|
29
|
+
/* \u2500\u2500 Base layout \u2500\u2500 */
|
|
30
|
+
.cryptologo-widget {
|
|
31
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
32
|
+
color: var(--text); background: var(--bg);
|
|
33
|
+
border: 1px solid var(--border); border-radius: 8px;
|
|
34
|
+
overflow: hidden; line-height: 1.5; width: 100%;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
}
|
|
37
|
+
.cryptologo-widget * { box-sizing: border-box; }
|
|
38
|
+
|
|
39
|
+
.cryptologo-body { padding: 16px; }
|
|
40
|
+
|
|
41
|
+
/* \u2500\u2500 Common elements \u2500\u2500 */
|
|
42
|
+
.cryptologo-title {
|
|
43
|
+
font-weight: 600; font-size: 1.1em; margin: 0 0 4px;
|
|
44
|
+
color: var(--text); display: flex; align-items: center; gap: 8px;
|
|
45
|
+
}
|
|
46
|
+
.cryptologo-subtitle { color: var(--muted); font-size: 0.85em; margin: 0 0 8px; }
|
|
47
|
+
.cryptologo-desc { color: var(--text); font-size: 0.9em; margin: 8px 0; line-height: 1.6; }
|
|
48
|
+
.cryptologo-badge {
|
|
49
|
+
display: inline-block; padding: 2px 8px; border-radius: 4px;
|
|
50
|
+
font-size: 0.75em; font-weight: 600; letter-spacing: 0.03em;
|
|
51
|
+
background: var(--accent-light); color: var(--accent);
|
|
52
|
+
}
|
|
53
|
+
.cryptologo-link {
|
|
54
|
+
color: var(--link); text-decoration: none; font-size: 0.85em;
|
|
55
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
56
|
+
}
|
|
57
|
+
.cryptologo-link:hover { text-decoration: underline; }
|
|
58
|
+
|
|
59
|
+
/* \u2500\u2500 Powered by \u2500\u2500 */
|
|
60
|
+
.cryptologo-powered {
|
|
61
|
+
padding: 8px 16px; border-top: 1px solid var(--border);
|
|
62
|
+
text-align: right; font-size: 0.7em;
|
|
63
|
+
}
|
|
64
|
+
.cryptologo-powered a {
|
|
65
|
+
color: var(--muted); text-decoration: none;
|
|
66
|
+
}
|
|
67
|
+
.cryptologo-powered a:hover { text-decoration: underline; }
|
|
68
|
+
|
|
69
|
+
/* \u2500\u2500 Loading skeleton \u2500\u2500 */
|
|
70
|
+
.cryptologo-loading { padding: 16px; }
|
|
71
|
+
.cryptologo-skeleton {
|
|
72
|
+
background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
|
|
73
|
+
background-size: 200% 100%;
|
|
74
|
+
animation: cryptologo-shimmer 1.5s infinite;
|
|
75
|
+
border-radius: 4px;
|
|
76
|
+
}
|
|
77
|
+
@keyframes cryptologo-shimmer {
|
|
78
|
+
0% { background-position: -200% 0; }
|
|
79
|
+
100% { background-position: 200% 0; }
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* \u2500\u2500 Error \u2500\u2500 */
|
|
83
|
+
.cryptologo-error {
|
|
84
|
+
padding: 16px; color: #ef4444; font-size: 0.85em; text-align: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* \u2500\u2500 Logo image \u2500\u2500 */
|
|
88
|
+
.cryptologo-logo {
|
|
89
|
+
width: 48px; height: 48px; border-radius: 50%;
|
|
90
|
+
object-fit: contain; flex-shrink: 0;
|
|
91
|
+
background: var(--surface); border: 1px solid var(--border);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* \u2500\u2500 Copy button \u2500\u2500 */
|
|
95
|
+
.cryptologo-copy-btn {
|
|
96
|
+
background: none; border: 1px solid var(--border); border-radius: 4px;
|
|
97
|
+
padding: 4px 6px; cursor: pointer; color: var(--muted);
|
|
98
|
+
display: inline-flex; align-items: center;
|
|
99
|
+
}
|
|
100
|
+
.cryptologo-copy-btn:hover { background: var(--surface); color: var(--text); }
|
|
101
|
+
|
|
102
|
+
/* \u2500\u2500 Header with accent bar \u2500\u2500 */
|
|
103
|
+
.cryptologo-header {
|
|
104
|
+
display: flex; align-items: center; gap: 12px;
|
|
105
|
+
}
|
|
106
|
+
.cryptologo-header-info { flex: 1; min-width: 0; }
|
|
107
|
+
|
|
108
|
+
/* \u2500\u2500 Inline badge (for logo-badge widget) \u2500\u2500 */
|
|
109
|
+
.cryptologo-inline-badge {
|
|
110
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
111
|
+
font-size: inherit; line-height: inherit;
|
|
112
|
+
}
|
|
113
|
+
.cryptologo-inline-badge img {
|
|
114
|
+
width: 16px; height: 16px; border-radius: 50%;
|
|
115
|
+
vertical-align: middle;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* \u2500\u2500 Search \u2500\u2500 */
|
|
119
|
+
.cryptologo-search-form {
|
|
120
|
+
display: flex; gap: 8px;
|
|
121
|
+
}
|
|
122
|
+
.cryptologo-search-input {
|
|
123
|
+
flex: 1; padding: 8px 12px; border: 1px solid var(--border);
|
|
124
|
+
border-radius: 6px; font-size: 0.9em; background: var(--surface);
|
|
125
|
+
color: var(--text); outline: none;
|
|
126
|
+
}
|
|
127
|
+
.cryptologo-search-input:focus { border-color: var(--accent); }
|
|
128
|
+
.cryptologo-search-btn {
|
|
129
|
+
padding: 8px 16px; border: none; border-radius: 6px;
|
|
130
|
+
background: var(--accent); color: #fff; font-weight: 600;
|
|
131
|
+
cursor: pointer; font-size: 0.9em;
|
|
132
|
+
}
|
|
133
|
+
.cryptologo-search-btn:hover { opacity: 0.9; }
|
|
134
|
+
`}function w(e){return`
|
|
135
|
+
/* Modern style: accent top bar + subtle shadow */
|
|
136
|
+
.cryptologo-widget.cryptologo-style-modern {
|
|
137
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
|
|
138
|
+
border-top: 3px solid ${e};
|
|
139
|
+
}
|
|
140
|
+
.cryptologo-style-modern .cryptologo-title {
|
|
141
|
+
font-size: 1.15em;
|
|
142
|
+
}
|
|
143
|
+
.cryptologo-style-modern .cryptologo-logo {
|
|
144
|
+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
145
|
+
}
|
|
146
|
+
.cryptologo-style-modern .cryptologo-badge {
|
|
147
|
+
border-radius: 12px;
|
|
148
|
+
padding: 2px 10px;
|
|
149
|
+
}
|
|
150
|
+
`}function v(){return`
|
|
151
|
+
/* Minimal style: flat, no shadow, thin border */
|
|
152
|
+
.cryptologo-widget.cryptologo-style-minimal {
|
|
153
|
+
box-shadow: none;
|
|
154
|
+
border-radius: 6px;
|
|
155
|
+
}
|
|
156
|
+
.cryptologo-style-minimal .cryptologo-title {
|
|
157
|
+
font-size: 1em;
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
}
|
|
160
|
+
.cryptologo-style-minimal .cryptologo-logo {
|
|
161
|
+
box-shadow: none;
|
|
162
|
+
border: none;
|
|
163
|
+
background: transparent;
|
|
164
|
+
}
|
|
165
|
+
.cryptologo-style-minimal .cryptologo-badge {
|
|
166
|
+
background: transparent;
|
|
167
|
+
border: 1px solid var(--border);
|
|
168
|
+
color: var(--muted);
|
|
169
|
+
}
|
|
170
|
+
.cryptologo-style-minimal .cryptologo-powered {
|
|
171
|
+
border-top: none;
|
|
172
|
+
padding-top: 4px;
|
|
173
|
+
}
|
|
174
|
+
`}function l(e){let t=document.createElement("div");return t.appendChild(document.createTextNode(e)),t.innerHTML}function E(e,t){return e.length<=t?e:e.slice(0,t).trimEnd()+"\u2026"}function u(e,t){let o=e.attachShadow({mode:"open"}),a=document.createElement("style");return a.textContent=t,o.appendChild(a),o}function y(e){let t=document.createElement("div");return t.className=e,t}function k(){return`
|
|
175
|
+
<div class="cryptologo-loading">
|
|
176
|
+
<div class="cryptologo-skeleton" style="width:60%;height:16px;margin-bottom:8px"></div>
|
|
177
|
+
<div class="cryptologo-skeleton" style="width:80%;height:12px;margin-bottom:6px"></div>
|
|
178
|
+
<div class="cryptologo-skeleton" style="width:40%;height:12px"></div>
|
|
179
|
+
</div>
|
|
180
|
+
`}function S(e){return`<div class="cryptologo-error">${l(e)}</div>`}function T(e,t){return`
|
|
181
|
+
<div class="cryptologo-powered">
|
|
182
|
+
<a href="https://${e}/" target="_blank" rel="noopener">
|
|
183
|
+
Powered by ${l(t)}
|
|
184
|
+
</a>
|
|
185
|
+
</div>
|
|
186
|
+
`}function L(){return'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>'}var F="data-cryptologo-snippet",N=new Set;function C(e,t){if(e.getAttribute("data-no-snippet")==="true")return;let o=t.url;if(N.has(o))return;N.add(o);let a={"@context":"https://schema.org","@type":"DefinedTerm",name:t.name,description:t.description,url:t.url,inDefinedTermSet:{"@type":"DefinedTermSet",name:"CryptoLogo Cryptocurrency Database",url:"https://crypto-logo.com/"}},r=document.createElement("script");r.type="application/ld+json",r.setAttribute(F,t.url),r.textContent=JSON.stringify(a),document.head.appendChild(r)}function H(){document.querySelectorAll(`[${i.attribute}="entity"]`).forEach(o=>z(o)),new MutationObserver(o=>{for(let a of o)a.addedNodes.forEach(r=>{r instanceof HTMLElement&&(r.getAttribute(i.attribute)==="entity"&&z(r),r.querySelectorAll?.(`[${i.attribute}="entity"]`).forEach(s=>{z(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function z(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t){let n=u(e,m(i.accent)),d=y("cryptologo-widget");d.setAttribute("data-theme","light"),d.setAttribute("data-size","default"),d.innerHTML=S("Missing data-slug attribute"),n.appendChild(d);return}let o=e.dataset.theme||"auto",a=e.dataset.size||"default",r=e.dataset.styleVariant||"modern",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${r}`);c.setAttribute("data-theme",b(o)),c.setAttribute("data-size",a),c.innerHTML=`<div class="cryptologo-body">${k()}</div>`,p.appendChild(c),o==="auto"&&x(n=>c.setAttribute("data-theme",n)),f(i.apiBase,`coins/${t}/`).then(n=>{let d=n.description?E(n.description,180):"",g=l(n.logo_url||""),h=`https://${i.domain}/coins/${l(n.slug)}/`;c.innerHTML=`
|
|
187
|
+
<div class="cryptologo-body">
|
|
188
|
+
<div class="cryptologo-header">
|
|
189
|
+
${g?`<img class="cryptologo-logo" src="${g}" alt="${l(n.name)} logo" loading="lazy">`:""}
|
|
190
|
+
<div class="cryptologo-header-info">
|
|
191
|
+
<h3 class="cryptologo-title">
|
|
192
|
+
${l(n.name)}
|
|
193
|
+
<span class="cryptologo-badge">${l(n.symbol)}</span>
|
|
194
|
+
</h3>
|
|
195
|
+
${n.category?`<p class="cryptologo-subtitle">${l(n.category)}</p>`:""}
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
${d?`<p class="cryptologo-desc">${l(d)}</p>`:""}
|
|
199
|
+
<a class="cryptologo-link" href="${h}" target="_blank" rel="noopener">
|
|
200
|
+
View on CryptoLogo ${L()}
|
|
201
|
+
</a>
|
|
202
|
+
</div>
|
|
203
|
+
${T(i.domain,i.name)}
|
|
204
|
+
`,C(e,{name:n.name,description:n.description||`${n.name} (${n.symbol}) cryptocurrency logo and brand assets`,url:h})}).catch(n=>{c.innerHTML=`<div class="cryptologo-body">${S(n.message)}</div>`})}function D(){document.querySelectorAll(`[${i.attribute}="glossary"]`).forEach(o=>A(o)),new MutationObserver(o=>{for(let a of o)a.addedNodes.forEach(r=>{r instanceof HTMLElement&&(r.getAttribute(i.attribute)==="glossary"&&A(r),r.querySelectorAll?.(`[${i.attribute}="glossary"]`).forEach(s=>{A(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function A(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t){let n=u(e,m(i.accent)),d=y("cryptologo-widget");d.setAttribute("data-theme","light"),d.setAttribute("data-size","default"),d.innerHTML=S("Missing data-slug attribute"),n.appendChild(d);return}let o=e.dataset.theme||"auto",a=e.dataset.size||"default",r=e.dataset.styleVariant||"modern",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${r}`);c.setAttribute("data-theme",b(o)),c.setAttribute("data-size",a),c.innerHTML=`<div class="cryptologo-body">${k()}</div>`,p.appendChild(c),o==="auto"&&x(n=>c.setAttribute("data-theme",n)),f(i.apiBase,`glossary/${t}/`).then(n=>{let d=E(n.definition||"",250),g=`https://${i.domain}/glossary/${l(n.slug)}/`;c.innerHTML=`
|
|
205
|
+
<div class="cryptologo-body">
|
|
206
|
+
<h3 class="cryptologo-title">
|
|
207
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
|
208
|
+
${l(n.term)}
|
|
209
|
+
</h3>
|
|
210
|
+
${n.category?`<p class="cryptologo-subtitle">${l(n.category)}</p>`:""}
|
|
211
|
+
<p class="cryptologo-desc">${l(d)}</p>
|
|
212
|
+
<a class="cryptologo-link" href="${g}" target="_blank" rel="noopener">
|
|
213
|
+
Full definition ${L()}
|
|
214
|
+
</a>
|
|
215
|
+
</div>
|
|
216
|
+
${T(i.domain,i.name)}
|
|
217
|
+
`,C(e,{name:n.term,description:n.definition||"",url:g})}).catch(n=>{c.innerHTML=`<div class="cryptologo-body">${S(n.message)}</div>`})}function _(){document.querySelectorAll(`[${i.attribute}="search"]`).forEach(o=>B(o)),new MutationObserver(o=>{for(let a of o)a.addedNodes.forEach(r=>{r instanceof HTMLElement&&(r.getAttribute(i.attribute)==="search"&&B(r),r.querySelectorAll?.(`[${i.attribute}="search"]`).forEach(s=>{B(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function B(e){if(e.shadowRoot)return;let t=e.dataset.theme||"auto",o=e.dataset.size||"default",a=e.dataset.styleVariant||"modern",r=e.dataset.placeholder||"Search 413 cryptocurrency logos...",s=m(i.accent)+w(i.accent)+v(),p=u(e,s),c=y(`cryptologo-widget cryptologo-style-${a}`);c.setAttribute("data-theme",b(t)),c.setAttribute("data-size",o);let n=`https://${i.domain}${i.searchPath}`;c.innerHTML=`
|
|
218
|
+
<div class="cryptologo-body">
|
|
219
|
+
<h3 class="cryptologo-title">
|
|
220
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
221
|
+
Search CryptoLogo
|
|
222
|
+
</h3>
|
|
223
|
+
<form class="cryptologo-search-form" action="${l(n)}" method="get" target="_blank">
|
|
224
|
+
<input class="cryptologo-search-input" type="text" name="q" placeholder="${l(r)}" autocomplete="off">
|
|
225
|
+
<button class="cryptologo-search-btn" type="submit">Search</button>
|
|
226
|
+
</form>
|
|
227
|
+
</div>
|
|
228
|
+
${T(i.domain,i.name)}
|
|
229
|
+
`,p.appendChild(c),t==="auto"&&x(d=>c.setAttribute("data-theme",d))}var K=`
|
|
230
|
+
:host { display: inline; }
|
|
231
|
+
.cryptologo-inline-badge {
|
|
232
|
+
display: inline-flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: 4px;
|
|
235
|
+
font-size: inherit;
|
|
236
|
+
line-height: inherit;
|
|
237
|
+
text-decoration: none;
|
|
238
|
+
color: inherit;
|
|
239
|
+
}
|
|
240
|
+
.cryptologo-inline-badge:hover { text-decoration: underline; }
|
|
241
|
+
.cryptologo-inline-badge img {
|
|
242
|
+
width: 16px;
|
|
243
|
+
height: 16px;
|
|
244
|
+
border-radius: 50%;
|
|
245
|
+
vertical-align: middle;
|
|
246
|
+
object-fit: contain;
|
|
247
|
+
}
|
|
248
|
+
.cryptologo-inline-badge .cryptologo-badge-symbol {
|
|
249
|
+
font-size: 0.8em;
|
|
250
|
+
opacity: 0.6;
|
|
251
|
+
font-weight: 500;
|
|
252
|
+
}
|
|
253
|
+
`;function W(){document.querySelectorAll(`[${i.attribute}="logo-badge"]`).forEach(o=>I(o)),new MutationObserver(o=>{for(let a of o)a.addedNodes.forEach(r=>{r instanceof HTMLElement&&(r.getAttribute(i.attribute)==="logo-badge"&&I(r),r.querySelectorAll?.(`[${i.attribute}="logo-badge"]`).forEach(s=>{I(s)}))})}).observe(document.body,{childList:!0,subtree:!0})}function I(e){if(e.shadowRoot)return;let t=e.dataset.slug;if(!t)return;let o=e.attachShadow({mode:"open"}),a=document.createElement("style");a.textContent=K,o.appendChild(a);let r=document.createElement("span");r.className="cryptologo-inline-badge",r.textContent=t,o.appendChild(r),f(i.apiBase,`coins/${t}/`).then(s=>{let p=`https://${i.domain}/coins/${l(s.slug)}/`,c=l(s.logo_url||"");r.innerHTML="";let n=document.createElement("a");if(n.className="cryptologo-inline-badge",n.href=p,n.target="_blank",n.rel="noopener",c){let h=document.createElement("img");h.src=c,h.alt=`${s.name} logo`,h.loading="lazy",n.appendChild(h)}let d=document.createElement("span");d.textContent=l(s.name),n.appendChild(d);let g=document.createElement("span");g.className="cryptologo-badge-symbol",g.textContent=` (${l(s.symbol)})`,n.appendChild(g),r.replaceWith(n)}).catch(()=>{r.textContent=t})}function P(){H(),D(),_(),W()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",P):P();return V(X);})();
|
package/dist/index.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cryptologo-embed",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Embeddable widgets for CryptoLogo — 413 cryptocurrency logos in SVG, PNG, WebP, ICO",
|
|
5
|
+
"main": "dist/embed.min.js",
|
|
6
|
+
"module": "dist/embed.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/",
|
|
10
|
+
"README.md",
|
|
11
|
+
"LICENSE"
|
|
12
|
+
],
|
|
13
|
+
"keywords": [
|
|
14
|
+
"crypto",
|
|
15
|
+
"cryptocurrency",
|
|
16
|
+
"logo",
|
|
17
|
+
"bitcoin",
|
|
18
|
+
"ethereum",
|
|
19
|
+
"svg",
|
|
20
|
+
"embed",
|
|
21
|
+
"widget",
|
|
22
|
+
"brand",
|
|
23
|
+
"crypto-logo"
|
|
24
|
+
],
|
|
25
|
+
"author": "dobestan",
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "https://github.com/dobestan/cryptologo-embed.git"
|
|
30
|
+
},
|
|
31
|
+
"homepage": "https://widget.crypto-logo.com",
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/dobestan/cryptologo-embed/issues"
|
|
34
|
+
}
|
|
35
|
+
}
|