diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..6a26ec4 --- /dev/null +++ b/icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.ts b/src/index.ts index 1e82d3e..aab80d0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,6 +31,12 @@ Bun.serve({ }); } + if (url.pathname === "/icon.svg") { + return new Response(Bun.file(import.meta.dir + "/../icon.svg"), { + headers: { "Content-Type": "image/svg+xml" }, + }); + } + // List available diagrams if (url.pathname === "/") { return new Response(generateIndexHTML(diagrams), { @@ -109,7 +115,7 @@ function generate404HTML(title: string, message: string): string { Traverse — ${escapeHTML(title)} - + @@ -255,6 +268,9 @@ function generateIndexHTML(diagrams: Map): string {

Interactive code walkthrough diagrams

${content} + `; } diff --git a/src/template.ts b/src/template.ts index 6afd448..8edda10 100644 --- a/src/template.ts +++ b/src/template.ts @@ -9,7 +9,7 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string { Traverse — ${escapeHTML(diagram.summary)} - + @@ -82,6 +82,11 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string { font-size: 11px; letter-spacing: 0.05em; flex-shrink: 0; + transition: color 0.15s; + } + + .summary-bar .label:hover { + color: var(--text); } .summary-bar .sep { @@ -123,6 +128,10 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string { white-space: nowrap; } + .diagram-wrap { + padding: 32px 32px 0; + } + .diagram-section { display: flex; align-items: center; @@ -505,6 +514,22 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string { border-color: #16a34a; opacity: 1; } + + .site-footer { + padding: 32px 20px; + text-align: center; + font-size: 13px; + color: var(--text-muted); + } + + .site-footer .heart { color: #e25555; } + + .site-footer a { + color: var(--text); + text-decoration: none; + } + + .site-footer a:hover { text-decoration: underline; } @@ -516,14 +541,20 @@ export function generateViewerHTML(diagram: WalkthroughDiagram): string { -
+ 
${escapeHTML(diagram.code)}
+
+
+ +