Skip to content

Commit 54094d3

Browse files
andreruffertandreruffert
committed
docs(site): updates
- add prism theme - copy code icon refactoring - remove release candidate badge - ...
1 parent 3359731 commit 54094d3

File tree

3 files changed

+135
-124
lines changed

3 files changed

+135
-124
lines changed

‎docs/index.html‎

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@
5959
<span class="heading">&lt;syntax-highlight&gt;</span>
6060
<h1 class="tagline">A custom element that uses the CSS Custom Highlight API for syntax highlighting</h1>
6161
<p class="badges">
62-
<img src="https://img.shields.io/badge/Release%20Candidate-32A9C3" alt="Release Candidate" />
6362
<a href="https://www.npmjs.com/package/syntax-highlight-element">
6463
<img src="https://img.shields.io/npm/v/syntax-highlight-element?color=32A9C3&labelColor=1B3C4A" alt="npm version" />
6564
</a>
@@ -69,7 +68,9 @@ <h1 class="tagline">A custom element that uses the CSS Custom Highlight API for
6968
<div class="copy-code-container">
7069
<div class="copy-code">
7170
<syntax-highlight id="copy-npm-install">npm install syntax-highlight-element</syntax-highlight>
72-
<clipboard-copy for="copy-npm-install" class="button">Copy</clipboard-copy>
71+
<clipboard-copy for="copy-npm-install" class="button">
72+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
73+
</clipboard-copy>
7374
</div>
7475
</div>
7576
<span aria-hidden="true">~</span>
@@ -98,7 +99,9 @@ <h2>Install</h2>
9899
<p>Install via npm</p>
99100
<div class="copy-code">
100101
<syntax-highlight id="copy-install-npm">npm install syntax-highlight-element</syntax-highlight>
101-
<clipboard-copy for="copy-install-npm" class="button">Copy</clipboard-copy>
102+
<clipboard-copy for="copy-install-npm" class="button">
103+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
104+
</clipboard-copy>
102105
</div>
103106
</article>
104107
<article>
@@ -107,26 +110,34 @@ <h3>JavaScript</h3>
107110
<p>Import as ES module</p>
108111
<div class="copy-code">
109112
<syntax-highlight language="js" id="copy-usage-import-js">import 'syntax-highlight-element';</syntax-highlight>
110-
<clipboard-copy for="copy-usage-import-js" class="button">Copy</clipboard-copy>
113+
<clipboard-copy for="copy-usage-import-js" class="button">
114+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
115+
</clipboard-copy>
111116
</div>
112117
<p>Or via CDN</p>
113118
<div class="copy-code">
114119
<syntax-highlight language="html" id="copy-usage-cdn-js">&lt;script type="module" src="https://unpkg.com/syntax-highlight-element@latest/dist/syntax-highlight-element.js"&gt;&lt;/script&gt;</syntax-highlight>
115-
<clipboard-copy for="copy-usage-cdn-js" class="button">Copy</clipboard-copy>
120+
<clipboard-copy for="copy-usage-cdn-js" class="button">
121+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
122+
</clipboard-copy>
116123
</div>
117124
<h3>HTML</h3>
118125
<div class="copy-code">
119126
<syntax-highlight language="html" id="copy-usage-html">&lt;syntax-highlight language="js"&gt;
120127
// ...
121128
&lt;/syntax-highlight&gt;</syntax-highlight>
122-
<clipboard-copy for="copy-usage-html" class="button">Copy</clipboard-copy>
129+
<clipboard-copy for="copy-usage-html" class="button">
130+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
131+
</clipboard-copy>
123132
</div>
124133
<h3>CSS</h3>
125134
<p>Make sure to load a theme e.g. <code>syntax-highlight-element/themes/prettylights.css</code>.</p>
126135
<p>Or via CDN</p>
127136
<div class="copy-code">
128137
<syntax-highlight language="html" id="copy-usage-cdn-css">&lt;link rel="stylesheet" href="https://unpkg.com/syntax-highlight-element@latest/dist/themes/prettylights.css"&gt;</syntax-highlight>
129-
<clipboard-copy for="copy-usage-cdn-css" class="button">Copy</clipboard-copy>
138+
<clipboard-copy for="copy-usage-cdn-css" class="button">
139+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
140+
</clipboard-copy>
130141
</div>
131142
</article>
132143
</section>
@@ -151,7 +162,9 @@ <h1>Configuration</h1>
151162
window.she = window.she || {};
152163
/** @type {Config} */
153164
window.she.config = {};</syntax-highlight>
154-
<clipboard-copy for="copy-config" class="button">Copy</clipboard-copy>
165+
<clipboard-copy for="copy-config" class="button" aria-label="Copy content">
166+
<svg class="icon" width="1em" height="1em"><use xlink:href="#copy"></use></svg>
167+
</clipboard-copy>
155168
</div>
156169
</section>
157170

@@ -184,6 +197,12 @@ <h1>Credits</h1>
184197
<symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="moon">
185198
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
186199
</symbol>
200+
<symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="copy">
201+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
202+
</symbol>
203+
<symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="check">
204+
<path d="M20 6 9 17l-5-5"/>
205+
</symbol>
187206
</svg>
188207

189208
<script type="module">
@@ -248,45 +267,18 @@ <h1>Credits</h1>
248267

249268
document.addEventListener('clipboard-copy', event => {
250269
const button = event.target;
251-
const defaultContent = button.textContent;
252-
button.textContent = 'Copied!'
270+
const icon = button.querySelector('.icon use');
271+
const defaultAriaLabel = button.getAttribute('aria-label');
272+
273+
button.setAttribute('aria-label', 'Copied!');
274+
icon.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", '#check');
275+
253276
setTimeout(() => {
254-
button.textContent = defaultContent;
277+
button.setAttribute('aria-label', defaultAriaLabel);
278+
icon.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", '#copy');
255279
}, 1800);
256280
})
257281
</script>
258-
259-
<script type="module">
260-
const systemPreference = getSystemColorScheme();
261-
262-
document.addEventListener('click', (event) => {
263-
const target = event.target.closest('[data-color-scheme-toggle]');
264-
if (!target) return;
265-
toggleColorScheme();
266-
});
267-
268-
function toggleColorScheme() {
269-
const currentPreference = getColorScheme();
270-
const newPreference = currentPreference === 'dark' ? 'light' : 'dark';
271-
setColorScheme(newPreference);
272-
}
273-
274-
function getColorScheme() {
275-
const computedStyle = window.getComputedStyle(document.documentElement);
276-
const currentPreference = computedStyle.getPropertyValue('color-scheme');
277-
const isSystem = currentPreference === 'light dark';
278-
return isSystem ? systemPreference : currentPreference;
279-
}
280-
281-
function setColorScheme(newPreference) {
282-
document.documentElement.style.setProperty('color-scheme', newPreference);
283-
}
284-
285-
function getSystemColorScheme() {
286-
if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
287-
return 'light';
288-
}
289-
</script>
290282
</body>
291283
</html>
292284

0 commit comments

Comments
 (0)