Skip to content

Moving images inline and changing urls to relative #5072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tannerlinsley merged 4 commits into from
Sep 17, 2025
Merged

Moving images inline and changing urls to relative #5072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0e48e3
Adding Tutorial for Reading and Writing a File
shrutikapoor08 May 5, 2025
02c13a5
Moving images inline, changing url routes to relative
shrutikapoor08 Sep 3, 2025
8cbcee5
Merge branch 'main' of https://github.com/TanStack/router into skapoo…
shrutikapoor08 Sep 3, 2025
c4ff80a
ci: apply automated fixes
autofix-ci[bot] Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/router/assets/reading-writing-file-devjokes-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/router/assets/reading-writing-file-devjokes-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/router/assets/reading-writing-file-setup.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 37 additions & 8 deletions docs/start/framework/react/reading-writing-file.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ The complete code for this tutorial is available on [GitHub](https://github.com/

## Nice to know

- [Server Side Rendering (SSR)](https://tanstack.com/router/latest/docs/framework/react/guide/ssr)
- [TanStack Router concepts](https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts)
- [React Query concepts](https://tanstack.com/query/latest/docs/framework/react/overview)
- [Server Side Rendering (SSR)](/router/latest/docs/framework/react/guide/ssr)
- [TanStack Router concepts](/router/latest/docs/framework/react/routing/routing-concepts)
- [React Query concepts](/query/latest/docs/framework/react/overview)

## Setting up a TanStack Start Project

Expand Down Expand Up @@ -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 -

![TanStack Start Welcome Page After Setup](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746312482/Photo-1_lpechn.png)
![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 3, 2025

Choose a reason for hiding this comment

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

💡 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:

-![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
+![TanStack Start Welcome Page After Setup](/router/assets/reading-writing-file-setup.png)

🏁 Script executed:

#!/bin/bash
find . -type f -name 'reading-writing-file-setup.png'
grep -R "/router/assets" -n docs

Length 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:

-![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
+![TanStack Start Welcome Page After Setup](/router/assets/reading-writing-file-setup.png)
📝 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
![TanStack Start Welcome Page After Setup](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-setup.png)
![TanStack Start Welcome Page After Setup](/router/assets/reading-writing-file-setup.png)
🤖 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.


## Step 1: Reading Data From a File

Expand Down Expand Up @@ -164,7 +164,6 @@ Let's create a new file `src/serverActions/jokesActions.ts` to create a server f

```tsx
// src/serverActions/jokesActions.ts

import { createServerFn } from '@tanstack/react-start'
import * as fs from 'node:fs'
import type { JokesData } from '../types'
Expand Down Expand Up @@ -247,7 +246,7 @@ When the page loads, `jokes` will have data from the `jokes.json` file already!

With a little Tailwind styling, the app should look like this:

![DevJoke App with 5 DevJokes](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746313558/Screenshot_2025-05-03_at_4.04.50_PM_w0eern.png)
![DevJoke App with 5 DevJokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-1.jpg)

## Step 2: Writing Data to a File

Expand Down Expand Up @@ -445,7 +444,7 @@ export function JokeForm() {
```

With this, our UI should look like this:
![DevJoke App with Form to Add Jokes](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746356983/Screenshot_2025-05-04_at_4.06.57_AM_dkgvsm.png)
![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.jpg)
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 3, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Same: switch image to a site-relative asset URL.

-![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.jpg)
+![DevJoke App with Form to Add Jokes](/router/assets/reading-writing-file-devjokes-2.jpg)

🏁 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"
fi

Length 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.


## Understanding How It All Works Together

Expand All @@ -472,7 +471,37 @@ Let's break down how the different parts of our application work together:

### Data Flow

![Data Flow Diagram](https://res.cloudinary.com/dubc3wnbv/image/upload/v1746437057/Screenshot_2025-05-05_at_2.23.11_AM_wxfz2m.png)
```mermaid
sequenceDiagram
autonumber
actor User
participant UI as Browser (HomePage + Form)
participant Loader as Route Loader (loader)
participant Server
participant Store as jokes.json

%% Visiting the Home Page
User ->> UI: Visit /
UI ->> Loader: loader() calls getJokes()
Loader ->> Server: getJokes()
Server ->> Store: Read jokes.json
Store -->> Server: jokes data
Server -->> Loader: jokes[]
Loader -->> UI: useLoaderData() → jokes[]

%% Adding a New Joke
User ->> UI: Fill form and submit
UI ->> Server: handleSubmit → addJoke(newJoke)
Server ->> Store: Read jokes.json
Server ->> Store: Write updated jokes.json
Server -->> UI: addJoke() resolved
UI ->> Loader: router.invalidate() (re-run loader)
Loader ->> Server: getJokes()
Server ->> Store: Read jokes.json
Store -->> Server: updated jokes[]
Server -->> Loader: updated jokes[]
Loader -->> UI: useLoaderData() → updated jokes[]
```

When a user visits the home page:

Expand Down
Loading