Skip to content

Commit 0f3d347

Browse files
nolanlawsonnolanlawson
authored
docs: allow docs to copy-paste emoji, use PWA (#497)
1 parent ede9464 commit 0f3d347

3 files changed

Lines changed: 83 additions & 7 deletions

File tree

‎docs/icon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎docs/index.html‎

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/picker.js">
55
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/database.js">
6-
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.8em%22 font-size=%2280%22>😀</text></svg>">
6+
<link rel="icon" href="./icon.svg">
77
<meta charset="UTF-8">
8+
<link rel="manifest" href="./manifest.json">
89
<title>emoji-picker-element</title>
910
<meta name="viewport" content="width=device-width">
1011
<style>
@@ -24,6 +25,8 @@
2425

2526
p {
2627
padding: 20px;
28+
text-align: center;
29+
margin: 0 auto;
2730
}
2831

2932
.github-banner {
@@ -62,6 +65,28 @@
6265
margin-left: 20px;
6366
}
6467

68+
pre {
69+
margin: 0;
70+
}
71+
72+
[role="alert"] {
73+
display: none;
74+
}
75+
[role="alert"].shown {
76+
display: flex;
77+
flex-direction: column;
78+
padding: 20px;
79+
}
80+
details {
81+
display: flex;
82+
flex-direction: column;
83+
gap: 20px;
84+
}
85+
86+
footer {
87+
display: none;
88+
}
89+
6590
@media (max-width: 767px) {
6691
html {
6792
padding-top: 50px;
@@ -75,6 +100,20 @@
75100
h1 {
76101
padding: 0 50px;
77102
}
103+
p {
104+
padding: 10px 5px;
105+
}
106+
html {
107+
padding-top: 20px;
108+
}
109+
.github-banner-section {
110+
display: none;
111+
}
112+
footer {
113+
display: initial;
114+
text-align: center;
115+
padding: 20px;
116+
}
78117
}
79118

80119
/* iPhone 6/7/8/X */
@@ -121,7 +160,7 @@
121160
</style>
122161
</head>
123162
<body>
124-
<section aria-label="GitHub link">
163+
<section aria-label="GitHub link" class="github-banner-section">
125164
<a class="github-banner" href="https://github.com/nolanlawson/emoji-picker-element">
126165
<img width="149" height="149"
127166
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149"
@@ -132,7 +171,7 @@
132171
<main>
133172
<h1>emoji-picker-element</h1>
134173
<p>
135-
<code>emoji-picker-element</code> is a lightweight emoji picker for the modern web.
174+
A lightweight emoji picker for the modern web.
136175
</p>
137176
<div class="flex">
138177
<div>
@@ -159,8 +198,11 @@ <h1>emoji-picker-element</h1>
159198
<input type="checkbox" id="custom"> Custom emoji
160199
</label>
161200
</div>
162-
<div style="padding: 20px;" role="alert" aria-live="polite">
163-
<pre style="display:none;"></pre>
201+
<div role="alert" aria-live="polite">
202+
<details open>
203+
<summary>Copied to clipboard! Details:</summary>
204+
<pre></pre>
205+
</details>
164206
</div>
165207
<div class="private-browsing-warning"
166208
style="padding: 20px; display: none; border: 2px dashed crimson;"
@@ -174,6 +216,9 @@ <h1>emoji-picker-element</h1>
174216
</div>
175217
</div>
176218
</main>
219+
<footer>
220+
<p><a href="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149">Source code</a></p>
221+
</footer>
177222
<script type="module">
178223
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/picker.js'
179224
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/database.js' // avoid extra round-trip
@@ -243,11 +288,22 @@ <h1>emoji-picker-element</h1>
243288

244289
document.addEventListener('DOMContentLoaded', async () => {
245290
const picker = $('emoji-picker')
291+
const alert = $('[role="alert"]')
246292
const pre = $('pre')
247-
const onEvent = e => {
293+
const summary = $('summary')
294+
const onEvent = async e => {
248295
console.log(e)
249-
pre.style.display = 'block'
296+
alert.classList.add('shown')
250297
pre.innerHTML = `Event: ${JSON.stringify(e.type)}\n\nData:\n\n${JSON.stringify(e.detail, null, 2)}`
298+
try {
299+
await navigator.clipboard.write([new ClipboardItem({
300+
'text/plain': e.detail.unicode,
301+
})]);
302+
summary.textContent = `Copied to clipboard! Details:`
303+
} catch (err) {
304+
console.log(err)
305+
summary.textContent = `Failed to write to the clipboard! Event details:`
306+
}
251307
}
252308
picker.addEventListener('emoji-click', onEvent)
253309
picker.addEventListener('skin-tone-change', onEvent)

‎docs/manifest.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"short_name": "Emoji Picker Element",
3+
"name": "Emoji Picker Element",
4+
"icons": [
5+
{
6+
"src": "./icon.svg",
7+
"sizes": "any",
8+
"type": "image/svg+xml",
9+
"purpose": "any"
10+
}
11+
],
12+
"start_url": ".",
13+
"display": "standalone",
14+
"theme_color": "#FDE030",
15+
"background_color": "white"
16+
}

0 commit comments

Comments
 (0)