Skip to content

docs: use the dynamic README header endpoint - #11136

Open
AlemTuzlak wants to merge 2 commits into
mainfrom
readme-header-endpoint
Open

docs: use the dynamic README header endpoint#11136
AlemTuzlak wants to merge 2 commits into
mainfrom
readme-header-endpoint

Conversation

@AlemTuzlak

@AlemTuzlak AlemTuzlak commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

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> at
https://tanstack.com/api/readme/ instead of a committed PNG. The endpoint
renders 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

  • 5 README(s) updated.
  • Light and dark served through <picture>, per GitHub's guidance. The trailing <img> stays the light variant, as the fallback for renderers that ignore <picture> (npm, most editors).
  • Per-package READMEs pass ?framework= so each banner shows its own package name instead of the generic library name.
  • Deletes the now-unused media/header_query.png.

The package READMEs were pointing at media/repo-header.png, the GitHub social-preview image. That file stays where it is - only the README references change.

Verification

Every generated URL in this diff was requested against the live endpoint and
returned 200 image/png at 1800x450. git grep confirms no README still
references the old media/header_*.png path.

Heads up: deleting the committed PNG means npm pages for already-published
versions that embed the raw.githubusercontent.com/.../main/media/header_*.png
link will show a broken image, since that link is branch-pinned. New releases
pick up the endpoint URL.

Summary by CodeRabbit

  • Documentation
    • Updated project and package README headers with responsive artwork.
    • Added light- and dark-theme image variants that automatically match the viewer’s color scheme.
    • Improved image fallback metadata and sizing for consistent display across supported package documentation.

@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f6284e60-dcc5-49df-94be-9a2d301ea487

📥 Commits

Reviewing files that changed from the base of the PR and between 3b4866f and bbe65e4.

📒 Files selected for processing (2)
  • packages/lit-query/README.md
  • packages/vue-query/README.md

📝 Walkthrough

Walkthrough

The repository and package README headers now use responsive <picture> elements with dark- and light-theme remote images, descriptive alt text, and sizing or layout metadata.

Changes

README header images

Layer / File(s) Summary
Responsive README header images
README.md, packages/*/README.md
Static or missing header images are replaced or supplemented with theme-aware dark and light image sources. The banners include descriptive alt text and sizing or centering metadata where applicable.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: replacing committed README headers with a dynamic endpoint.
Description check ✅ Passed The description explains the changes, motivation, verification, and release impact, but it omits the template headings and checklist.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch readme-header-endpoint

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

@nx-cloud

nx-cloud Bot commented Aug 3, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit bbe65e4

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 5m 40s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-08-03 09:55:02 UTC

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@README.md`:
- Around line 4-18: Preserve the legacy media/header_query.png URL as a stable
asset or replacement, and ensure the README image references remain compatible
across README.md (lines 4-18), packages/angular-query-experimental/README.md
(lines 1-15), packages/preact-query/README.md (lines 3-17),
packages/react-query/README.md (lines 3-17), and packages/solid-query/README.md
(lines 3-17).
🪄 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: eb80d33d-ac05-48b4-9e2e-47bfe0c8f816

📥 Commits

Reviewing files that changed from the base of the PR and between 31c7f37 and 3b4866f.

⛔ Files ignored due to path filters (1)
  • media/header_query.png is excluded by !**/*.png
📒 Files selected for processing (5)
  • README.md
  • packages/angular-query-experimental/README.md
  • packages/preact-query/README.md
  • packages/react-query/README.md
  • packages/solid-query/README.md

Comment thread README.md
Comment on lines +4 to +18
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://tanstack.com/api/readme/query.png?theme=dark"
/>
<source
media="(prefers-color-scheme: light)"
srcset="https://tanstack.com/api/readme/query.png"
/>
<img
src="https://tanstack.com/api/readme/query.png"
alt="TanStack Query"
width="900"
/>
</picture>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Preserve the old header URL for published README compatibility.

Removing media/header_query.png breaks previously published npm README images. Keep the asset or provide a stable replacement at the old URL.

  • README.md#L4-L18: preserve compatibility for the repository README reference.
  • packages/angular-query-experimental/README.md#L1-L15: preserve compatibility for Angular Query releases.
  • packages/preact-query/README.md#L3-L17: preserve compatibility for Preact Query releases.
  • packages/react-query/README.md#L3-L17: preserve compatibility for React Query releases.
  • packages/solid-query/README.md#L3-L17: preserve compatibility for Solid Query releases.
📍 Affects 5 files
  • README.md#L4-L18 (this comment)
  • packages/angular-query-experimental/README.md#L1-L15
  • packages/preact-query/README.md#L3-L17
  • packages/react-query/README.md#L3-L17
  • packages/solid-query/README.md#L3-L17
🤖 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 `@README.md` around lines 4 - 18, Preserve the legacy media/header_query.png
URL as a stable asset or replacement, and ensure the README image references
remain compatible across README.md (lines 4-18),
packages/angular-query-experimental/README.md (lines 1-15),
packages/preact-query/README.md (lines 3-17), packages/react-query/README.md
(lines 3-17), and packages/solid-query/README.md (lines 3-17).

@pkg-pr-new

pkg-pr-new Bot commented Aug 3, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@11136

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@11136

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@11136

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@11136

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@11136

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@11136

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@11136

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@11136

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@11136

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@11136

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@11136

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@11136

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@11136

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@11136

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@11136

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@11136

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@11136

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@11136

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@11136

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@11136

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@11136

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@11136

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@11136

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@11136

commit: bbe65e4

@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.15 KB (0%)
react minimal 9.1 KB (0%)

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