zat.dev
zzstoatzz.io
+5
-12
site/app.js
+5
-12
site/app.js
···
1
1
const navEl = document.getElementById("nav");
2
2
const contentEl = document.getElementById("content");
3
-
const searchEl = document.getElementById("search");
4
3
5
4
function escapeHtml(text) {
6
5
return text
···
42
41
return res.text();
43
42
}
44
43
45
-
function renderNav(pages, activePath, filter) {
46
-
const q = (filter || "").trim().toLowerCase();
47
-
const filtered = q
48
-
? pages.filter((p) => (p.title || p.path).toLowerCase().includes(q))
49
-
: pages;
50
-
51
-
if (!filtered.length) {
52
-
navEl.innerHTML = `<div class="empty">No matches.</div>`;
44
+
function renderNav(pages, activePath) {
45
+
if (!pages.length) {
46
+
navEl.innerHTML = "";
53
47
return;
54
48
}
55
49
56
-
navEl.innerHTML = filtered
50
+
navEl.innerHTML = pages
57
51
.map((p) => {
58
52
const path = normalizeDocPath(p.path);
59
53
const title = escapeHtml(p.title || path);
···
110
104
111
105
async function render() {
112
106
const activePath = getSelectedPath() || defaultPath;
113
-
renderNav(pages, activePath, searchEl.value);
107
+
renderNav(pages, activePath);
114
108
115
109
if (!activePath) {
116
110
contentEl.innerHTML = `<p class="empty">No docs yet. Add markdown files under <code>zat/docs/</code> and push to <code>main</code>.</p>`;
···
135
129
}
136
130
}
137
131
138
-
searchEl.addEventListener("input", () => render());
139
132
window.addEventListener("hashchange", () => render());
140
133
141
134
if (!getSelectedPath() && defaultPath) setSelectedPath(defaultPath);
-8
site/index.html
-8
site/index.html
···
12
12
<div class="app">
13
13
<header class="header">
14
14
<a class="brand" href="./">zat.dev</a>
15
-
<input
16
-
id="search"
17
-
class="search"
18
-
type="search"
19
-
placeholder="Search…"
20
-
autocomplete="off"
21
-
spellcheck="false"
22
-
/>
23
15
</header>
24
16
25
17
<div class="layout">
-15
site/style.css
-15
site/style.css
···
77
77
text-decoration: none;
78
78
}
79
79
80
-
.search {
81
-
margin-left: auto;
82
-
width: min(520px, 60vw);
83
-
padding: 10px 12px;
84
-
border-radius: 10px;
85
-
border: 1px solid var(--border);
86
-
background: var(--panel);
87
-
color: var(--text);
88
-
outline: none;
89
-
}
90
-
.search:focus {
91
-
border-color: color-mix(in srgb, var(--link) 50%, var(--border));
92
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);
93
-
}
94
-
95
80
.layout {
96
81
display: grid;
97
82
grid-template-columns: 280px 1fr;