izackp/webterm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wire vendored Nerd font into dashboard SVG thumbnails

Browse Source 
Ensure dashboard screenshot SVGs consistently use the vendored Fira Nerd font stack used by the terminal.

Changes:
- Added dashboard inline CSS declarations for @font-face (FiraCode Nerd Font/FiraMono Nerd Font) and --webterm-mono in the dashboard HTML template.
- Updated RenderTerminalSVG styling to use font-family: var(--webterm-mono, ...) with the full Nerd-font-aware fallback stack.
- Embedded matching @font-face declarations inside generated SVG style blocks so externally loaded SVG images can resolve the vendored font without relying on parent page CSS inheritance.

Result:
- Dashboard screenshot tiles and search thumbnails retain full glyph/icon coverage with consistent typography across environments.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
GitHub Copilot
2026-02-15 15:05:36 +00:00
parent 252ecb3714
commit 5ade64b367
2 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webterm/server.go
+3
View File
@@ -894,6 +894,9 @@ func (s *LocalServer) handleRoot(w http.ResponseWriter, r *http.Request) {
<meta name="theme-color" content="#0d1117">
<link rel="icon" href="/static/icons/webterm-192.png" sizes="192x192">
<style>
@font-face { font-family: "FiraCode Nerd Font"; src: url("/static/fonts/FiraCodeNerdFont-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "FiraMono Nerd Font"; src: url("/static/fonts/FiraCodeNerdFont-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
:root { --webterm-mono: ui-monospace, "SFMono-Regular", "FiraCode Nerd Font", "FiraMono Nerd Font", "Fira Code", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 16px; background: #0f172a; color: #e2e8f0; }
h1 { margin-bottom: 8px; }
.subtitle { color: #64748b; font-size: 14px; margin-bottom: 16px; }
webterm/svg_exporter.go
+1 -1
View File
@@ -60,7 +60,7 @@ func RenderTerminalSVG(
var b strings.Builder
b.WriteString(fmt.Sprintf(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 %.1f %.1f" class="terminal-svg">`, svgWidth, svgHeight))
b.WriteString("<title>" + html.EscapeString(title) + "</title>")
b.WriteString(`<defs><style>.terminal-bg{fill:` + background + `}.terminal-text{font-family:ui-monospace,"SFMono-Regular","Fira Code",Menlo,Monaco,Consolas,"Liberation Mono","DejaVu Sans Mono","Courier New",monospace;font-size:14px;fill:` + foreground + `;white-space:pre;text-rendering:optimizeLegibility}.bold{font-weight:bold}.italic{font-style:italic}.underline{text-decoration:underline}</style></defs>`)
b.WriteString(`<defs><style>@font-face{font-family:"FiraCode Nerd Font";src:url("/static/fonts/FiraCodeNerdFont-Regular.ttf") format("truetype");font-style:normal;font-weight:400}@font-face{font-family:"FiraMono Nerd Font";src:url("/static/fonts/FiraCodeNerdFont-Regular.ttf") format("truetype");font-style:normal;font-weight:400}.terminal-bg{fill:` + background + `}.terminal-text{font-family:var(--webterm-mono,ui-monospace,"SFMono-Regular","FiraCode Nerd Font","FiraMono Nerd Font","Fira Code",Menlo,Monaco,Consolas,"Liberation Mono","DejaVu Sans Mono","Courier New",monospace);font-size:14px;fill:` + foreground + `;white-space:pre;text-rendering:optimizeLegibility}.bold{font-weight:bold}.italic{font-style:italic}.underline{text-decoration:underline}</style></defs>`)
b.WriteString(fmt.Sprintf(`<rect class="terminal-bg" x="0" y="0" width="%.1f" height="%.1f"/>`, svgWidth, svgHeight))
b.WriteString(`<g class="terminal-text">`)
for rowIdx := 0; rowIdx < len(buffer); rowIdx++ {