generated from cloud-cli/ts-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (80 loc) · 3.41 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://wdn.homebots.io/wds/site.css" rel="stylesheet" />
<title>Web Design System</title>
<script type="module">
import { highlight } from 'https://highlight.jsfn.run/index.js';
window.addEventListener('DOMContentLoaded', () => {
document.body.querySelectorAll('div[lang]').forEach(hjs);
document.body.querySelectorAll('[data-tabs]').forEach(addTabs);
});
async function hjs(node) {
const language = node.getAttribute('lang') || 'text';
let source = node.textContent.trim();
if (node.dataset.src) {
source = await fetch(node.dataset.src, { mode: 'cors' }).then((x) => x.text());
}
if (node.dataset.srcelement) {
const el = document.querySelector(node.dataset.srcelement);
source = [...(el.content || el)?.children].map(c => c.outerHTML).join('\n') || '';
}
node.innerHTML = await highlight(source, { language, embed: true });
}
function addTabs(root) {
const contents = root.querySelectorAll('[data-tab]');
const buttons = root.querySelectorAll('[data-target]');
buttons.forEach((btn) => {
btn.addEventListener('click', () => {
const target = btn.dataset.target;
buttons.forEach(b => b.classList[b === btn ? 'add' : 'remove']('wds-tabs__button--selected'));
contents.forEach(t => t.classList[t.dataset.tab === target ? 'remove' : 'add']('hidden'));
});
});
}
</script>
</head>
<body>
<header class="wds-page-section wds-page-section--dark wds-page-header">
<h2 class="wds-page-header__title">Web Design System</h2>
<p class="wds-page-header__body">A styleguide and design system generator based on TailwindCSS</p>
</header>
<section class="wds-page-section">
<div class="wds-page-container">
<h2 class="wds-page-header__title">Declare components</h2>
<p class="wds-page-header__body">A styleguide and design system generator</p>
</div>
</section>
<section class="wds-page-section">
<div class="wds-page-container">
<div class="wds-tabs" data-tabs="">
<nav class="wds-tabs__nav">
<button class="wds-tabs__button wds-tabs__button--selected" data-target="preset">Preset</button>
<button class="wds-tabs__button" data-target="html">HTML</button>
</nav>
<div class="wds-tabs__content">
<div class="wds-tabs__item" data-tab="preset">
<div class="wds-codeblock" lang="yaml" data-src="https://wds.homebots.io/preset/wds/site">
<pre class="animate-pulse">...</pre>
</div>
</div>
<div class="wds-tabs__item hidden" data-tab="html">
<div class="wds-codeblock" lang="html" data-srcelement="body">
<pre class="animate-pulse">...</pre>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="wds-page-section wds-page-section--dark wds-page-footer">
<div class="wds-page-container">
<p>
Designed with ♥ by <a href="https://github.com/darlanalves">Darlan Alves</a>. Licensed under the MIT License.
</p>
</div>
</footer>
</body>
</html>