Skip to content

feat/site-logo - #121

Open
ebouchut wants to merge 2 commits into
devfrom
feat/site-logo
Open

feat/site-logo#121
ebouchut wants to merge 2 commits into
devfrom
feat/site-logo

Conversation

@ebouchut

Copy link
Copy Markdown
Owner

This PR adds a site logo:

  • Add inline SVG brand mark to header (a geometric mark resembling an open book/code).
  • aria-hidden=true and `focusable=false
  • header uses inline-flex to align mark and wordmark.
  • Add favicon set derived from the favicon.svg with embedded prefers-colorcheme, favicon.ico (/32/48) for legacy, apple-touch-icon.png x180 on opaque tile
  • Serve ico SVG head so SVG-capable browsers prefer icon
  • Ensure browser favicon requests are permitted by security filter chain and covered by security matrix tests

Fixes #120

ebouchut added 2 commits July 28, 2026 16:51
The brand was text only. The header now carries an original geometric
mark that reads as both an open book and code: two chevrons as the
pages, a short center stroke as the spine.

The mark is inline SVG rather than an img so stroke=currentColor can
inherit the primary token and follow both themes automatically,
including any future contrast retuning; an SVG referenced through img
cannot see CSS custom properties. It stays aria-hidden with focusable
false, so the visible text keeps being the accessible name of the
brand link (RGAA 1.1). The brand anchor becomes an inline flex row to
align mark and wordmark on their vertical centers.

Refs #120
The site served no icon at all, so every browser session 404ed on
favicon.ico. The mark now ships as a favicon in the standard trio:

- favicon.svg, the source of truth; a tab icon cannot read the page
  theme tokens, so it adapts to dark tabs with an embedded
  prefers-color-scheme style hard-coding the two theme primaries
- favicon.ico (16/32/48) for legacy clients, derived with
  rsvg-convert and ImageMagick, never edited by hand
- apple-touch-icon.png (180x180) on an opaque theme-background tile,
  since iOS ignores transparency

The head fragment lists the ico with a fixed size before the SVG so
SVG-capable browsers prefer the scalable icon. Browsers fetch these
root-level paths outside any page context, often anonymously, so the
security filter chain permits them; the security matrix test pins
that anonymous access down.

An og:image social card stays out of scope until the app has a public
canonical URL, as noted in the issue.

Fixes #120
@ebouchut ebouchut self-assigned this Jul 28, 2026
@ebouchut ebouchut added frontend accessibility Accessibility (RGAA, WCAG) security labels Jul 28, 2026
@ebouchut ebouchut moved this to In Review in learn-dev-project Jul 28, 2026
@codecov

codecov Bot commented Jul 28, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.59%. Comparing base (ed3cd5c) to head (dfab24a).

Additional details and impacted files
@@             Coverage Diff              @@
##                dev     #121      +/-   ##
============================================
+ Coverage     81.57%   81.59%   +0.02%     
  Complexity      201      201              
============================================
  Files            38       38              
  Lines           863      864       +1     
  Branches         53       53              
============================================
+ Hits            704      705       +1     
  Misses          125      125              
  Partials         34       34              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@ebouchut ebouchut added this to the v1.0- Certification - DWWM milestone Jul 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Accessibility (RGAA, WCAG) frontend security

Projects

Status: In Review

Development

Successfully merging this pull request may close these issues.

Add a site logo and favicon set

1 participant