feat: add a GitHub link to the header and make the logo link home - #7
Merged
Conversation
Two header links. The GitHub mark sits next to the theme toggle and opens the repository; the Libre DevOps logo now opens libredevops.org. The icon is the official GitHub mark, copied verbatim from primer/octicons icons/mark-github-16.svg. Inline SVG rather than a file or a remote icon, because the CSP is default-src 'self' with img-src 'self' data:, so inlining costs no extra request and needs no CSP change. fill=currentColor makes it follow the same colour as the controls beside it in both themes. Both links get target=_blank with rel=noopener noreferrer and an aria-label. The GitHub anchor joins the existing #theme-toggle selector lists rather than duplicating their declarations, so it picks up the same chrome and hover, with inline-flex centring the button gets for free. The logo anchor is inline-flex so wrapping the image does not disturb the header grid. Verified under jsdom: 30 checks, including that the shipped path matches the official octicons mark byte for byte, that the GitHub link is the theme toggle's next sibling, and that the logo anchor is still the direct grid child so the header layout is unchanged.
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
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.
Two small header links.
libre-devops/security-news.libredevops.org.The icon
The official GitHub mark, copied verbatim from
primer/octiconsicons/mark-github-16.svg. My first pass used the legacy mark from memory, which is not the current one, so the path is now pulled from the canonical source and asserted against it in the test rather than eyeballed.Inline SVG rather than a file or a remote icon: the CSP is
default-src 'self'withimg-src 'self' data:, so inlining costs no extra request and needs no CSP change.fill="currentColor"makes it follow the same colour as the controls beside it, so it works in both themes without a second asset.Styling
The anchor joins the existing
#theme-toggle, .rss-buttonselector lists rather than duplicating their declarations, so it inherits the same chrome, hover and focus treatment. It getsinline-flexcentring that a<button>would get for free, and the same 52px circle as the theme toggle.The logo anchor is
inline-flexso wrapping the image does not disturb the header grid (.logoisgrid-template-columns: auto 1fr auto, and the anchor simply takes the image's place as the first column).Both links carry
target="_blank",rel="noopener noreferrer"and anaria-label, and both get a visible:focus-visibleoutline.Verification
jsdom against the real
index.htmlandstyles.css, 30 checks passing. New ones:The mark assertion compares the shipped
dattribute against a freshly fetched copy of the octicon, so a hand-edit or a stale path would fail the check rather than pass silently.