This repository was archived by the owner on Jan 1, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
274 lines (248 loc) · 9.29 KB
/
index.html
File metadata and controls
274 lines (248 loc) · 9.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Badge service for Deno modules">
<meta name="keywords" content="deno, badge, shield, deno shield, deno badge, shield.deno.dev">
<meta name="theme-color" content="#000">
<meta name="author" content="Jeff Yang">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://shield.deno.dev">
<meta name="twitter:title" value="Deno Shield">
<meta name="twitter:description" value="Badge service for Deno modules">
<meta name="twitter:image" content="https://opengraph.githubassets.com/67e9da030bbfe490a77721640354b44ba666b0ae90857541ee4d2a81b7047f2b/ydcjeff/shield.deno.dev">
<meta property="og:title" content="Deno Shield">
<meta property="og:description" content="Badge service for Deno modules">
<meta property="og:image" content="https://opengraph.githubassets.com/67e9da030bbfe490a77721640354b44ba666b0ae90857541ee4d2a81b7047f2b/ydcjeff/shield.deno.dev">
<meta property="og:site" content="https://shield.deno.dev">
<title>Deno Shield</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="uno.css" type="text/css" />
<link rel="icon" href="https://deno.land/logo.svg" type="image/svg+xml">
<style>
body {
animation: tailwind 30s linear infinite;
}
.font-code {
font-family: "JetBrains Mono", monospace;
}
a {
color: #222;
font-weight: 600;
}
a:hover {
text-decoration: none;
}
@keyframes tailwind {
0% {
background-color: rgb(254 242 242);
}
6% {
background-color: rgb(255 247 237);
}
12% {
background-color: rgb(255 251 235);
}
18% {
background-color: rgb(254 252 232);
}
24% {
background-color: rgb(247 254 231);
}
30% {
background-color: rgb(240 253 244);
}
36% {
background-color: rgb(236 253 245);
}
42% {
background-color: rgb(240 253 250);
}
48% {
background-color: rgb(236 254 255);
}
54% {
background-color: rgb(240 249 255);
}
60% {
background-color: rgb(239 246 255);
}
66% {
background-color: rgb(238 242 255);
}
72% {
background-color: rgb(245 243 255);
}
78% {
background-color: rgb(245 243 255);
}
84% {
background-color: rgb(253 244 255);
}
90% {
background-color: rgb(253 242 248);
}
100% {
background-color: rgb(255 241 242);
}
}
</style>
</head>
<body class="font-sans mx-auto my-0 text-base max-w-200 px-6">
<header class="flex pt-8 justify-between">
<div class="font-code text-lg">shield.deno.dev</div>
<a
href="https://github.com/ydcjeff/shield.deno.dev"
target="_blank"
rel="shield.deno.dev"
>
GitHub
</a>
</header>
<h1 class="text-center pt-4 text-3xl">Badge service for Deno modules</h1>
<div class="pt-4">
<h2 class="m-0 text-lg pt-4">Generate Deno module version badge</h2>
<label for="deno-module-version">
<div class="flex pt-4 gap-1 items-center">
<div class="font-code">shield.deno.dev/x/</div>
<input
type="text"
class="bg-transparent border-b-black border-b font-code outline-none border-t-0 border-l-0 border-r-0 text-base w-full p-2 transition"
placeholder="enter module name (oak)"
id="deno-module-version"
name="deno-module-version"
required
/>
</div>
</label>
<div class="flex p-4 justify-between items-center sm:justify-around">
<button class="border rounded font-code text-base p-1 hover:bg-gray-100" id="copy-module" disabled>Copy Markdown</button>
<div id="preview-module"></div>
</div>
</div>
<div class="pt-4">
<h2 class="m-0 text-lg pt-4">Generate Deno std version badge</h2>
<label for="deno-std-version">
<div class="flex pt-4 gap-1 items-center">
<div class="font-code">shield.deno.dev/std/</div>
<input type="text"
class="bg-transparent border-b-black border-b font-code outline-none border-t-0 border-l-0 border-r-0 text-base w-full p-2 transition"
placeholder="enter deno std version (0.210.0)"
id="deno-std-version"
name="deno-std-version"
required
/>
</div>
</label>
<div class="flex p-4 justify-between items-center sm:justify-around">
<button class="border rounded font-code text-base p-1 hover:bg-gray-100" id="copy-std" disabled>Copy Markdown</button>
<div id="preview-std"></div>
</div>
</div>
<div class="pt-4">
<h2 class="m-0 text-lg pt-4">Generate Deno compatibility badge</h2>
<label for="deno-version">
<div class="flex pt-4 gap-1 items-center">
<div class="font-code">shield.deno.dev/deno/</div>
<input
type="text"
class="bg-transparent border-b-black border-b font-code outline-none border-t-0 border-l-0 border-r-0 text-base w-full p-2 transition"
placeholder="enter deno version (^1.35)"
id="deno-version"
name="deno-version"
required
/>
</div>
</label>
<div class="flex p-4 justify-between items-center sm:justify-around">
<button class="border rounded font-code text-base p-1 hover:bg-gray-100" id="copy-deno" disabled>Copy Markdown</button>
<div id="preview-deno"></div>
</div>
</div>
<div class="pt-4">
<h2 class="m-0 text-lg pt-4">Examples</h2>
<div class="grid pt-4 gap-4 items-center sm:grid-cols-[2fr_1fr]">
<a href="/x/lodash" target="_blank">https://shield.deno.dev/x/lodash (no v prefix)</a>
<img src="/x/lodash" alt="lodash deno module version" />
<a href="/x/dayjs" target="_blank">https://shield.deno.dev/x/dayjs (v prefix)</a>
<img src="/x/dayjs" alt="dayjs deno module version"/>
<a href="/x/xstate" target="_blank">https://shield.deno.dev/x/xstate (scoped module)</a>
<img src="/x/xstate" alt="xstate deno module version"/>
<a href="/x/vue" target="_blank">https://shield.deno.dev/x/vue (reserved module)</a>
<img src="/x/vue" alt="vue deno module version"/>
<a href="/x/oak" target="_blank">https://shield.deno.dev/x/oak (2 digit major version)</a>
<img src="/x/oak" alt="oak deno module version"/>
<a href="/x/postgres" target="_blank">https://shield.deno.dev/x/postgres (module under 1.0)</a>
<img src="/x/postgres" alt="postgres deno module version"/>
<a href="/std/0.210.0" target="_blank">https://shield.deno.dev/std/0.210.0 (std version)</a>
<img src="/std/0.210.0" alt="deno std version"/>
<a href="/deno/^1.35" target="_blank">https://shield.deno.dev/deno/^1.35 (supported deno version)</a>
<img src="/deno/^1.35" alt="deno version"/>
</div>
</div>
<footer class="flex py-12 justify-between items-center">
<span>Copyright © 2024 Jeff Yang</span>
<span id="wcb" class="carbonbadge"></span>
<span>
Powered by
<a href="https://deno.com/deploy" target="_blank" rel="shield.deno.dev">
Deno Deploy
</a>
</span>
</footer>
<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
<script type="module">
// import "uno.css"; // ui dev only
const deno_module = document.getElementById('deno-module-version')
const deno_std = document.getElementById('deno-std-version')
const deno_version = document.getElementById('deno-version')
const copy_module = document.getElementById('copy-module')
const copy_std = document.getElementById('copy-std')
const copy_deno = document.getElementById('copy-deno')
const preview_module = document.getElementById('preview-module')
const preview_std = document.getElementById('preview-std')
const preview_deno = document.getElementById('preview-deno')
function add_input_listener(input, copy_markdown, preview, get_url) {
let id
input.addEventListener('input', (e) => {
if (id) clearTimeout(id)
const value = e.target.value;
if (value.length) {
id = setTimeout(async () => {
preview.innerHTML = await (await fetch(get_url(value))).text()
copy_markdown.disabled = false;
}, 1000)
} else {
copy_markdown.disabled = true;
preview.innerHTML = ''
}
})
}
function add_copy_listener(copy_markdown, input, get_link) {
copy_markdown.addEventListener('click', async () => {
await copy(get_link(input.value))
})
}
async function copy(text) {
try {
await navigator.clipboard.writeText(text)
alert('Markdown text has been copied to the clipboard.')
} catch (e) {
console.error(e)
}
}
add_input_listener(deno_module, copy_module, preview_module, (value) => `/x/${value}`)
add_input_listener(deno_std, copy_std, preview_std, (value) => `/std/${value}`)
add_input_listener(deno_version, copy_deno, preview_deno, (value) => `/deno/${value}`)
add_copy_listener(copy_module, deno_module, (value) => `[](https://deno.land/x/${value})`)
add_copy_listener(copy_std, deno_std, (value) => `[](https://deno.land/std@${value})`)
add_copy_listener(copy_deno, deno_version, (value) => ``)
</script>
</body>
</html>