snatching amp's walkthrough for my own purposes mwhahaha
traverse.dunkirk.sh/diagram/6121f05c-a5ef-4ecf-8ffc-02534c5e767c
feat: add favicon and footer
+55
-4
+4
icon.svg
+4
icon.svg
+18
-2
src/index.ts
+18
-2
src/index.ts
···
31
31
});
32
32
}
33
33
34
+
if (url.pathname === "/icon.svg") {
35
+
return new Response(Bun.file(import.meta.dir + "/../icon.svg"), {
36
+
headers: { "Content-Type": "image/svg+xml" },
37
+
});
38
+
}
39
+
34
40
// List available diagrams
35
41
if (url.pathname === "/") {
36
42
return new Response(generateIndexHTML(diagrams), {
···
109
115
<meta charset="UTF-8" />
110
116
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
111
117
<title>Traverse — ${escapeHTML(title)}</title>
112
-
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%232563eb'/><path d='M10 12h12M10 16h12M10 20h12' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>" />
118
+
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
113
119
<style>
114
120
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
115
121
:root {
···
184
190
<meta charset="UTF-8" />
185
191
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
186
192
<title>Traverse</title>
187
-
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%232563eb'/><path d='M10 12h12M10 16h12M10 20h12' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>" />
193
+
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
188
194
<style>
189
195
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
190
196
:root {
···
247
253
background: var(--code-bg); padding: 2px 6px;
248
254
border-radius: 3px; font-size: 12px;
249
255
}
256
+
.site-footer {
257
+
padding: 32px 20px; text-align: center;
258
+
font-size: 13px; color: var(--text-muted);
259
+
}
260
+
.site-footer .heart { color: #e25555; }
261
+
.site-footer a { color: var(--text); text-decoration: none; }
262
+
.site-footer a:hover { text-decoration: underline; }
250
263
</style>
251
264
</head>
252
265
<body>
···
255
268
<p>Interactive code walkthrough diagrams</p>
256
269
</div>
257
270
${content}
271
+
<footer class="site-footer">
272
+
Made with <span class="heart">♥</span> by <a href="https://dunkirk.sh">Kieran Klukas</a> · <a href="https://github.com/taciturnaxolotl/traverse">GitHub</a>
273
+
</footer>
258
274
</body>
259
275
</html>`;
260
276
}
+33
-2
src/template.ts
+33
-2
src/template.ts
···
9
9
<meta charset="UTF-8" />
10
10
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11
11
<title>Traverse — ${escapeHTML(diagram.summary)}</title>
12
-
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%232563eb'/><path d='M10 12h12M10 16h12M10 20h12' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>" />
12
+
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
13
13
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css" id="hljs-dark" disabled />
14
14
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github.min.css" id="hljs-light" />
15
15
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
···
82
82
font-size: 11px;
83
83
letter-spacing: 0.05em;
84
84
flex-shrink: 0;
85
+
transition: color 0.15s;
86
+
}
87
+
88
+
.summary-bar .label:hover {
89
+
color: var(--text);
85
90
}
86
91
87
92
.summary-bar .sep {
···
121
126
overflow: hidden;
122
127
text-overflow: ellipsis;
123
128
white-space: nowrap;
129
+
}
130
+
131
+
.diagram-wrap {
132
+
padding: 32px 32px 0;
124
133
}
125
134
126
135
.diagram-section {
···
505
514
border-color: #16a34a;
506
515
opacity: 1;
507
516
}
517
+
518
+
.site-footer {
519
+
padding: 32px 20px;
520
+
text-align: center;
521
+
font-size: 13px;
522
+
color: var(--text-muted);
523
+
}
524
+
525
+
.site-footer .heart { color: #e25555; }
526
+
527
+
.site-footer a {
528
+
color: var(--text);
529
+
text-decoration: none;
530
+
}
531
+
532
+
.site-footer a:hover { text-decoration: underline; }
508
533
</style>
509
534
</head>
510
535
<body>
···
516
541
<span class="header-node" id="header-node"></span>
517
542
</div>
518
543
519
-
<div class="content-wrap">
544
+
<div class="diagram-wrap">
520
545
<div class="diagram-section">
521
546
<pre class="mermaid">${escapeHTML(diagram.code)}</pre>
522
547
</div>
548
+
</div>
523
549
550
+
<div class="content-wrap">
524
551
<div id="detail-section"></div>
525
552
</div>
553
+
554
+
<footer class="site-footer">
555
+
Made with <span class="heart">♥</span> by <a href="https://dunkirk.sh">Kieran Klukas</a> · <a href="https://github.com/taciturnaxolotl/traverse">GitHub</a>
556
+
</footer>
526
557
527
558
<script type="module">
528
559
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";