Files
ai-resume/internal/web/templates/icons.templ
Sam Rolfe a76882de67 visuals: technology marks, area icons, client wall, two diagrams
Phase 7 (AUD-149), cheapest first.

- internal/brand: vendored Simple Icons path data (CC0) for 50 marks, looked up
  by the technology label the content already uses. Inline SVG, 16 px,
  currentColor, no request and no font. tools/gen_brand_icons.sh regenerates it.
- Six hand-drawn area icons replace the two-letter badges in the nav and on the
  landing cards; the evidence index gets a seventh.
- TechChips renders a mark where one exists and plain text where one does not,
  so a missing icon reads as a decision rather than a broken image.
- Client wall: 45 names as one typeface, one size, one grid of equal tiles, and
  the reason for no logo collage written on the page. No mark invented.
- Two diagrams, authored in-repo: homelab topology (platform-network.md) and
  the RAG pipeline (ai-rag-corpus.md), each referenced from the page it explains.
- Content images now carry intrinsic width/height, loading="lazy" and
  decoding="async" at render time; a site test fails the build if an image
  ships without them.
- Topbar is two rows at desktop: the area names plus marks no longer overlap the
  search form (Lighthouse target-size was failing at 1440 px).
- Favicon, so the browser stops requesting a missing /favicon.ico.

Satisfies: logos on every area page, area icons in nav and cards, two diagrams
referenced from their pages, images sized and lazy, Lighthouse >= 95 held.

(cherry picked from commit a473e4738a3751418c2097df2bcf0568fb6d0208)
2026-10-28 15:56:11 +11:00

68 lines
2.4 KiB
Plaintext

package templates
import "gitea.lab.audasmedia.com.au/sam/ai-resume/internal/brand"
// AreaIcon is the mark for one area of the site. The six marks are drawn here,
// geometrically, in one visual language: 24x24, 1.6 px stroke, round caps, no
// fill, colour inherited from the text. They are decoration only — the label
// beside them carries the meaning — so every one is aria-hidden.
//
// "evidence" is the seventh mark: the index, not an area.
templ AreaIcon(area string) {
<svg class="area-icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
switch area {
case "ai":
<circle cx="5.5" cy="6.5" r="2.5"/>
<circle cx="18.5" cy="6.5" r="2.5"/>
<circle cx="12" cy="17.5" r="2.5"/>
<path d="M8 6.5h8"/>
<path d="M6.7 8.8 10.8 15.6"/>
<path d="M17.3 8.8 13.2 15.6"/>
case "platform":
<rect x="3.5" y="3.5" width="17" height="4.6" rx="1.5"/>
<rect x="3.5" y="9.7" width="17" height="4.6" rx="1.5"/>
<rect x="3.5" y="15.9" width="17" height="4.6" rx="1.5"/>
<path d="M7 5.8h2M7 12h2M7 18.2h2"/>
case "edge":
<rect x="2.5" y="13" width="9" height="8" rx="1.5"/>
<circle cx="7" cy="17" r="1.6"/>
<path d="M15 11.5a3.5 3.5 0 0 1-3.5 3.5"/>
<path d="M18 11.5a6.5 6.5 0 0 1-6.5 6.5"/>
case "products":
<path d="M12 3.2 19 7.3v9.4L12 20.8 5 16.7V7.3z"/>
<path d="M5 7.3l7 4.1 7-4.1"/>
<path d="M12 11.4v9.4"/>
case "history":
<circle cx="12" cy="12" r="8.5"/>
<path d="M12 7v5.2l3.4 2.1"/>
case "about":
<circle cx="12" cy="8.4" r="3.6"/>
<path d="M5.4 20a6.6 6.6 0 0 1 13.2 0"/>
case "evidence":
<path d="M6.8 3.4h7.2l4 4v13.2H6.8z"/>
<path d="M14 3.4v4h4"/>
<path d="M9.6 14.2l2 2 3.6-4.1"/>
}
</svg>
}
// TechChips is the technology list on a page. A chip carries a published mark
// when one exists and plain text when it does not, so a missing icon reads as a
// design decision rather than a broken image.
templ TechChips(items []string) {
<ul class="tech" aria-label="Technology">
for _, t := range items {
<li class="tech-chip">
if paths, ok := brand.Mark(t); ok {
<svg class="tech-mark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
for _, d := range paths {
<path d={ d } fill="currentColor"/>
}
</svg>
}
<span>{ t }</span>
</li>
}
</ul>
}