docs: use the dynamic README header endpoint - #6505
Conversation
📝 WalkthroughWalkthroughREADME header images across the repository now use responsive ChangesREADME header updates
Estimated code review effort: 1 (Trivial) | ~5 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/match-sorter-utils/README.md`:
- Around line 5-13: Update the README header image block to use an available
package-specific match-sorter-utils header URL, including the established
framework query parameter when supported; otherwise retain the generic image
URLs but change the img alt text from “TanStack Table” to accurately describe
`@tanstack/match-sorter-utils`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 32d971e5-25a0-4f55-a9ba-8f1daafdd17e
📒 Files selected for processing (18)
README.mdpackages/alpine-table/README.mdpackages/angular-table/README.mdpackages/ember-table/README.mdpackages/lit-table/README.mdpackages/match-sorter-utils/README.mdpackages/octane-table/README.mdpackages/preact-table-devtools/README.mdpackages/preact-table/README.mdpackages/react-table-devtools/README.mdpackages/react-table/README.mdpackages/solid-table-devtools/README.mdpackages/solid-table/README.mdpackages/svelte-table/README.mdpackages/table-core/README.mdpackages/table-devtools/README.mdpackages/vue-table-devtools/README.mdpackages/vue-table/README.md
| srcset="https://tanstack.com/api/readme/table.png?theme=dark" | ||
| /> | ||
| <source | ||
| media="(prefers-color-scheme: light)" | ||
| srcset="https://tanstack.com/api/readme/table.png" | ||
| /> | ||
| <img | ||
| src="https://tanstack.com/api/readme/table.png" | ||
| alt="TanStack Table" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'Repository files matching README names:\n'
git ls-files | grep -E '(^|/)README\.md$' | sed -n '1,80p'
printf '\nTarget README contents lines 1-30:\n'
if [ -f packages/match-sorter-utils/README.md ]; then
cat -n packages/match-sorter-utils/README.md | sed -n '1,40p'
else
echo 'packages/match-sorter-utils/README.md not found'
fi
printf '\nPattern for package README headers in repo:\n'
rg -n 'framework=match-sorter-utils|framework=table|srcset="https://tanstack\.com/api/readme/table\.png|alt="TanStack' packages -g 'README.md' | sed -n '1,200p'Repository: TanStack/table
Length of output: 7654
🌐 Web query:
TanStack documentation static readme images framework table.png
💡 Result:
The TanStack Table repository uses various images in its documentation, including header images often located in a /media directory within the source code [1][2]. Specific images like table.png have appeared in the repository's README or media assets, such as header_table.png [1], though these file names may change or be updated alongside the library's evolution. Because TanStack Table is a headless library, it does not mandate a specific UI, so images in the documentation generally serve to demonstrate the library's branding or common usage patterns rather than required UI components [3][4][5]. If you are looking for specific assets, they are typically found in the repository under the media/ folder [1], or hosted as public assets for use in the documentation at tanstack.com [1]. Note that older versions (e.g., React Table v6) used different branding, such as logo-react-table.png [6][7].
Citations:
- 1: https://github.com/TanStack/table/blob/4eabb0f6187dbafd9b84141d373b9416e2e6962d/README.md
- 2: https://github.com/TanStack-dev/table
- 3: https://github.com/TanStack/table/blob/main/README.md
- 4: https://tanstack.com/table/v8
- 5: https://tanstack.com/table/latest
- 6: https://github.com/TanStack/table/blob/v6.8.6/src/hoc/README.md
- 7: https://github.com/kayak/react-table/blob/master/README.md
Use an available package-specific header for @tanstack/match-sorter-utils.
The README currently uses the generic Table header URLs and alt="TanStack Table", which makes this package README inconsistent with other TanStack Table packages that include framework= in their header URLs. Use a supported match-sorter-utils header URL if one is provided; otherwise keep the generic header but change the alt text so the image describes its package.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/match-sorter-utils/README.md` around lines 5 - 13, Update the README
header image block to use an available package-specific match-sorter-utils
header URL, including the established framework query parameter when supported;
otherwise retain the generic image URLs but change the img alt text from
“TanStack Table” to accurately describe `@tanstack/match-sorter-utils`.
2 participants
Adopts the dynamic README header endpoint added in TanStack/tanstack.com#1076,
which is merged and live.
Every README banner in this repo now points a
<picture>athttps://tanstack.com/api/readme/instead of a committed PNG. The endpointrenders 1800x450 in light and dark, so a branding change lands in every README
at once and dark-mode readers get a dark banner.
What changed
<picture>, per GitHub's guidance. The trailing<img>stays the light variant, as the fallback for renderers that ignore<picture>(npm, most editors).?framework=so each banner shows its own package name instead of the generic library name.There is no
media/header_table.pngonbeta, so every one of these 18 READMEs was showing a broken image. This fixes that.Verification
Every generated URL in this diff was requested against the live endpoint and
returned
200 image/pngat 1800x450.git grepconfirms no README stillreferences the old
media/header_*.pngpath.Heads up: deleting the committed PNG means npm pages for already-published
versions that embed the
raw.githubusercontent.com/.../main/media/header_*.pnglink will show a broken image, since that link is branch-pinned. New releases
pick up the endpoint URL.
Summary by CodeRabbit