Skip to content

Commit 4b373d9

Browse files
DamianOsipiukDamianOsipiuk
committedJul 19, 2023
fix: initial reader of docs unblocked, old adapter pages redirect
1 parent bd4bc36 commit 4b373d9

File tree

5 files changed

+103
-77
lines changed

5 files changed

+103
-77
lines changed
 

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"semi": false
4+
}

‎app/components/RedirectVersionBanner.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Link, useLocation } from '@remix-run/react'
2+
import { useLocalStorage } from '~/utils/useLocalStorage'
3+
import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
4+
5+
export function RedirectVersionBanner(props: {
6+
currentVersion: string
7+
latestVersion: string
8+
}) {
9+
const location = useLocation()
10+
11+
// After user clicks hide, do not show modal for a month, and then remind users that there is a new version!
12+
const [showModal, setShowModal] = useLocalStorage(
13+
'showRedirectToLatestModal',
14+
true,
15+
1000 * 60 * 24 * 30
16+
)
17+
18+
const isLowerVersion =
19+
Number(props.currentVersion) < Number(props.latestVersion[1])
20+
const redirectTarget = location.pathname.replace(
21+
`v${props.currentVersion}`,
22+
'latest'
23+
)
24+
25+
if (!useClientOnlyRender()) {
26+
return null
27+
}
28+
29+
return (
30+
<>
31+
{isLowerVersion && showModal ? (
32+
<div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
33+
<div>
34+
You are currently reading <strong>v{props.currentVersion}</strong>{' '}
35+
docs. Redirect to{' '}
36+
<a href={redirectTarget} className="font-bold underline">
37+
latest
38+
</a>{' '}
39+
version?
40+
</div>
41+
<Link
42+
to={redirectTarget}
43+
replace
44+
className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
45+
>
46+
Latest
47+
</Link>
48+
<button
49+
onClick={() => setShowModal(false)}
50+
className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
51+
>
52+
Hide
53+
</button>
54+
</div>
55+
) : null}
56+
</>
57+
)
58+
}

‎app/routes/query/$.tsx

