Moving images inline and changing urls to relative #5072
Conversation
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
WalkthroughUpdated a React framework doc page by converting external links to relative paths, switching image assets to GitHub raw URLs, replacing a static data-flow image with a Mermaid sequence diagram, and revising a server action code snippet to generate UUIDs for new jokes. Minor formatting cleanup applied. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant R as Router (Client)
participant L as Loader (Home)
participant S as Server
participant FS as jokes.json
rect rgba(200,220,255,0.25)
note over U,R: Home page navigation
U->>R: Navigate to "/"
R->>L: invoke loader()
L->>S: GET jokes
S->>FS: read jokes.json
FS-->>S: jokes[]
S-->>L: jokes[]
L-->>R: loader data
R-->>U: Render home with jokes
end
rect rgba(220,255,220,0.25)
note over U,R: Add joke flow
U->>R: Submit "Add Joke"
R->>S: server action addJoke(payload)
S->>S: create { id: uuidv4(), ... }
S->>FS: write jokes.json
S-->>R: success
R->>R: router.invalidate() / refetch
R->>L: re-invoke loader()
L->>S: GET jokes (updated)
S->>FS: read jokes.json
FS-->>S: jokes[] (with new joke)
S-->>L: jokes[]
L-->>R: loader data
R-->>U: Updated list rendered
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
View your CI Pipeline Execution ↗ for commit c4ff80a
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-plugin
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-plugin
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-server-functions-client
@tanstack/start-server-functions-fetcher
@tanstack/start-server-functions-server
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/start/framework/react/reading-writing-file.md (1)
413-441: Form submit handler doesn’t prevent default; submitting will navigate/reload.onSubmit calls a handler that doesn’t receive the event or call preventDefault, which will break the demo flow.
Apply:
- const handleSubmit = async () => { + const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { + e.preventDefault() if (!question || !answer || isSubmitting) return try { setIsSubmitting(true) await addJoke({ data: { question, answer }, })And add the missing type import (outside this hunk):
-import { useState } from 'react' +import { useState, type FormEvent } from 'react'
🧹 Nitpick comments (1)
docs/start/framework/react/reading-writing-file.md (1)
474-504: Mermaid diagram reads well; align the call label with the actual function signature and confirm Mermaid rendering is enabled.
- In code, addJoke is called with an object
{ data: { question, answer } }. Update the diagram label for accuracy.- Please confirm the docs site has Mermaid enabled for code fences.
-UI ->> Server: handleSubmit → addJoke(newJoke) +UI ->> Server: handleSubmit → addJoke({ data })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
docs/router/assets/reading-writing-file-devjokes-1.pngis excluded by!**/*.pngdocs/router/assets/reading-writing-file-devjokes-2.pngis excluded by!**/*.pngdocs/router/assets/reading-writing-file-setup.pngis excluded by!**/*.png
📒 Files selected for processing (1)
docs/start/framework/react/reading-writing-file.md(5 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/start/framework/react/reading-writing-file.md
[grammar] ~29-~29: There might be a mistake here.
Context: ... to know - Server Side Rendering (SSR) - [TanStack Router concepts](/router/latest...
(QB_NEW_EN)
[grammar] ~30-~30: There might be a mistake here.
Context: ...t/guide/ssr) - TanStack Router concepts - [React Query concepts](/query/latest/docs...
(QB_NEW_EN)
🔇 Additional comments (2)
docs/start/framework/react/reading-writing-file.md (2)
29-31: Good switch to site-relative links; confirm paths resolve under the docs build.The root-relative URLs look right and avoid hard-coding the domain. Please just verify these resolve correctly in the deployed docs site navigation.
249-249: I’ve initiated a repository search to verify the presence and correct path of the asset.
| @@ -96,7 +96,7 @@ Once your project is set up, you can access your app at `localhost:3000`. You sh | |||
|
|
|||
| At this point, your app will look like this - | |||
|
|
|||
|  | |||
|  | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Use repo-local asset paths instead of raw.githubusercontent.com.
Using raw GitHub bypasses any docs-site CDN/optimizations and can break with CSP. Since assets live in the repo, prefer a site-relative path.
Apply:
-
+🏁 Script executed:
#!/bin/bash
find . -type f -name 'reading-writing-file-setup.png'
grep -R "/router/assets" -n docsLength of output: 1035
Use repo-local asset paths instead of raw.githubusercontent.com.
Replace the image URL at line 99 with a site-relative path:
-
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
|  | |
|  |
🤖 Prompt for AI Agents
In docs/start/framework/react/reading-writing-file.md around line 99, the image
uses a raw.githubusercontent.com absolute URL; replace it with a
repo-local/site-relative asset path (e.g., point to the image file under the
docs assets directory such as /docs/router/assets/reading-writing-file-setup.png
or the correct relative path from this markdown file) so the site builds and
serves the image from the repo instead of relying on raw.githubusercontent.com.
| @@ -445,7 +444,7 @@ | |||
| ``` | |||
|
|
|||
| With this, our UI should look like this: | |||
|  | |||
|  | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Same: switch image to a site-relative asset URL.
-
+🏁 Script executed:
#!/bin/bash
# Search for the asset file in the repository
rg -n "reading-writing-file-devjokes-2.jpg"Length of output: 247
🏁 Script executed:
#!/bin/bash
# Verify the asset file exists in the expected directory
if [ -f docs/router/assets/reading-writing-file-devjokes-2.jpg ]; then
echo "exists: docs/router/assets/reading-writing-file-devjokes-2.jpg"
else
echo "not found"
fiLength of output: 96
Add missing image asset or correct its path (docs/start/framework/react/reading-writing-file.md:447)
The file docs/router/assets/reading-writing-file-devjokes-2.jpg isn’t present; add it there (or update the URL to the correct existing location) before switching the Markdown to a site-relative path.
🤖 Prompt for AI Agents
In docs/start/framework/react/reading-writing-file.md around line 447, the
referenced image path docs/router/assets/reading-writing-file-devjokes-2.jpg is
missing; either add the image file at that exact path in the repository or
update the Markdown to point to the correct existing asset path (or a remote
URL). After placing the image or correcting the path, verify the link works
locally and then convert the Markdown image reference to a site-relative path if
required.
brenelz
approved these changes
Sep 5, 2025
|
Waiting on this Tanstack.com pr before merge |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Incorporating feedback from PR - #4089. Changes made -
assetsfolder on suggestionSummary by CodeRabbit
Bug Fixes
Documentation