Skip to content

Commit 53d5914

Browse files
devmountdevmount
authored
Merge pull request #38 from devmount/enhancements/docs-header
Docs header, cta buttons, theme mode switch and search
2 parents b51d9c0 + 038845b commit 53d5914

32 files changed

Lines changed: 398 additions & 87 deletions

‎docs/_includes/default.njk‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,46 @@
2424

2525
</head>
2626
<body>
27-
{# Menu trigger #}
28-
<a class="menu-trigger text-muted" href="#nav">
29-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
30-
<path d="M4 6l16 0" />
31-
<path d="M4 12l16 0" />
32-
<path d="M4 18l16 0" />
33-
</svg>
34-
</a>
27+
<header>
28+
{# Menu trigger #}
29+
<a class="menu-trigger text-muted" href="#nav">
30+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
31+
<path d="M4 6l16 0" />
32+
<path d="M4 12l16 0" />
33+
<path d="M4 18l16 0" />
34+
</svg>
35+
</a>
36+
37+
<div class="controls">
38+
<div>
39+
<a class="button hollow neutral rounded-full" href="#search" onclick="focusSearch()">
40+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
41+
Search
42+
</a>
43+
</div>
44+
<div class="theme-mode">
45+
<button id="light-mode" onclick="setLight()" class="ghost neutral rounded-full">
46+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
47+
</button>
48+
<button id="dark-mode" onclick="setDark()" class="ghost neutral rounded-full">
49+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
50+
</button>
51+
</div>
52+
</div>
53+
</header>
54+
55+
{# Search result #}
56+
<div id="search">
57+
<input type="search" placeholder="Search" autofocus />
58+
<hr />
59+
<div id="result">
60+
<div class="state empty">
61+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>
62+
<h4>Waiting for search input</h4>
63+
<p class="text-muted">Please type something into the search field.</p>
64+
</div>
65+
</div>
66+
</div>
3567

3668
{# Global navigation #}
3769
<aside id="nav">
@@ -47,11 +79,11 @@
4779
</div>
4880
<div class="actions">
4981
<a href="{{ repoUrl }}" target="_blank" class="button hollow neutral sm">
50-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
82+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
5183
GitHub
5284
</a>
5385
<a href="{{ donationUrl }}" target="_blank" class="button hollow sm">
54-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
86+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
5587
Support
5688
</a>
5789
</div>

‎docs/assets/scripts/docs.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,73 @@
1+
// Theming
2+
const lightToggle = document.querySelector('#light-mode');
3+
const darkToggle = document.querySelector('#dark-mode');
4+
const setDark = () => {
5+
localStorage.setItem('sloth.css/theme', 'dark');
6+
document.documentElement.style.colorScheme = 'dark';
7+
darkToggle.classList.add(['text-accent']);
8+
lightToggle.classList.remove(['text-accent']);
9+
};
10+
const setLight = () => {
11+
localStorage.setItem('sloth.css/theme', 'light');
12+
document.documentElement.style.colorScheme = 'light';
13+
lightToggle.classList.add(['text-accent']);
14+
darkToggle.classList.remove(['text-accent']);
15+
};
16+
17+
// Search
18+
let index = [];
19+
fetch('/assets/scripts/searchIndex.json')
20+
.then((response) => response.json())
21+
.then((data) => { index = data; });
22+
23+
const search = document.querySelector('#search');
24+
const searchInput = search.querySelector('input');
25+
const searchResult = search.querySelector('#result');
26+
searchInput.addEventListener('input', (event) => {
27+
const query = event.target.value.toLowerCase();
28+
29+
// Handle empty input
30+
if (!query.length) {
31+
searchResult.innerHTML = `<div class="state empty">
32+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>
33+
<h4>Waiting for search input</h4>
34+
<p class="text-muted">Please type something into the search field.</p>
35+
</div>`;
36+
return;
37+
}
38+
39+
// Calculate search result
40+
const result = index.filter((e) => (`${e.title} ${e.text} ${e.tags}`).toLowerCase().includes(query));
41+
42+
// Handle search results
43+
if (result.length) {
44+
searchResult.innerHTML = result.reduce((p, c) => {
45+
const icon = {
46+
'getting-started': '<path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" /><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" /><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
47+
'core': '<path d="M6 17.6l-2 -1.1v-2.5" /><path d="M4 10v-2.5l2 -1.1" /><path d="M10 4.1l2 -1.1l2 1.1" /><path d="M18 6.4l2 1.1v2.5" /><path d="M20 14v2.5l-2 1.12" /><path d="M14 19.9l-2 1.1l-2 -1.1" /><path d="M12 12l2 -1.1" /><path d="M18 8.6l2 -1.1" /><path d="M12 12l0 2.5" /><path d="M12 18.5l0 2.5" /><path d="M12 12l-2 -1.12" /><path d="M6 8.6l-2 -1.1" />',
48+
'utilities': '<path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" />',
49+
'components': '<path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z" /><path d="M15 4h1a1 1 0 0 1 1 1v3.5" /><path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374" />',
50+
}[c.cat];
51+
return `${p}<a href="${c.url}" class="entry">
52+
<div class="text-muted">
53+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">${icon}</svg>
54+
</div>
55+
<div>
56+
<h5>${c.name}</h5>
57+
<div class="text-muted">${c.text}</div>
58+
</div>
59+
</a>`;
60+
}, '')
61+
} else {
62+
searchResult.innerHTML = `<div class="state empty">
63+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M3 7v4a1 1 0 0 0 1 1h3" /><path d="M7 7v10" /><path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z" /><path d="M17 7v4a1 1 0 0 0 1 1h3" /><path d="M21 7v10" /></svg>
64+
<h4>Sorry, no matching pages found</h4>
65+
<p class="text-muted">Please try changing the search term.</p>
66+
</div>`;
67+
}
68+
});
69+
const focusSearch = () => setTimeout(() => searchInput.focus(), 50);
70+
171
// Component: Toast
272
const toast = document.querySelector('#toast');
373
const toggleToast = () => toast.classList.toggle('active');
@@ -11,3 +81,16 @@ const colorToast = (col) => {
1181
toastColors.forEach(c => toast.classList.remove(c));
1282
toast.classList.add(col);
1383
}
84+
85+
// Ready? Let's go!
86+
(() => {
87+
// Handle initial theme mode
88+
if (localStorage.getItem('sloth.css/theme') === 'dark') {
89+
document.documentElement.style.colorScheme = 'dark';
90+
darkToggle.classList.add('text-accent');
91+
}
92+
if (localStorage.getItem('sloth.css/theme') === 'light') {
93+
document.documentElement.style.colorScheme = 'light';
94+
lightToggle.classList.add('text-accent');
95+
}
96+
})();

0 commit comments

Comments
 (0)