Skip to content

docs: finish the README dark-mode assets - #438

Merged
suguanYang merged 1 commit into
mainfrom
docs/wangbinqi/readme-banner-scale
Sep 23, 2026
Merged

suguanYang merged 1 commit into
mainfrom
docs/wangbinqi/readme-banner-scale

Conversation

@suguanYang

@suguanYang suguanYang commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Fixes the banner scale. GitHub's markdown CSS sets max-width: 100% on images
    but never height: auto, so the height="500" attribute kept the box at 500px
    while the width shrank to the README column: the artwork and its headline
    rendered 768x500 instead of 768x384, a 30% vertical stretch. The attribute is
    gone and no image in the file sets a height anymore.
  • Swaps the banner to the new 3200x1600 exports (2x of the previous 1600x800, same
    composition).
  • Adds dark variants for the last light-only figures: the Vision + Text section and
    the Step 2 section. Every figure in the README now follows the reader color
    scheme through <picture>.

Verification

  • Reproduced the height rule locally at a 768px column: width="1000" height="500"
    renders 768x500 (ratio 1.536 against the natural 2.000); width="1000" alone
    renders 768x384 (ratio 2.000). A template match of the artwork in a live page
    screenshot agreed with the stretched case: 0.48 horizontal scale against 0.58
    vertical.
  • The two new dark figures are mapped by content, not by export order. OCR of the
    checked-in files: the parsing pair reads "Two tracks. One navigable memory.", the
    retrieval pair reads "Any agent. One memory contract."
  • Every local asset referenced by README.md resolves, and each dark/light pair
    shares one canvas (banner 3200x1600, diagrams 3200x1280, benchmark 3200x2240).
    git diff --check is clean.
  • Not tested here: the rendered README on github.com, which needs this PR's
    preview.

Deployment Notes

  • No environment variables, migrations, queue, or storage changes.
  • Image URLs move again: knowhere-banner-light.png and
    knowhere-banner-dark.png become .jpg at the same base names, and two
    -dark.png figures are added. External pages hot-linking the old PNG banner
    paths would break.
  • Rollback is reverting the commits.

Checklist

  • Tests were added or updated when behavior changed
  • Public docs, examples, or OpenAPI contracts were updated when needed
  • Database migrations are idempotent and safe to deploy
  • Logs, errors, and validation paths avoid leaking secrets or user data
  • The pull request description explains any breaking or user-visible change

GitHub markdown sets max-width: 100% on images but never height: auto, so an explicit height attribute keeps the box at that height while the width shrinks to the README column. The banner was the only image in the file carrying one, so it rendered 768x500 in the column instead of 768x384: the artwork and its headline came out 30% taller than designed.

Reproduced the rule locally at a 768px column: width+height renders 768x500 (ratio 1.536 against the natural 2.000), width alone renders 768x384 (ratio 2.000). A template match against the artwork on the live page agreed with the stretched case (0.48 horizontal scale, 0.58 vertical).

Dropping the attribute makes the banner behave like every other figure in the file, which set width only.
@suguanYang
suguanYang merged commit 11b9dd7 into main Sep 23, 2026
6 checks passed
@suguanYang suguanYang changed the title docs: stop stretching the README banner docs: finish the README dark-mode assets Sep 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant