feat(web): give the tab icon a background and generate the brand rasters - #86
Merged
Conversation
The favicon pointed at public/headless-mark.svg, which is stroke-only and takes its colour from a prefers-color-scheme block inside the file. Browsers do not reliably re-evaluate that for tab icons, so a near-black #15171a stroke can disappear against a dark tab strip. The macOS app icon had already solved this by putting the mark on a dark squircle; app/icon.svg now does the same, so the two platforms match. The bare mark stays exactly where it is: the nav brand uses it as a CSS mask and takes its colour from currentColor, so it must remain background-free. Adds the raster sizes that were missing — an Apple touch icon and a 1200x630 social card — generated at build time through next/og rather than committed as binaries, plus the openGraph and twitter metadata and the metadataBase that were absent. scripts/render-brand.mjs renders the two square images GitHub needs, an organisation avatar and a repository social preview, into a gitignored build/brand/. GitHub has no API for either upload, so they are generated on demand and uploaded by hand. Generated images draw each bracket as two rounded bars rather than a bordered box: bordered boxes miter at the corner and leave a visible seam, and cannot reproduce the round line caps the mark is drawn with. docs/brand.md records the geometry, where each asset lives, and the upload steps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
There is a Headless logo already — a viewfinder, four corner brackets around empty space, "a frame with no chrome". It exists twice with identical geometry:
apps/web/public/headless-mark.svgandapps/headless/tools/make-icon.swift(the macOS.icns). Nothing needed inventing; it needed wiring up properly.The favicon was broken in a quiet way
metadata.iconspointed atpublic/headless-mark.svg. That file is stroke-only and takes its colour from aprefers-color-schemeblock inside the SVG. Browsers do not reliably re-evaluate that for tab icons, so the near-black#15171astroke can render nearly invisible against a dark tab strip.The macOS app icon had already solved this — dark squircle, light mark.
app/icon.svgnow does the same, so tab and app icon match.The bare mark is untouched on purpose: the nav brand renders it as a CSS mask and takes its colour from
currentColor, so giving it a background would break the header.Added
app/icon.svgapp/apple-icon.tsxnext/ogapp/opengraph-image.tsxog:imageat allscripts/render-brand.mjsbuild/brand/docs/brand.mdAlso adds the
metadataBase,openGraph, andtwittermetadata that were missing (part of #49).No binaries are committed. Every raster comes from code, so the media policy holds and any size can be regenerated without a design tool.
Detail worth keeping
Generated images draw each bracket as two rounded bars, not a div with two borders. Bordered boxes miter at the corner and leave a visible diagonal seam, and they cannot reproduce the round line caps of the source path. I rendered it both ways and compared before settling on this.
Verified locally
next buildandeslintpass;/icon.svg,/apple-icon, and/opengraph-imageall emit. I inspected the generated PNGs visually — 180×180 and 1200×630, correct geometry, correct caps.Needs you: GitHub uploads
GitHub has no API for either of these, so I cannot do them — and note that repositories have no icon of their own, they display the owner's avatar.
apps/web/build/brand/avatar-512.png→ https://github.com/organizations/LockInTime/settings/profileapps/web/build/brand/social-preview-1280x640.png→ repo Settings → General → Social previewBoth are already rendered on this machine at those paths.