feat(website): use animated logo on all pages and matching favicon - #19
Conversation
Extract the animated synapse logo from Nav into a shared Logo.astro component, swap the homepage's static dot mark for it, and align favicon.svg with the same geometry, animation, and signal palette.
|
Warning Review limit reachedNext included review available in 40 minutes. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Advanced Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| --- | ||
| <svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true"> | ||
| <defs> | ||
| <linearGradient id="synapse-g" x1="0" x2="1" y1="0" y2="1"> |
There was a problem hiding this comment.
WARNING: Hardcoded gradient id synapse-g will produce duplicate DOM ids if <Logo /> is rendered more than once on the same page (e.g., in both a header and a footer). Browsers resolve url(#synapse-g) against the first matching id, so the second instance's <path> would render with whatever the first gradient happens to define — silently breaking visual parity.
Consider generating a unique id per instance (e.g., ${Astro.id}-gradient or crypto.randomUUID()) and referencing it via a template attribute on the path's stroke.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| <svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true"> | ||
| <defs> | ||
| <linearGradient id="synapse-g" x1="0" x2="1" y1="0" y2="1"> | ||
| <stop offset="0" stop-color="var(--signal-a)" /> |
There was a problem hiding this comment.
SUGGESTION: var(--signal-a) has no fallback. If this component is ever used on a page that does not import redesign.css (or before the stylesheet finishes loading during FOUC), the stop-color falls back to the browser default (typically black/transparent), so the logo silently renders with no fill.
The favicon already hardcodes #61EBFA for this same role — reusing it as the CSS-variable fallback keeps the two sources visually identical:
| <stop offset="0" stop-color="var(--signal-a)" /> | |
| <stop offset="0" stop-color="var(--signal-a, #61EBFA)" /> |
(The same fallback applies to --signal-b / #6FE4BF on line 12 and to the two <circle fill="var(--signal-...)"> lines 15–16.)
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| <path d="M9 16 Q 16 6 23 16" stroke="url(#g)" stroke-width="2" fill="none" stroke-linecap="round"/> | ||
| <circle cx="8" cy="16" r="3.5" fill="#61EBFA"/> | ||
| <circle cx="24" cy="16" r="3.5" fill="#6FE4BF"/> | ||
| <path d="M8 16 Q 16 6 24 16" stroke="url(#g)" stroke-width="2" fill="none" stroke-linecap="round"> |
There was a problem hiding this comment.
SUGGESTION: stroke-width="2" here vs stroke-width="1.6" in website/src/components/layout/Logo.astro:17. The PR description states the favicon was updated to "mirror the logo exactly", but the stroke weights now differ between the two — at 32px display, 1.6 renders as a noticeably thinner arc than 2. Pick one and align the other.
Also note: this path has stroke-linecap="round" while the Logo component's path doesn't — another small "exactly mirror" gap.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
Code Review SummaryStatus: No Issues Found | Recommendation: Merge All findings from the previous review have been addressed on the changed lines:
No new issues were identified on the changed code. Files Reviewed (2 files)
Previous Review Summary (commit 38cad14)Current summary above is authoritative. Previous snapshots are kept for context only. Previous review (commit 38cad14)Status: 3 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
SUGGESTION
Files Reviewed (4 files)
Reviewed by minimax-m3 · Input: 0 · Output: 0 · Cached: 0 |
- Generate unique gradient id per Logo instance to avoid duplicate DOM ids - Add #61EBFA/#6FE4BF fallbacks to CSS variable colors - Align favicon stroke-width (1.6) and add stroke-linecap="round" to Logo
1 participant
Summary
Nav.astrointo a sharedsrc/components/layout/Logo.astrocomponentpublic/favicon.svgupdated to mirror the logo exactly: same geometry (nodes at 8/24, r=3.5), same 2.4s SMIL animation, and the signal palette (--signal-a/--signal-bdark-theme equivalents#61EBFA/#6FE4BF) for contrast on the dark tileValidation
npm run buildcompletes; 33 pages generatedsynapse-ggradient +<animate>present in built HTML for /, /docs, /docs/concepts/nodes, /install, /changelog, /community, /404Notes
BaseLayout.astroreferences/og-default.pngforog:image, but onlypublic/og-default.svgexists — the social preview image 404s and still uses the old teal/lime palette. Left as-is to keep this PR scoped.