Skip to content

Commit 5a06540

Browse files
birkskyumbirkskyum
authored
docs(solid-router): location-masking example (#5841)
* docs(solid-router): location-masking example * fix image links * link to eaxmple
1 parent 6805420 commit 5a06540

File tree

13 files changed

+527
-15
lines changed

13 files changed

+527
-15
lines changed

‎docs/router/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,10 @@
650650
"label": "Kitchen Sink + Solid Query (code-based)",
651651
"to": "framework/solid/examples/kitchen-sink-solid-query"
652652
},
653+
{
654+
"label": "Location Masking",
655+
"to": "framework/react/examples/location-masking"
656+
},
653657
{
654658
"label": "Authenticated Routes",
655659
"to": "framework/solid/examples/authenticated-routes"

‎examples/react/location-masking/src/main.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
useRouterState,
1414
} from '@tanstack/react-router'
1515
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
16-
import axios from 'redaxios'
1716
import * as Dialog from '@radix-ui/react-dialog'
1817
import type { ErrorComponentProps } from '@tanstack/react-router'
1918
import './styles.css'
@@ -31,25 +30,34 @@ class NotFoundError extends Error {}
3130
const fetchPhotos = async () => {
3231
console.info('Fetching photos...')
3332
await new Promise((r) => setTimeout(r, 500))
34-
return axios
35-
.get<Array<PhotoType>>('https://jsonplaceholder.typicode.com/photos')
36-
.then((r) => r.data.slice(0, 10))
33+
// Generate mock photos using picsum.photos since via.placeholder.com is down
34+
return Array.from({ length: 10 }, (_, i) => ({
35+
id: String(i + 1),
36+
title: `Photo ${i + 1}`,
37+
url: `https://picsum.photos/600/400?random=${i + 1}`,
38+
thumbnailUrl: `https://picsum.photos/200/200?random=${i + 1}`,
39+
albumId: '1',
40+
}))
3741
}
3842

3943
const fetchPhoto = async (photoId: string) => {
4044
console.info(`Fetching photo with id ${photoId}...`)
4145
await new Promise((r) => setTimeout(r, 500))
42-
const photo = await axios
43-
.get<PhotoType>(`https://jsonplaceholder.typicode.com/photos/${photoId}`)
44-
.then((r) => r.data)
45-
.catch((err) => {
46-
if (err.status === 404) {
47-
throw new NotFoundError(`Photo with id "${photoId}" not found!`)
48-
}
49-
throw err
50-
})
51-
52-
return photo
46+
47+
// Simulate photo not found for invalid IDs
48+
const photoIdNum = parseInt(photoId, 10)
49+
if (isNaN(photoIdNum) || photoIdNum < 1 || photoIdNum > 10) {
50+
throw new NotFoundError(`Photo with id "${photoId}" not found!`)
51+
}
52+
53+
// Generate mock photo using picsum.photos
54+
return {
55+
id: photoId,
56+
title: `Photo ${photoId}`,
57+
url: `https://picsum.photos/600/400?random=${photoId}`,
58+
thumbnailUrl: `https://picsum.photos/200/200?random=${photoId}`,
59+
albumId: '1',
60+
}
5361
}
5462

5563
type PhotoModal = {

‎examples/solid/location-masking/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/solid/location-masking/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/location-masking/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm start` or `yarn start`

‎examples/solid/location-masking/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/solid/location-masking/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "tanstack-router-solid-example-location-masking",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port 3000",
7+
"build": "vite build && tsc --noEmit",
8+
"serve": "vite preview",
9+
"start": "vite"
10+
},
11+
"dependencies": {
12+
"@tailwindcss/postcss": "^4.1.15",
13+
"@tanstack/solid-query": "^5.90.0",
14+
"@tanstack/solid-router": "^1.135.2",
15+
"@tanstack/solid-router-devtools": "^1.135.2",
16+
"postcss": "^8.5.1",
17+
"solid-js": "^1.9.10",
18+
"redaxios": "^0.5.1",
19+
"tailwindcss": "^4.1.15"
20+
},
21+
"devDependencies": {
22+
"vite-plugin-solid": "^2.11.10",
23+
"typescript": "^5.7.2",
24+
"vite": "^7.1.7"
25+
}
26+
}

‎examples/solid/location-masking/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

0 commit comments

Comments
 (0)