-16
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,6 @@ export const loader = (context: LoaderArgs) => {
99

1010
export function handleRedirectsFromV3(context: LoaderArgs) {
1111
const url = new URL(context.request.url);
12-
13-
// Redirect old `adapters` pages
14-
const adaptersRedirects = [
15-
{from: "docs/react/adapters/vue-query", to: "docs/vue/overview"},
16-
{from: "docs/react/adapters/solid-query", to: "docs/solid/overview"},
17-
{from: "docs/react/adapters/svelte-query", to: "docs/svelte/overview"},
18-
]
19-
20-
adaptersRedirects.forEach((item) => {
21-
if (url.pathname.startsWith(`/query/v4/${item.from}`)) {
22-
throw redirect(
23-
`/query/latest/${item.to}`,
24-
301
25-
);
26-
}
27-
});
2812

2913
// Redirect old query v3 docs
3014
// prettier-ignore

‎app/routes/query/$version.tsx

+27-61
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,43 @@
1-
import { Link, Outlet, useLocation, useSearchParams } from "@remix-run/react";
2-
import { json } from "@remix-run/node";
3-
import type { LoaderArgs } from "@remix-run/node";
4-
import { DefaultErrorBoundary } from "~/components/DefaultErrorBoundary";
5-
import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
6-
import { fetchRepoFile } from "~/utils/documents.server";
7-
import { useLocalStorage } from "~/utils/useLocalStorage";
8-
import { useClientOnlyRender } from "~/utils/useClientOnlyRender";
9-
import { repo, getBranch, latestVersion } from "~/routes/query";
1+
import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
2+
import { json } from '@remix-run/node'
3+
import type { LoaderArgs } from '@remix-run/node'
4+
import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
5+
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
6+
import { fetchRepoFile } from '~/utils/documents.server'
7+
import { repo, getBranch, latestVersion } from '~/routes/query'
8+
import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
109

1110
export const loader = async (context: LoaderArgs) => {
12-
const branch = getBranch(context.params.version);
13-
const config = await fetchRepoFile(repo, branch, `docs/config.json`);
11+
const branch = getBranch(context.params.version)
12+
const config = await fetchRepoFile(repo, branch, `docs/config.json`)
1413

1514
if (!config) {
16-
throw new Error("Repo docs/config.json not found!");
15+
throw new Error('Repo docs/config.json not found!')
1716
}
1817

19-
return json(JSON.parse(config));
20-
};
18+
return json(JSON.parse(config))
19+
}
2120

22-
export const ErrorBoundary = DefaultErrorBoundary;
23-
export const CatchBoundary = DefaultCatchBoundary;
21+
export const ErrorBoundary = DefaultErrorBoundary
22+
export const CatchBoundary = DefaultCatchBoundary
2423

2524
export default function RouteVersionParam() {
26-
// After user clicks hide, do not show modal for a month, and then remind users that there is a new version!
27-
const [showModal, setShowModal] = useLocalStorage(
28-
"showRedirectToLatestModal",
29-
true,
30-
1000 * 60 * 24 * 30
31-
);
32-
const location = useLocation();
33-
const [params] = useSearchParams();
34-
35-
const showV3Redirect = params.get("from") === "reactQueryV3";
36-
const original = params.get("original");
25+
const location = useLocation()
26+
const [params] = useSearchParams()
3727

38-
const version = location.pathname.match(/\/query\/v(\d)/)?.[1] || "999";
39-
const isLowerVersion = Number(version) < Number(latestVersion[1]);
40-
const redirectTarget = location.pathname.replace(`v${version}`, "latest");
28+
const showV3Redirect = params.get('from') === 'reactQueryV3'
29+
const original = params.get('original')
4130

42-
if (!useClientOnlyRender()) {
43-
return null;
44-
}
31+
const version = location.pathname.match(/\/query\/v(\d)/)?.[1] || '999'
4532

4633
return (
4734
<>
4835
{showV3Redirect ? (
4936
<div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
5037
<div>
51-
Looking for the{" "}
38+
Looking for the{' '}
5239
<a
53-
href={original || "/query/latest"}
40+
href={original || '/query/latest'}
5441
className="font-bold underline"
5542
>
5643
React Query v3 documentation
@@ -66,32 +53,11 @@ export default function RouteVersionParam() {
6653
</Link>
6754
</div>
6855
) : null}
69-
{isLowerVersion && showModal ? (
70-
<div className="p-4 bg-blue-500 text-white flex items-center justify-center gap-4">
71-
<div>
72-
You are currently reading <strong>v{version}</strong> docs. Redirect
73-
to{" "}
74-
<a href={redirectTarget} className="font-bold underline">
75-
latest
76-
</a>{" "}
77-
version?
78-
</div>
79-
<Link
80-
to={redirectTarget}
81-
replace
82-
className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
83-
>
84-
Latest
85-
</Link>
86-
<button
87-
onClick={() => setShowModal(false)}
88-
className="bg-white text-black py-1 px-2 rounded-md uppercase font-black text-xs"
89-
>
90-
Hide
91-
</button>
92-
</div>
93-
) : null}
56+
<RedirectVersionBanner
57+
currentVersion={version}
58+
latestVersion={latestVersion}
59+
/>
9460
<Outlet />
9561
</>
96-
);
62+
)
9763
}

‎app/routes/query/$version/docs/$framework/$.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Doc } from '~/components/Doc'
1919

2020
export const loader = async (context: LoaderArgs) => {
2121
const { '*': docsPath, framework, version } = context.params
22+
const url = new URL(context.request.url)
2223

2324
// When first path part after docs does not contain framework name, add `react`
2425
if (
@@ -30,6 +31,19 @@ export const loader = async (context: LoaderArgs) => {
3031
throw redirect(context.request.url.replace(/\/docs\//, '/docs/react/'))
3132
}
3233

34+
// Redirect old `adapters` pages
35+
const adaptersRedirects = [
36+
{ from: 'docs/react/adapters/vue-query', to: 'docs/vue/overview' },
37+
{ from: 'docs/react/adapters/solid-query', to: 'docs/solid/overview' },
38+
{ from: 'docs/react/adapters/svelte-query', to: 'docs/svelte/overview' },
39+
]
40+
41+
adaptersRedirects.forEach((item) => {
42+
if (url.pathname.startsWith(`/query/v4/${item.from}`)) {
43+
throw redirect(`/query/latest/${item.to}`, 301)
44+
}
45+
})
46+
3347
if (!docsPath) {
3448
throw new Error('Invalid docs path')
3549
}

0 commit comments

Comments
 (0)
Please sign in to comment.