13 | {doc.headings.length > 3 ? (
14 | <>
15 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/app/components/docs-footer.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router";
2 | import { useDoc } from "~/hooks/use-doc";
3 | import iconsHref from "~/icons.svg";
4 | import { useHeaderData } from "./docs-header/use-header-data";
5 |
6 | export function Footer() {
7 | return (
8 |
27 |
34 |
28 |
32 |
33 |
9 |
30 | );
31 | }
32 |
33 | function EditLink() {
34 | let doc = useDoc();
35 | let { ref } = useHeaderData();
36 |
37 | let isEditableRef = ref === "main" || ref === "dev";
38 |
39 | if (!doc || !isEditableRef || !doc.filename) {
40 | return null;
41 | }
42 |
43 | let editUrl: string;
44 | let repoUrl = "https://github.com/remix-run/react-router";
45 | if (doc.filename.match(/\.tsx?$/)) {
46 | editUrl = `${repoUrl}/edit/${ref}/${doc.filename}`;
47 | } else {
48 | editUrl = `${repoUrl}/edit/${ref}/${doc.slug}.md`;
49 | }
50 |
51 | return (
52 |
53 | Edit
54 |
57 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/app/components/docs-header/data.server.ts:
--------------------------------------------------------------------------------
1 | import { getRepoBranches, getRepoTags } from "~/modules/gh-docs/.server";
2 | import {
3 | getLatestV6Version,
4 | getLatestVersion,
5 | } from "~/modules/gh-docs/.server/tags";
6 |
7 | export type HeaderData = Awaited
10 |
26 |
11 |
12 | Brand Assets
13 |
14 |
15 | •
16 |
17 | Docs and examples{" "}
18 |
22 | CC 4.0
23 |
24 |
25 |
27 |
29 |
11 |
24 | );
25 | }
26 |
27 | function LogoLink() {
28 | let navigate = useNavigate();
29 | return (
30 | {
34 | event.preventDefault();
35 | navigate("/brand");
36 | }}
37 | >
38 |
44 |
45 | );
46 | }
47 | function ExternalLinks() {
48 | return (
49 |
12 |
17 |
18 |
14 |
16 |
19 |
23 |
50 |
65 | );
66 | }
67 |
68 | function HeaderSvgLink({
69 | className = "",
70 | href,
71 | svgId,
72 | svgLabel,
73 | svgSize,
74 | title,
75 | }: {
76 | className?: string;
77 | href: string;
78 | svgId: string;
79 | svgLabel: string;
80 | svgSize: string;
81 | title?: string;
82 | }) {
83 | const [width, height] = svgSize.split("x");
84 |
85 | return (
86 |
94 |
100 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/app/components/docs-header/use-header-data.ts:
--------------------------------------------------------------------------------
1 | import { useLoaderData } from "react-router";
2 | import type { HeaderData } from "./data.server";
3 | import invariant from "tiny-invariant";
4 |
5 | export function useHeaderData() {
6 | let data = useLoaderData() as { header: HeaderData };
7 | invariant(data && data.header, "Expected `header` in loader data");
8 | return data.header;
9 | }
10 |
--------------------------------------------------------------------------------
/app/components/docs-menu/data.server.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getRepoDocsMenu,
3 | getRepoDocsReferenceMenu,
4 | } from "~/modules/gh-docs/.server";
5 |
6 | export type DocsMenu = Awaited
12 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/app/components/docs-menu/menu-mobile.tsx:
--------------------------------------------------------------------------------
1 | import iconsHref from "~/icons.svg";
2 | import { useDoc } from "~/hooks/use-doc";
3 | import { DetailsMenu } from "~/modules/details-menu";
4 |
5 | export function NavMenuMobile({ children }: { children?: React.ReactNode }) {
6 | let doc = useDoc();
7 |
8 | return (
9 | {children}
13 |
15 |
18 |
21 |
22 |
23 | {doc ? doc.attrs.title : "Navigation"}
24 |
25 |
27 | {children}
28 |
29 |
57 |
58 |
79 | );
80 | }
81 |
82 | export function SmallOnThisPage({ doc }: { doc: Doc }) {
83 | return (
84 | -
59 | {doc.headings.map((heading, i) => (
60 |
- 64 | 75 | 76 | ))} 77 |
85 |
86 |
96 |
111 | );
112 | }
113 |
--------------------------------------------------------------------------------
/app/components/package-select.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import { Link, useParams } from "react-router";
3 |
4 | import iconsHref from "~/icons.svg";
5 | import { DetailsMenu } from "~/modules/details-menu";
6 | import { DetailsPopup } from "./details-popup";
7 | import { PopupLabel } from "./popup-label";
8 | import type { Pkg } from "~/components/docs-menu/data.server";
9 |
10 | export function PackageSelect({ pkgs }: { pkgs: Pkg[] }) {
11 | let { pkg } = useParams();
12 |
13 | let pkgName = pkg === "react-router" ? pkg : `@react-router/${pkg}`;
14 |
15 | return (
16 |
86 |
87 |
90 |
93 |
94 | On this page
95 |
96 | -
97 | {doc.headings.map((heading, i) => (
98 |
- 102 | 107 | 108 | ))} 109 |
25 |
35 |
4 | {label}
5 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/app/components/version-nav.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router";
2 | import { VersionSelect } from "./version-select";
3 | import { useHeaderData } from "./docs-header/use-header-data";
4 |
5 | export function VersionNav() {
6 | let { hasAPIDocs, apiDocsRef } = useHeaderData();
7 |
8 | return (
9 |
10 | {hasAPIDocs ? (
11 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/app/components/version-select.tsx:
--------------------------------------------------------------------------------
1 | import iconsHref from "~/icons.svg";
2 | import { DetailsMenu } from "~/modules/details-menu";
3 | import { DetailsPopup } from "./details-popup";
4 | import { PopupLabel } from "./popup-label";
5 | import { Link, useParams } from "react-router";
6 | import classNames from "classnames";
7 | import { useHeaderData } from "./docs-header/use-header-data";
8 | import { useNavigation } from "~/hooks/use-navigation";
9 |
10 | export function VersionSelect() {
11 | let { versions, latestVersion, releaseBranch, branches, currentGitHubRef } =
12 | useHeaderData();
13 | let { "*": splat } = useParams();
14 |
15 | let slug = "";
16 | if (splat && !currentGitHubRef.startsWith("6")) {
17 | slug = splat?.replace(new RegExp(`^${currentGitHubRef}/`), "");
18 | }
19 |
20 | // This is the same default, hover, focus style as the ColorScheme trigger
21 | const className =
22 | "border border-transparent bg-gray-100 hover:bg-gray-200 focus:border focus:border-gray-100 focus:bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:border-gray-400 dark:focus:bg-gray-700";
23 |
24 | let label = currentGitHubRef === releaseBranch ? "latest" : currentGitHubRef;
25 | return (
26 |
12 |
21 | ) : (
22 | {label}
35 |
38 |
16 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/app/hooks/README.md:
--------------------------------------------------------------------------------
1 | These hooks are specific to this app
2 |
--------------------------------------------------------------------------------
/app/hooks/use-delayed-value.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useDelayedValue
17 | {warning}.{" "}
18 |
19 | View latest
20 |
21 |
22 | ` component that's intended to be used as a menu (a bit
6 | * like a menu-button).
7 | */
8 | export let DetailsMenu = React.forwardRef<
9 | HTMLDetailsElement,
10 | React.ComponentPropsWithRef<"details">
11 | >(({ ...props }, forwardedRef) => {
12 | let { onToggle, onMouseDown, onTouchStart, onFocus, open, ...rest } = props;
13 | let [isOpen, setIsOpen] = React.useState(false);
14 | let location = useLocation();
15 | let navigation = useNavigation();
16 | let clickRef = React.useRef(false);
17 | let focusRef = React.useRef(false);
18 |
19 | React.useEffect(() => {
20 | if (navigation.formData) {
21 | setIsOpen(false);
22 | }
23 | }, [navigation]);
24 |
25 | React.useEffect(() => {
26 | setIsOpen(false);
27 | }, [location.key]);
28 |
29 | React.useEffect(() => {
30 | if (isOpen) {
31 | let clickHandler = () => {
32 | if (!clickRef.current) setIsOpen(false);
33 | clickRef.current = false;
34 | };
35 | let focusHandler = () => {
36 | if (!focusRef.current) setIsOpen(false);
37 | focusRef.current = false;
38 | };
39 | document.addEventListener("mousedown", clickHandler);
40 | document.addEventListener("touchstart", clickHandler);
41 | document.addEventListener("focusin", focusHandler);
42 | return () => {
43 | document.removeEventListener("mousedown", clickHandler);
44 | document.removeEventListener("touchstart", clickHandler);
45 | document.removeEventListener("focusin", focusHandler);
46 | };
47 | }
48 | }, [isOpen]);
49 |
50 | return (
51 |
{
55 | if (onToggle) onToggle(event);
56 | if (event.defaultPrevented) return;
57 | setIsOpen(event.currentTarget.open);
58 | }}
59 | onMouseDown={(event) => {
60 | if (onMouseDown) onMouseDown(event);
61 | if (event.defaultPrevented) return;
62 | if (isOpen) clickRef.current = true;
63 | }}
64 | onTouchStart={(event) => {
65 | if (onTouchStart) onTouchStart(event);
66 | if (event.defaultPrevented) return;
67 | if (isOpen) clickRef.current = true;
68 | }}
69 | onFocus={(event) => {
70 | if (onFocus) onFocus(event);
71 | if (event.defaultPrevented) return;
72 | if (isOpen) focusRef.current = true;
73 | }}
74 | {...rest}
75 | />
76 | );
77 | });
78 |
79 | DetailsMenu.displayName = "DetailsMenu";
80 |
--------------------------------------------------------------------------------
/app/modules/docsearch.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createContext,
3 | use,
4 | useCallback,
5 | useMemo,
6 | useRef,
7 | useState,
8 | } from "react";
9 | import { createPortal } from "react-dom";
10 | import { useMatches } from "react-router";
11 | import type { DocSearchProps } from "@docsearch/react";
12 | import {
13 | DocSearchModal as OriginalDocSearchModal,
14 | DocSearchButton as OriginalDocSearchButton,
15 | useDocSearchKeyboardEvents,
16 | } from "@docsearch/react";
17 | import type { HeaderData } from "~/components/docs-header/data.server";
18 |
19 | let docSearchProps = {
20 | appId: "RB6LOUCOL0",
21 | indexName: "reactrouter",
22 | apiKey: "b50c5d7d9f4610c9785fa945fdc97476",
23 | } satisfies DocSearchProps;
24 |
25 | const DocSearchContext = createContext<{
26 | onOpen: () => void;
27 | searchButtonRef: React.RefObject;
28 | } | null>(null);
29 |
30 | /**
31 | * DocSearch but only the modal accessible by keyboard command
32 | * Intended for people instinctively pressing cmd+k on a non-doc page
33 | *
34 | * If you need a DocSearch button to appear, use the DocSearch component
35 | * Modified from https://github.com/algolia/docsearch/blob/main/packages/docsearch-react/src/DocSearch.tsx
36 | */
37 | export function DocSearch({ children }: { children: React.ReactNode }) {
38 | const searchButtonRef = useRef(null);
39 | const [isOpen, setIsOpen] = useState(false);
40 |
41 | const onOpen = useCallback(() => {
42 | setIsOpen(true);
43 | }, [setIsOpen]);
44 |
45 | const onClose = useCallback(() => {
46 | setIsOpen(false);
47 | }, [setIsOpen]);
48 |
49 | const onInput = useCallback(() => {
50 | setIsOpen(true);
51 | }, [setIsOpen]);
52 |
53 | useDocSearchKeyboardEvents({
54 | isOpen,
55 | onOpen,
56 | onClose,
57 | onInput,
58 | // @ts-expect-error docsearch types are not updated for react 19
59 | searchButtonRef,
60 | });
61 |
62 | const contextValue = useMemo(
63 | () => ({
64 | onOpen,
65 | searchButtonRef,
66 | }),
67 | [onOpen, searchButtonRef],
68 | );
69 |
70 | const version = useDocSearchFacetVersion();
71 |
72 | return (
73 |
74 | {children}
75 | {isOpen
76 | ? createPortal(
77 | "Filtering and Faceting" > "Facets"
82 | searchParameters={{
83 | facetFilters: [`version:${version}`],
84 | }}
85 | {...docSearchProps}
86 | />,
87 | document.body,
88 | )
89 | : null}
90 |
91 | );
92 | }
93 |
94 | export function DocSearchButton() {
95 | const docSearchContext = use(DocSearchContext);
96 |
97 | if (!docSearchContext) {
98 | throw new Error("DocSearch must be used within a DocSearchModal");
99 | }
100 |
101 | const { onOpen, searchButtonRef } = docSearchContext;
102 |
103 | return ;
13 | }
14 |
15 | global.branchesCache ??= new LRUCache({
16 | // let branchesCache = new LRUCache({
17 | max: 3,
18 | ttl: 1000 * 60 * 5, // 5 minutes, so we can see new tags quickly
19 | allowStale: true,
20 | noDeleteOnFetchRejection: true,
21 | fetchMethod: async (key) => {
22 | console.log("Fetching fresh branches", key);
23 | let [owner, repo] = key.split("/");
24 | const { data } = await octokit.rest.repos.listBranches({
25 | mediaType: { format: "json" },
26 | owner,
27 | repo,
28 | per_page: 100,
29 | });
30 | return data.map((branch: { name: string }) => branch.name);
31 | },
32 | });
33 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/compat-tokens.ts:
--------------------------------------------------------------------------------
1 | import type { Plugin } from "unified";
2 | import type { Root, Paragraph, Text, HTML } from "mdast";
3 | import type { Element } from "hast";
4 | import { visit } from "unist-util-visit";
5 | import { fromHtml } from "hast-util-from-html";
6 | import { toHtml } from "hast-util-to-html";
7 |
8 | interface CompatOptions {
9 | baseUrl?: string;
10 | }
11 |
12 | function createCompatList(
13 | availableItems: string[],
14 | baseUrl: string = "../../start/modes",
15 | ): Element {
16 | const html = `
17 | {
27 | let fixturePath = path.join(__dirname, "__fixture__");
28 | let writePath = path.join(fixturePath, "tar.tgz");
29 | await tar.c({ gzip: true, file: writePath }, [fixturePath]);
30 | return fs.createReadStream(writePath);
31 | }
32 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/github.ts:
--------------------------------------------------------------------------------
1 | import { Octokit } from "octokit";
2 |
3 | const GH_TOKEN = process.env.GH_TOKEN!;
4 |
5 | const env = process.env.NODE_ENV;
6 |
7 | if (env !== "test" && !GH_TOKEN) {
8 | if (env === "production") {
9 | throw new Error("No GH_TOKEN provided");
10 | }
11 | console.warn(
12 | "\nNo GH_TOKEN provided. You can increase the rate limit from 60/hr to 1000/hr by adding a token to your .env file.\n",
13 | );
14 | }
15 |
16 | const octokit = new Octokit({ auth: GH_TOKEN });
17 |
18 | export { octokit };
19 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/index.ts:
--------------------------------------------------------------------------------
1 | import { getDoc, getMenu } from "./docs";
2 | import { getBranches } from "./branches";
3 | import { getReferenceAPI } from "./reference-docs";
4 | import { getLatestVersion, getTags } from "./tags";
5 | import invariant from "tiny-invariant";
6 | import semver from "semver";
7 |
8 | export { getRepoTarballStream } from "./repo-tarball";
9 |
10 | export type { Doc } from "./docs";
11 |
12 | const REPO = process.env.SOURCE_REPO!;
13 | if (!REPO) throw new Error("Missing process.env.SOURCE_REPO");
14 |
15 | export function getRepoTags() {
16 | return getTags(REPO);
17 | }
18 |
19 | export function getRepoBranches() {
20 | return getBranches(REPO);
21 | }
22 |
23 | export async function getLatestRepoTag(): Promise {
24 | let tags = await getTags(REPO);
25 | invariant(tags, "Expected tags in getLatestRepoTag");
26 | return getLatestVersion(tags);
27 | }
28 |
29 | export function getRepoDocsMenu(ref: string, lang: string) {
30 | return getMenu(REPO, fixupRefName(ref), lang);
31 | }
32 |
33 | export async function getRepoDocsReferenceMenu(ref: string) {
34 | const api = await getReferenceAPI(REPO, ref);
35 | return api.getReferenceNav();
36 | }
37 |
38 | export function getRepoDoc(ref: string, slug: string) {
39 | return getDoc(REPO, fixupRefName(ref), slug);
40 | }
41 |
42 | export async function getRepoReferenceDoc(
43 | ref: string,
44 | pkgName: string,
45 | qualifiedName: string,
46 | ) {
47 | const api = await getReferenceAPI(REPO, ref);
48 | return api.getDoc(pkgName, qualifiedName);
49 | }
50 |
51 | export async function getPackageIndexDoc(ref: string, pkgName: string) {
52 | const api = await getReferenceAPI(REPO, ref);
53 | return api.getPackageIndexDoc(pkgName);
54 | }
55 |
56 | function fixupRefName(ref: string) {
57 | if (["dev", "main", "release-next", "local"].includes(ref)) {
58 | return ref;
59 | }
60 |
61 | // pre changesets, tags were like v6.2.0, so add a "v" to the ref from the URL
62 | if (semver.lt(ref, "6.4.0")) {
63 | return `v${ref}`;
64 | }
65 |
66 | // add react-router@ because that's what the tags are called after changesets
67 | return `react-router@${ref}`;
68 | }
69 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/repo-content.ts:
--------------------------------------------------------------------------------
1 | import fsp from "fs/promises";
2 | import invariant from "tiny-invariant";
3 | import path from "path";
4 |
5 | /**
6 | * Fetches the contents of a file in a repository or from your local disk.
7 | *
8 | * @param ref The GitHub ref, use `"local"` for local docs development
9 | * @param filepath The filepath inside the repo (including "docs/")
10 | * @returns The text of the file
11 | */
12 | export async function getRepoContent(
13 | repoPair: string,
14 | ref: string,
15 | filepath: string,
16 | ): Promise {
17 | if (ref === "local") return getLocalContent(filepath);
18 | let [owner, repo] = repoPair.split("/");
19 | let pathname = `/${owner}/${repo}/${ref}/${filepath}`;
20 | let response = await fetch(
21 | new URL(pathname, "https://raw.githubusercontent.com/").href,
22 | { headers: { "User-Agent": `docs:${owner}/${repo}` } },
23 | );
24 | if (!response.ok) return null;
25 | return response.text();
26 | }
27 |
28 | /**
29 | * Reads a single file from your local source repository
30 | */
31 | async function getLocalContent(filepath: string): Promise {
32 | invariant(
33 | process.env.LOCAL_REPO_RELATIVE_PATH,
34 | "Expected LOCAL_REPO_RELATIVE_PATH",
35 | );
36 | let localFilePath = path.join(process.env.LOCAL_REPO_RELATIVE_PATH, filepath);
37 | let content = await fsp.readFile(localFilePath);
38 | return content.toString();
39 | }
40 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/repo-tarball.ts:
--------------------------------------------------------------------------------
1 | import followRedirects from "follow-redirects";
2 | import fs from "fs";
3 | import invariant from "tiny-invariant";
4 | import path from "path";
5 | import tar from "tar";
6 |
7 | /**
8 | * Fetches a repo tarball from GitHub or your local repo as a tarball in
9 | * development.
10 | *
11 | * @param ref GitHub ref (main, v6.0.0, etc.) use "local" for local repo.
12 | * @returns The repo tarball
13 | */
14 | export async function getRepoTarballStream(
15 | repo: string,
16 | ref: string,
17 | ): Promise {
18 | if (ref === "local") {
19 | return getLocalTarballStream();
20 | }
21 |
22 | let agent = new followRedirects.https.Agent({ keepAlive: true });
23 | let tarballURL = `https://github.com/${repo}/archive/${ref}.tar.gz`;
24 | let { hostname, pathname } = new URL(tarballURL);
25 | let options = { agent: agent, hostname: hostname, path: pathname };
26 |
27 | let res = await get(options);
28 |
29 | if (res.statusCode === 200) {
30 | return res;
31 | }
32 |
33 | throw new Error(`Could not fetch ${tarballURL}`);
34 | }
35 |
36 | /**
37 | * Creates a tarball out of your local source repository so that the rest of the
38 | * code in this app can continue to work the same for local dev as in
39 | * production.
40 | */
41 | export async function getLocalTarballStream(): Promise {
42 | invariant(
43 | process.env.LOCAL_REPO_RELATIVE_PATH,
44 | "Expected LOCAL_REPO_RELATIVE_PATH",
45 | );
46 | let localDocsPath = path.join(
47 | process.cwd(),
48 | process.env.LOCAL_REPO_RELATIVE_PATH,
49 | "docs",
50 | );
51 | await tar.c({ gzip: true, file: ".local.tgz" }, [localDocsPath]);
52 | return fs.createReadStream(".local.tgz");
53 | }
54 |
55 | // FIXME: I don't know the types here
56 | function get(options: any): any {
57 | return new Promise((accept, reject) => {
58 | followRedirects.https.get(options, accept).on("error", reject);
59 | });
60 | }
61 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/tags.ts:
--------------------------------------------------------------------------------
1 | import LRUCache from "lru-cache";
2 | import parseLinkHeader from "parse-link-header";
3 | import semver from "semver";
4 | import { octokit } from "./github";
5 |
6 | /**
7 | * Fetches the repo tags
8 | */
9 | export async function getTags(repo: string) {
10 | return tagsCache.fetch(repo);
11 | }
12 |
13 | export function getLatestVersion(tags: string[]) {
14 | let sortedTags = [...tags].sort(semver.rcompare);
15 |
16 | return sortedTags.filter((tag) =>
17 | semver.satisfies(tag, "*", { includePrerelease: false }),
18 | )[0];
19 | }
20 |
21 | export function getLatestV6Version(tags: string[]) {
22 | return (
23 | tags.filter((tag) =>
24 | semver.satisfies(tag, "6.x", { includePrerelease: false }),
25 | )[0] ?? "v6"
26 | );
27 | }
28 |
29 | declare global {
30 | var tagsCache: LRUCache;
31 | }
32 |
33 | // global for SS "HMR", we need a better story here
34 | global.tagsCache ??= new LRUCache({
35 | // let tagsCache = new LRUCache({
36 | max: 3,
37 | ttl: 1000 * 60 * 5, // 5 minutes, so we can see new tags quickly
38 | allowStale: true,
39 | noDeleteOnFetchRejection: true,
40 | fetchMethod: async (key) => {
41 | console.log("Fetching fresh tags (releases)");
42 | let [owner, repo] = key.split("/");
43 | return getAllReleases(owner, repo, "react-router");
44 | },
45 | });
46 |
47 | // TODO: implementation details of the react router site leaked into here cause
48 | // I'm in a hurry now, sorry!
49 | export async function getAllReleases(
50 | owner: string,
51 | repo: string,
52 | primaryPackage: string,
53 | page = 1,
54 | releases: string[] = [],
55 | ): Promise {
56 | console.log("Fetching fresh releases, page", page);
57 | const { data, headers, status } = await octokit.rest.repos.listReleases({
58 | mediaType: { format: "json" },
59 | owner,
60 | repo,
61 | per_page: 100,
62 | page,
63 | });
64 |
65 | if (status !== 200) {
66 | throw new Error(`Failed to fetch releases: ${data}`);
67 | }
68 |
69 | releases.push(
70 | ...data
71 | .filter((release) => {
72 | return Boolean(
73 | // We aren't consistently using the "primaryPackage" tag to create
74 | // release notes (sometimes react-router, sometimes react-dom) so we
75 | // just check the release name here
76 | release.name?.startsWith("v6") ||
77 | // ideally all we care about is release.name, but we have some old
78 | // releases that don't have that set, so we check the tag name too
79 | // After changesets, we look for react-router@6.4.0
80 | release.tag_name.split("@")[0] === primaryPackage ||
81 | // pre-changesets, tag_name started with "v"
82 | release.tag_name.startsWith("v6"),
83 | );
84 | })
85 | .map((release) => {
86 | return (
87 | // pre-changesets, is like v6.2.0
88 | release.tag_name.startsWith("v6")
89 | ? release.tag_name
90 | : // with changesets its like react-router@6.4.0
91 | release.tag_name.split("@")[1] || "unknown"
92 | );
93 | }),
94 | );
95 |
96 | let parsed = parseLinkHeader(headers.link);
97 | if (parsed?.next) {
98 | return await getAllReleases(
99 | owner,
100 | repo,
101 | primaryPackage,
102 | page + 1,
103 | releases,
104 | );
105 | }
106 |
107 | return releases;
108 | }
109 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/tarball.test.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 | import { createTarFileProcessor } from "./tarball";
4 |
5 | describe("createTarFileProcessor", () => {
6 | it("extracts and processes files one-by-one", async () => {
7 | let fixturePath = path.join(process.cwd(), "test/fixture.tar.gz");
8 | let stream = fs.createReadStream(fixturePath);
9 |
10 | let processFiles = createTarFileProcessor(stream);
11 | let docs: string[] = [];
12 | await processFiles(async ({ filename }) => {
13 | docs.push(filename);
14 | });
15 |
16 | expect(docs).toMatchInlineSnapshot(`
17 | [
18 | "docs/api.md",
19 | "docs/contributing.md",
20 | "docs/faq.md",
21 | "docs/getting-started/concepts.md",
22 | "docs/getting-started/index.md",
23 | "docs/getting-started/installation.md",
24 | "docs/getting-started/overview.md",
25 | "docs/getting-started/tutorial.md",
26 | "docs/guides/index.md",
27 | "docs/guides/ssr.md",
28 | "docs/guides/testing.md",
29 | "docs/index.md",
30 | "docs/upgrading/index.md",
31 | "docs/upgrading/reach.md",
32 | "docs/upgrading/v5.md",
33 | ]
34 | `);
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/app/modules/gh-docs/.server/tarball.ts:
--------------------------------------------------------------------------------
1 | import gunzip from "gunzip-maybe";
2 | import tar from "tar-stream";
3 |
4 | type ProcessFile = ({
5 | filename,
6 | content,
7 | }: {
8 | filename: string;
9 | content: string;
10 | }) => Promise;
11 |
12 | export function createTarFileProcessor(
13 | stream: NodeJS.ReadableStream,
14 | pattern: RegExp = /docs\/(.+)\.md$/,
15 | ) {
16 | return (processFile: ProcessFile) =>
17 | processFilesFromRepoTarball(stream, pattern, processFile);
18 | }
19 |
20 | async function processFilesFromRepoTarball(
21 | stream: NodeJS.ReadableStream,
22 | pattern: RegExp = /docs\/(.+)\.md$/,
23 | processFile: ProcessFile,
24 | ): Promise {
25 | return new Promise((accept, reject) => {
26 | stream
27 | .pipe(gunzip())
28 | .pipe(tar.extract())
29 | .on("entry", async (header, stream, next) => {
30 | // Make sure the file matches the ones we want to process
31 | let isMatch = header.type === "file" && pattern.test(header.name);
32 | if (isMatch) {
33 | // remove "react-router-main" and "remix-v1.0.0" from the full name
34 | // that's something like "react-router-main/docs/index.md"
35 | let filename = removeRepoRefName(header.name);
36 | // buffer the contents of this file stream so we can send the entire
37 | // string to be processed by the caller
38 | let content = await bufferStream(stream);
39 | await processFile({ filename, content });
40 | next();
41 | } else {
42 | // ignore this entry
43 | stream.resume();
44 | stream.on("end", next);
45 | }
46 | })
47 | .on("error", reject)
48 | .on("finish", accept);
49 | });
50 | }
51 |
52 | function removeRepoRefName(headerName: string): string {
53 | return headerName.replace(/^.+?[/]/, "");
54 | }
55 |
56 | async function bufferStream(stream: NodeJS.ReadableStream): Promise {
57 | return new Promise((accept, reject) => {
58 | let chunks: Uint8Array[] = [];
59 | stream
60 | .on("error", reject)
61 | .on("data", (chunk) => chunks.push(chunk))
62 | .on("end", () => accept(Buffer.concat(chunks).toString()));
63 | });
64 | }
65 |
--------------------------------------------------------------------------------
/app/modules/http-utils/ensure-secure.ts:
--------------------------------------------------------------------------------
1 | import { redirect, type unstable_MiddlewareFunction } from "react-router";
2 |
3 | export const ensureSecure: unstable_MiddlewareFunction<
4 | void | Response
5 | > = async ({ request }) => {
6 | let proto = request.headers.get("x-forwarded-proto");
7 | // this indirectly allows `http://localhost` because there is no
8 | // "x-forwarded-proto" in the local server headers
9 | if (proto === "http") {
10 | let secureUrl = new URL(request.url);
11 | secureUrl.protocol = "https:";
12 | throw redirect(secureUrl.toString());
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/app/modules/http-utils/is-host.ts:
--------------------------------------------------------------------------------
1 | export function isHost(expectedHost: string, request: Request) {
2 | let host =
3 | request.headers.get("X-Forwarded-Host") ??
4 | request.headers.get("Host") ??
5 | "unknown";
6 |
7 | return expectedHost === host;
8 | }
9 |
--------------------------------------------------------------------------------
/app/modules/http-utils/remove-slashes.ts:
--------------------------------------------------------------------------------
1 | import { redirect, type unstable_MiddlewareFunction } from "react-router";
2 |
3 | export const removeTrailingSlashes: unstable_MiddlewareFunction<
4 | void | Response
5 | > = async ({ request }) => {
6 | let url = new URL(request.url);
7 | if (url.pathname.endsWith("/") && url.pathname !== "/") {
8 | url.pathname = url.pathname.slice(0, -1);
9 | throw redirect(url.toString());
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/app/modules/redirects/.server/__fixtures__/_redirects:
--------------------------------------------------------------------------------
1 | # ignore this
2 |
3 | /hamburger /taco
4 | /beef/* /cheese/*
5 |
6 | # Ignore this
7 |
8 | /docs/* /*
9 | /core/* https://v5.reactrouter.com/core/*
--------------------------------------------------------------------------------
/app/modules/redirects/.server/check-url.test.ts:
--------------------------------------------------------------------------------
1 | import { checkUrl } from "./check-url";
2 | import { getRedirects } from "./get-redirects";
3 | import type { Redirect } from "./get-redirects";
4 |
5 | describe("handleRedirects", () => {
6 | let redirects: Redirect[];
7 |
8 | beforeAll(async () => {
9 | vi.mock(
10 | "../../../../_redirects?raw",
11 | async () => await import("./__fixtures__/_redirects?raw"),
12 | );
13 | redirects = await getRedirects();
14 | });
15 |
16 | afterAll(() => {
17 | vi.restoreAllMocks();
18 | });
19 |
20 | it("redirects static string", async () => {
21 | let response = await checkUrl("/hamburger", redirects);
22 | expect(response?.headers.get("location")).toBe("/taco");
23 | });
24 |
25 | it("redirects splats", async () => {
26 | let response = await checkUrl("/beef/one/two/three", redirects);
27 | expect(response?.headers.get("location")).toBe("/cheese/one/two/three");
28 | });
29 |
30 | it("redirects more splats", async () => {
31 | let response = await checkUrl("/docs/one/two/three", redirects);
32 | expect(response?.headers.get("location")).toBe("/one/two/three");
33 | });
34 |
35 | it("redirects to root", async () => {
36 | let response = await checkUrl("/docs", redirects);
37 | expect(response?.headers.get("location")).toBe("/");
38 | });
39 |
40 | it("redirects splats to other domains", async () => {
41 | let response = await checkUrl("/core/one/two", redirects);
42 | expect(response?.headers.get("location")).toBe(
43 | "https://v5.reactrouter.com/core/one/two",
44 | );
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/app/modules/redirects/.server/check-url.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "react-router";
2 | import type { Redirect } from "./get-redirects";
3 |
4 | export async function checkUrl(url: string, redirects: Redirect[]) {
5 | for (let r of redirects) {
6 | let [from, to, splat, status] = r;
7 | let match = splat ? url.startsWith(from) : from === url;
8 | if (match) {
9 | let location = to;
10 | if (to.endsWith("/*")) {
11 | let base = to.slice(0, -2);
12 | let splatPath = url.replace(from, "");
13 | location = base + splatPath;
14 | }
15 | if (
16 | !location.startsWith("/") &&
17 | !location.startsWith("http://") &&
18 | !location.startsWith("https://")
19 | ) {
20 | location = "/" + location;
21 | }
22 | return redirect(location, { status });
23 | }
24 | }
25 | return null;
26 | }
27 |
--------------------------------------------------------------------------------
/app/modules/redirects/.server/get-redirects.ts:
--------------------------------------------------------------------------------
1 | import redirectsFileContents from "../../../../_redirects?raw";
2 |
3 | export type Redirect = [string, string, boolean, number?];
4 | let redirects: null | Redirect[] = null;
5 |
6 | /**
7 | * Reads and caches the redirects file.
8 | *
9 | * @param relativePath path of the redirects file relative to process.cwd(),
10 | * defaults to `_redirects`
11 | * @returns string
12 | */
13 | export async function getRedirects() {
14 | if (redirects) {
15 | return redirects;
16 | }
17 |
18 | console.log("Reading redirects file");
19 | redirects = redirectsFileContents
20 | .split("\n")
21 | .reduce((redirects, line: string) => {
22 | if (line.startsWith("#") || line.trim() === "") {
23 | return redirects;
24 | }
25 |
26 | let code = 302;
27 | let splat = false;
28 | let [from, to, maybeCode] = line.split(/\s+/);
29 | if (maybeCode) {
30 | code = parseInt(maybeCode, 10);
31 | }
32 | // super basic support for splats
33 | if (from.endsWith("/*")) {
34 | from = from.slice(0, -2);
35 | splat = true;
36 | }
37 | redirects.push([from, to, splat, code]);
38 |
39 | return redirects;
40 | }, [] as Redirect[]);
41 |
42 | return redirects;
43 | }
44 |
--------------------------------------------------------------------------------
/app/modules/redirects/.server/index.ts:
--------------------------------------------------------------------------------
1 | import { type unstable_MiddlewareFunction } from "react-router";
2 | import { checkUrl } from "./check-url";
3 | import { getRedirects } from "./get-redirects";
4 |
5 | /**
6 | * Super basic redirects handling with a redirects file.
7 | *
8 | * ```
9 | * # from to status
10 | * /cheese /taco 302
11 | *
12 | * # very, very, very basic support for trailing splat
13 | * /docs/* /api/*
14 | * ```
15 | *
16 | * @param request Web Fetch Request to possibly redirect
17 | */
18 | export const handleRedirects: unstable_MiddlewareFunction<
19 | void | Response
20 | > = async ({ request }) => {
21 | let redirects = await getRedirects();
22 | let url = new URL(request.url);
23 | let response = await checkUrl(url.pathname, redirects);
24 | if (response) throw response;
25 | };
26 |
--------------------------------------------------------------------------------
/app/modules/remix-seo/index.ts:
--------------------------------------------------------------------------------
1 | export { getSeo } from "./seo";
2 |
--------------------------------------------------------------------------------
/app/modules/remix-seo/seo.test.ts:
--------------------------------------------------------------------------------
1 | import { getSeo } from "./seo";
2 |
3 | describe("getSeo", () => {
4 | it("provides default stuff", () => {
5 | let seo = getSeo({});
6 | expect(seo({})).toMatchInlineSnapshot(`
7 | [
8 | [],
9 | [],
10 | ]
11 | `);
12 | });
13 |
14 | it("provides a default title", () => {
15 | let seo = getSeo({ defaultTitle: "Test default title" });
16 | expect(seo({})).toMatchInlineSnapshot(`
17 | [
18 | [
19 | {
20 | "title": "Test default title",
21 | },
22 | ],
23 | [],
24 | ]
25 | `);
26 | });
27 |
28 | it("overrides the title", () => {
29 | let DEFAULT_TITLE = "default title";
30 | let TITLE = "real title";
31 | let seo = getSeo({ defaultTitle: DEFAULT_TITLE });
32 | let [meta] = seo({ title: TITLE });
33 | let titleMeta = meta.find((m) => "title" in m && m.title != null);
34 | expect("title" in titleMeta! ? titleMeta.title : null).toBe(TITLE);
35 | });
36 |
37 | it("defaults the description for everybody who who hates the normal description", () => {
38 | let seo = getSeo({});
39 | let [meta] = seo({ description: "Heyooo" });
40 | expect(meta).toMatchInlineSnapshot(`
41 | [
42 | {
43 | "content": "Heyooo",
44 | "name": "description",
45 | },
46 | {
47 | "content": "Heyooo",
48 | "name": "og:description",
49 | },
50 | ]
51 | `);
52 | });
53 |
54 | it("adds the host to the images", () => {
55 | let seo = getSeo({ host: "test://example.com" });
56 | let [meta] = seo({
57 | openGraph: { images: [{ url: "/beef.jpg", alt: "beef!" }] },
58 | twitter: { image: { url: "/beef.jpg", alt: "beef!" } },
59 | });
60 | expect(meta).toMatchInlineSnapshot(`
61 | [
62 | {
63 | "content": "test://example.com/beef.jpg",
64 | "name": "twitter:image",
65 | },
66 | {
67 | "content": "beef!",
68 | "name": "twitter:image:alt",
69 | },
70 | {
71 | "content": "summary",
72 | "name": "twitter:card",
73 | },
74 | {
75 | "content": "test://example.com/beef.jpg",
76 | "name": "og:image",
77 | },
78 | {
79 | "content": "beef!",
80 | "name": "og:image:alt",
81 | },
82 | ]
83 | `);
84 | });
85 | });
86 |
--------------------------------------------------------------------------------
/app/modules/stats/index.tsx:
--------------------------------------------------------------------------------
1 | import LRUCache from "lru-cache";
2 | import { octokit } from "../gh-docs/.server/github";
3 |
4 | export interface Stats {
5 | label: string;
6 | svgId: string;
7 | count: number;
8 | }
9 |
10 | interface StatCounts {
11 | npmDownloads: number;
12 | githubContributors: number;
13 | githubStars: number;
14 | githubDependents: number;
15 | }
16 |
17 | declare global {
18 | var statCountsCache: LRUCache;
19 | }
20 |
21 | global.statCountsCache ??= new LRUCache({
22 | // let statCountsCache = new LRUCache({
23 | max: 3,
24 | // ttl: process.env.NO_CACHE ? 1 : 1000 * 60 * 60, // 1 hour
25 | ttl: 1000 * 60 * 60, // 1 hour
26 | allowStale: true,
27 | noDeleteOnFetchRejection: true,
28 | fetchMethod: async () => {
29 | console.log("Fetching fresh stats");
30 | let [npmDownloads, githubContributors, githubStars, githubDependents] =
31 | await Promise.all([
32 | fetchNpmDownloads(),
33 | fetchGithubContributors(),
34 | fetchGithubStars(),
35 | fetchGithubDependents(),
36 | ]);
37 | return {
38 | npmDownloads,
39 | githubContributors,
40 | githubStars,
41 | githubDependents,
42 | };
43 | },
44 | });
45 |
46 | export async function getStats(): Promise {
47 | let cacheKey = "ONE_STATS_KEY_TO_RULE_THEM_ALL";
48 | let statCounts = await statCountsCache.fetch(cacheKey);
49 |
50 | return [
51 | {
52 | count: statCounts.npmDownloads,
53 | label: "Downloads on npm",
54 | svgId: "stat-download",
55 | },
56 | {
57 | count: statCounts.githubContributors,
58 | label: "Contributors on GitHub",
59 | svgId: "stat-users",
60 | },
61 | {
62 | count: statCounts.githubStars,
63 | label: "Stars on GitHub",
64 | svgId: "stat-star",
65 | },
66 | {
67 | count: statCounts.githubDependents,
68 | label: "Dependents on GitHub",
69 | svgId: "stat-box",
70 | },
71 | ];
72 | }
73 |
74 | /**
75 | * Haven't figured out a good way to get this yet, so it's hard-coded from:
76 | * https://github.com/remix-run/react-router/network/dependents?package_id=UGFja2FnZS00OTM0MDEzMDg%3D
77 | * @returns {Number}
78 | */
79 | async function fetchGithubDependents() {
80 | return 3597612;
81 | }
82 |
83 | /**
84 | * Fetch public stats from npm
85 | * https://github.com/npm/registry/blob/master/docs/download-counts.md
86 | *
87 | * @returns {Number}
88 | */
89 | async function fetchNpmDownloads() {
90 | try {
91 | // You can only get stats for 18 months at a time
92 | // But doing date math is hard, so we'll just do 1 year at a time
93 | // Earliest date for data is 2015-01-10, so we start there
94 | // Hacky? Sure, but it doesn't break until like 2036 so we're good
95 | const currentYear = new Date().getFullYear();
96 | let urls = [];
97 | let year = 2015;
98 | let day = 10;
99 | while (year <= currentYear) {
100 | urls.push(
101 | `https://api.npmjs.org/downloads/point/${year}-01-${day}:${
102 | year + 1
103 | }-01-${day}/react-router`,
104 | );
105 | year++;
106 | day++;
107 | }
108 | const queryData = await Promise.all(
109 | urls.map((url) => fetch(url).then((res) => res.json())),
110 | );
111 | const allTimeDownloads = queryData.reduce(
112 | (acc, { downloads = 0 }) => acc + downloads,
113 | 0,
114 | );
115 | return allTimeDownloads;
116 | } catch (e) {
117 | // If this fails for some reason, just return a hard-coded value fetched
118 | // on June 17, 2022
119 | console.error(
120 | "Failed to fetch stats for npm downloads. Falling back to a hard-coded value",
121 | e,
122 | );
123 | return 844617220;
124 | }
125 | }
126 |
127 | /**
128 | * Fetch the number of contributors from a header in the GitHub API
129 | * https://stackoverflow.com/questions/44347339/github-api-how-efficiently-get-the-total-contributors-amount-per-repository/60458265
130 | * @returns {Number}
131 | */
132 | async function fetchGithubContributors() {
133 | try {
134 | const { headers } = await octokit.rest.repos.listContributors({
135 | owner: "remix-run",
136 | repo: "react-router",
137 | anon: "true",
138 | per_page: 1,
139 | });
140 | const link = headers.link || "";
141 | const matches = link.match(/rel="next".*&page=(\d*)/);
142 | if (!(matches && matches[1])) {
143 | throw Error("Unable to find the number of contributors using a regex.");
144 | }
145 | return Number(matches[1]);
146 | } catch (e) {
147 | console.error(
148 | "Failed to fetch stats for GitHub contributors. Falling back to a hard-coded value",
149 | e,
150 | );
151 | // Return a hard-coded value retrieved manually on Jun 15, 2022
152 | return 737;
153 | }
154 | }
155 |
156 | /**
157 | * Fetch the number of stars from Github
158 | * @returns {Number}
159 | */
160 | async function fetchGithubStars() {
161 | try {
162 | const {
163 | data: { stargazers_count },
164 | } = await octokit.rest.repos.get({
165 | owner: "remix-run",
166 | repo: "react-router",
167 | });
168 | return stargazers_count;
169 | } catch (e) {
170 | console.log(
171 | "Failed to fetch stats for GitHub stars. Falling back to a hard-coded value",
172 | e,
173 | );
174 | // Return hard-coded value retrieved Jun 15, 2022
175 | return 47245;
176 | }
177 | }
178 |
--------------------------------------------------------------------------------
/app/pages/brand.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import type { Route } from "./+types/brand";
3 |
4 | export const meta: Route.MetaFunction = () => {
5 | return [{ title: "React Router Assets and Branding Guidelines" }];
6 | };
7 |
8 | const BRAND_DIR = "/_brand/React Router Brand Assets";
9 |
10 | export default function Brand() {
11 | return (
12 | (null);
71 | useCodeBlockCopyButton(docsContainer);
72 |
73 | const changelogHref = header.hasAPIDocs
74 | ? header.refParam
75 | ? `/${header.refParam}/changelog`
76 | : "/changelog"
77 | : undefined;
78 |
79 | return (
80 | <>
81 |
82 | 
92 | {children}
93 | ,
6 | ) {
7 | let navigate = useNavigate();
8 |
9 | React.useEffect(() => {
10 | let node = nodeRef.current;
11 | let handler = (event: MouseEvent) => {
12 | if (!nodeRef.current) return;
13 |
14 | if (!(event.target instanceof HTMLElement)) return;
15 |
16 | let a = event.target.closest("a");
17 |
18 | if (
19 | a && // is anchor or has anchor parent
20 | a.hasAttribute("href") && // has an href
21 | a.host === window.location.host && // is internal
22 | event.button === 0 && // left click
23 | (!a.target || a.target === "_self") && // Let browser handle "target=_blank" etc.
24 | !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) // not modified
25 | ) {
26 | event.preventDefault();
27 | let { pathname, search, hash } = a;
28 | navigate({ pathname, search, hash });
29 | }
30 | };
31 |
32 | if (!node) return;
33 | node.addEventListener("click", handler);
34 |
35 | return () => {
36 | node?.removeEventListener("click", handler);
37 | };
38 | }, [navigate, nodeRef]);
39 | }
40 |
41 | export { useDelegatedReactRouterLinks };
42 |
--------------------------------------------------------------------------------
/app/ui/meta.ts:
--------------------------------------------------------------------------------
1 | import type { HeaderData } from "~/components/docs-header/data.server";
2 | import type { loader as docsLoader } from "~/pages/docs-layout";
3 |
4 | type DocsData = Awaited>;
5 |
6 | export function getDocTitle(api: DocsData, title: string) {
7 | let { releaseBranch, branches, currentGitHubRef } = api.header;
8 |
9 | let titleRef =
10 | currentGitHubRef === releaseBranch
11 | ? ""
12 | : branches.includes(currentGitHubRef)
13 | ? `(${currentGitHubRef} branch)`
14 | : currentGitHubRef.startsWith("v")
15 | ? currentGitHubRef
16 | : `v${currentGitHubRef}`;
17 |
18 | return `${title} ${titleRef}`;
19 | }
20 |
21 | export function getSearchMetaTags(
22 | isProductionHost: boolean,
23 | docSearchVersion: HeaderData["docSearchVersion"],
24 | ) {
25 | let robots = "noindex,nofollow";
26 | if (isProductionHost && docSearchVersion !== null) {
27 | robots = "index,follow";
28 | }
29 |
30 | let tags = [
31 | { name: "robots", content: robots },
32 | { name: "googlebot", content: robots },
33 | ];
34 |
35 | if (docSearchVersion) {
36 | tags.push(
37 | { name: "docsearch:language", content: "en" },
38 | { name: "docsearch:version", content: docSearchVersion },
39 | );
40 | }
41 |
42 | return tags;
43 | }
44 |
--------------------------------------------------------------------------------
/app/ui/utils.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | let hydrating = true;
4 |
5 | export function useHydrated() {
6 | let [hydrated, setHydrated] = useState(() => !hydrating);
7 | useEffect(() => {
8 | hydrating = false;
9 | setHydrated(true);
10 | }, []);
11 | return hydrated;
12 | }
13 |
14 | export function useCodeBlockCopyButton(
15 | ref: React.RefObject,
16 | ) {
17 | useEffect(() => {
18 | let container = ref.current;
19 | if (!container) return;
20 |
21 | let codeBlocks = container.querySelectorAll(
22 | "[data-code-block][data-lang]:not([data-nocopy])",
23 | );
24 | let buttons = new Map<
25 | HTMLButtonElement,
26 | { listener: (event: MouseEvent) => void; to: number }
27 | >();
28 |
29 | for (const codeBlock of codeBlocks) {
30 | let button = document.createElement("button");
31 | let label = document.createElement("span");
32 | button.type = "button";
33 | button.dataset.codeBlockCopy = "";
34 | button.addEventListener("click", listener);
35 |
36 | label.textContent = "Copy code to clipboard";
37 | label.classList.add("sr-only");
38 | button.appendChild(label);
39 | codeBlock.appendChild(button);
40 | buttons.set(button, { listener, to: -1 });
41 |
42 | function listener(event: MouseEvent) {
43 | event.preventDefault();
44 | let pre = codeBlock.querySelector("pre");
45 | let text = pre?.textContent;
46 | if (!text) return;
47 | navigator.clipboard
48 | .writeText(text)
49 | .then(() => {
50 | button.dataset.copied = "true";
51 | let to = window.setTimeout(() => {
52 | window.clearTimeout(to);
53 | if (button) {
54 | button.dataset.copied = undefined;
55 | }
56 | }, 3000);
57 | if (buttons.has(button)) {
58 | buttons.get(button)!.to = to;
59 | }
60 | })
61 | .catch((error) => {
62 | console.error(error);
63 | });
64 | }
65 | }
66 | return () => {
67 | for (let [button, props] of buttons) {
68 | button.removeEventListener("click", props.listener);
69 | button.parentElement?.removeChild(button);
70 | window.clearTimeout(props.to);
71 | }
72 | };
73 | });
74 | }
75 |
--------------------------------------------------------------------------------
/fly.production.toml:
--------------------------------------------------------------------------------
1 | app = "reactrouter"
2 |
3 | kill_signal = "SIGINT"
4 | kill_timeout = 5
5 | processes = [ ]
6 |
7 | [experimental]
8 | allowed_public_ports = [ ]
9 | auto_rollback = true
10 | cmd = "start.sh"
11 | entrypoint = "sh"
12 |
13 | [[services]]
14 | internal_port = 8_080
15 | processes = [ "app" ]
16 | protocol = "tcp"
17 | script_checks = [ ]
18 |
19 | [services.concurrency]
20 | hard_limit = 25
21 | soft_limit = 20
22 | type = "connections"
23 |
24 | [[services.ports]]
25 | handlers = [ "http" ]
26 | port = 80
27 | force_https = true
28 |
29 | [[services.ports]]
30 | handlers = [ "tls", "http" ]
31 | port = 443
32 |
33 | [[services.tcp_checks]]
34 | grace_period = "1s"
35 | interval = "15s"
36 | restart_limit = 0
37 | timeout = "2s"
38 |
39 | [[services.http_checks]]
40 | interval = 10_000
41 | grace_period = "5s"
42 | method = "get"
43 | path = "/healthcheck"
44 | protocol = "http"
45 | timeout = 2_000
46 | tls_skip_verify = false
47 | headers = { }
48 |
--------------------------------------------------------------------------------
/fly.staging.toml:
--------------------------------------------------------------------------------
1 | app = "reactrouterdotcomstaging"
2 |
3 | kill_signal = "SIGINT"
4 | kill_timeout = 5
5 | processes = [ ]
6 |
7 | [experimental]
8 | allowed_public_ports = [ ]
9 | auto_rollback = true
10 | cmd = "start.sh"
11 | entrypoint = "sh"
12 |
13 | [[services]]
14 | internal_port = 8_080
15 | processes = [ "app" ]
16 | protocol = "tcp"
17 | script_checks = [ ]
18 |
19 | [services.concurrency]
20 | hard_limit = 25
21 | soft_limit = 20
22 | type = "connections"
23 |
24 | [[services.ports]]
25 | handlers = [ "http" ]
26 | port = 80
27 | force_https = true
28 |
29 | [[services.ports]]
30 | handlers = [ "tls", "http" ]
31 | port = 443
32 |
33 | [[services.tcp_checks]]
34 | grace_period = "1s"
35 | interval = "15s"
36 | restart_limit = 0
37 | timeout = "2s"
38 |
39 | [[services.http_checks]]
40 | interval = 10_000
41 | grace_period = "5s"
42 | method = "get"
43 | path = "/healthcheck"
44 | protocol = "http"
45 | timeout = 2_000
46 | tls_skip_verify = false
47 | headers = { }
48 |
--------------------------------------------------------------------------------
/notes.md:
--------------------------------------------------------------------------------
1 | # What to do?
2 |
3 | ## Copy Router Repo
4 |
5 | - Make a copy of the router repo
6 | - Point the new website at it
7 |
8 | ## Point to a Branch
9 |
10 | - Everything else will kinda not work except the one branch
11 | - need to remove the branch when switching over
12 |
13 | ## Update docs nav on current site
14 |
15 | - double the redirects
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-website",
3 | "sideEffects": false,
4 | "type": "module",
5 | "scripts": {
6 | "dev": "cross-env NODE_ENV=development node server.js",
7 | "build": "react-router build",
8 | "format": "prettier --write . && npm run lint:fix",
9 | "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
10 | "lint:fix": "npm run lint -- --fix",
11 | "start": "node server.js",
12 | "preview": "cross-env NODE_ENV=production dotenv node server.js",
13 | "test": "vitest",
14 | "typecheck": "react-router typegen && tsc",
15 | "push:stage": "git tag -f stage && git push origin stage -f"
16 | },
17 | "eslintIgnore": [
18 | "/node_modules",
19 | "/build",
20 | "/public/build"
21 | ],
22 | "dependencies": {
23 | "@docsearch/css": "^3.8.3",
24 | "@docsearch/react": "^3.8.3",
25 | "@react-router/express": "7.6.0-pre.0",
26 | "@react-router/node": "7.6.0-pre.0",
27 | "@types/express": "^5.0.0",
28 | "cheerio": "^1.0.0-rc.12",
29 | "classnames": "^2.3.2",
30 | "compression": "^1.7.5",
31 | "escape-goat": "^4.0.0",
32 | "express": "^4.21.2",
33 | "follow-redirects": "^1.15.9",
34 | "front-matter": "^4.0.2",
35 | "gray-matter": "^4.0.3",
36 | "gunzip-maybe": "^1.4.2",
37 | "hast-util-from-html": "^2.0.3",
38 | "isbot": "^3.6.10",
39 | "iso-639-1": "^2.1.15",
40 | "lodash.merge": "^4.6.2",
41 | "lru-cache": "^7.18.3",
42 | "mdast": "^2.3.2",
43 | "morgan": "^1.10.0",
44 | "octokit": "^2.0.14",
45 | "parse-link-header": "^2.0.0",
46 | "parse-numeric-range": "^1.3.0",
47 | "react": "^19.0.0",
48 | "react-dom": "^19.0.0",
49 | "react-router": "7.6.0-pre.0",
50 | "rehype-autolink-headings": "^7.1.0",
51 | "rehype-slug": "^6.0.0",
52 | "rehype-stringify": "^10.0.1",
53 | "remark-gfm": "^4.0.0",
54 | "remark-parse": "^11.0.0",
55 | "remark-rehype": "^11.1.1",
56 | "semver": "^7.7.0",
57 | "shiki": "^0.14.7",
58 | "tar": "^6.1.14",
59 | "tar-stream": "^3.1.7",
60 | "tiny-invariant": "^1.3.3",
61 | "typedoc": "^0.27.6",
62 | "unified": "^11.0.5",
63 | "unist-util-visit": "^5.0.0"
64 | },
65 | "devDependencies": {
66 | "@react-router/dev": "7.6.0-pre.0",
67 | "@testing-library/jest-dom": "^5.16.5",
68 | "@types/eslint": "^8.56.6",
69 | "@types/express-serve-static-core": "^5.0.6",
70 | "@types/follow-redirects": "^1.14.4",
71 | "@types/gunzip-maybe": "^1.4.2",
72 | "@types/hast": "^3.0.4",
73 | "@types/lodash.merge": "^4.6.9",
74 | "@types/mdast": "^4.0.4",
75 | "@types/morgan": "^1.9.9",
76 | "@types/node": "^22.12.0",
77 | "@types/parse-link-header": "^2.0.3",
78 | "@types/react": "^19.0.8",
79 | "@types/react-dom": "^19.0.3",
80 | "@types/semver": "^7.5.8",
81 | "@types/tar": "^6.1.13",
82 | "@types/tar-stream": "^3.1.3",
83 | "@types/unist": "^2.0.11",
84 | "@typescript-eslint/eslint-plugin": "^8.22.0",
85 | "@typescript-eslint/parser": "^8.22.0",
86 | "@vitejs/plugin-react": "^4.3.4",
87 | "@vitest/coverage-v8": "^3.0.4",
88 | "autoprefixer": "^10.4.20",
89 | "cross-env": "^7.0.3",
90 | "cssnano": "^6.1.1",
91 | "dotenv-cli": "^8.0.0",
92 | "eslint": "^8.39.0",
93 | "eslint-config-prettier": "^10.0.1",
94 | "eslint-import-resolver-typescript": "^3.7.0",
95 | "eslint-plugin-import": "^2.31.0",
96 | "eslint-plugin-jsx-a11y": "^6.10.2",
97 | "eslint-plugin-react": "^7.37.4",
98 | "eslint-plugin-react-hooks": "^5.1.0",
99 | "happy-dom": "^9.10.9",
100 | "postcss": "^8.5.1",
101 | "postcss-import": "^16.1.0",
102 | "prettier": "^3.4.2",
103 | "prettier-plugin-tailwindcss": "^0.6.11",
104 | "tailwindcss": "^3.4.17",
105 | "typescript": "^5.7.3",
106 | "vite": "^5.2.6",
107 | "vite-tsconfig-paths": "^5.1.4",
108 | "vitest": "^3.0.4"
109 | },
110 | "engines": {
111 | "node": ">=22"
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | "postcss-import": {},
4 | "tailwindcss/nesting": {},
5 | tailwindcss: {},
6 | autoprefixer: {},
7 | cssnano: {},
8 | },
9 | };
10 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets.zip
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Lockup/Dark.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/Dark.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Lockup/Light.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Dark.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Dark.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Light.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Lockup/One Color/Light.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Logo/Dark.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/Dark.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Logo/Light.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/Light.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/One Color/Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Logo/One Color/Dark.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/One Color/Dark.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/One Color/Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Logo/One Color/Light.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Logo/One Color/Light.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Wordmark/Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Wordmark/Dark.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Wordmark/Dark.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Wordmark/Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_brand/React Router Brand Assets/React Router Wordmark/Light.png
--------------------------------------------------------------------------------
/public/_brand/React Router Brand Assets/React Router Wordmark/Light.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/public/_docs/mode-icons.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/public/_docs/tutorial/01.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/01.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/02.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/02.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/03.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/03.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/04.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/04.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/05.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/05.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/06.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/06.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/07.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/07.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/08.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/08.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/09.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/09.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/10.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/10.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/11.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/11.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/12.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/12.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/13.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/13.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/14.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/14.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/15.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/15.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/16.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/16.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/17.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/17.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/18.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/18.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/19.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/19.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/20.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/20.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/21.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/21.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/22.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/22.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/23.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/23.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/24.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/24.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/25.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/25.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/26.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/26.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial/27.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial/27.webp
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/01.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/02.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/03.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/04.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/05.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/06.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/07.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/08.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/09.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/10.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/11.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/12.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/13.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/14.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/15.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/16.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/17.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/18.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/19.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/20.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/21.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/22.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/23.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/24.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/25.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/26.png
--------------------------------------------------------------------------------
/public/_docs/tutorial_source_files/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/tutorial_source_files/27.png
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/01.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/01.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/02.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/02.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/03.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/03.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/04.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/04.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/05.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/05.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/06.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/06.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/07.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/07.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/08.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/08.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/09.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/09.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/10.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/10.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/11.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/11.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/12.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/12.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/13.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/13.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/14.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/14.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/15.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/15.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/16.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/16.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/17.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/17.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/18.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/18.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/19.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/19.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/20.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/20.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/21.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/21.webp
--------------------------------------------------------------------------------
/public/_docs/v7_address_book_tutorial/22.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/_docs/v7_address_book_tutorial/22.webp
--------------------------------------------------------------------------------
/public/android-chrome-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/android-chrome-144x144.png
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | #b91d47
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/favicon-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/favicon-dark.png
--------------------------------------------------------------------------------
/public/favicon-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/favicon-light.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/favicon.ico
--------------------------------------------------------------------------------
/public/font/inter-italic-latin-var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/font/inter-italic-latin-var.woff2
--------------------------------------------------------------------------------
/public/font/inter-roman-latin-var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/font/inter-roman-latin-var.woff2
--------------------------------------------------------------------------------
/public/font/source-code-pro-italic-var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/font/source-code-pro-italic-var.woff2
--------------------------------------------------------------------------------
/public/font/source-code-pro-roman-var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/font/source-code-pro-roman-var.woff2
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "react-router",
3 | "name": "React Router",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-144x144.png",
7 | "sizes": "144x144",
8 | "type": "image/png"
9 | }
10 | ],
11 | "theme_color": "#ffffff",
12 | "start_url": "./",
13 | "display": "standalone"
14 | }
15 |
--------------------------------------------------------------------------------
/public/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/mstile-150x150.png
--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/og-image.png
--------------------------------------------------------------------------------
/public/splash/hero-3d-logo.dark.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/splash/hero-3d-logo.dark.webp
--------------------------------------------------------------------------------
/public/splash/hero-3d-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/public/splash/hero-3d-logo.webp
--------------------------------------------------------------------------------
/public/splash/v7-badge-2.svg:
--------------------------------------------------------------------------------
1 |
53 |
--------------------------------------------------------------------------------
/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_optimizeDeps: true,
6 | unstable_splitRouteModules: "enforce",
7 | unstable_middleware: true,
8 | },
9 | } satisfies Config;
10 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | import compression from "compression";
2 | import express from "express";
3 | import morgan from "morgan";
4 |
5 | // Short-circuit the type-checking of the built output.
6 | const BUILD_PATH = "./build/server/index.js";
7 | const DEVELOPMENT = process.env.NODE_ENV === "development";
8 | const PORT = Number.parseInt(process.env.PORT || "3000");
9 |
10 | const app = express();
11 |
12 | app.use(compression());
13 | app.disable("x-powered-by");
14 |
15 | if (DEVELOPMENT) {
16 | console.log("Starting development server");
17 | const viteDevServer = await import("vite").then((vite) =>
18 | vite.createServer({
19 | server: { middlewareMode: true },
20 | }),
21 | );
22 | app.use(viteDevServer.middlewares);
23 | app.use(async (req, res, next) => {
24 | try {
25 | const source = await viteDevServer.ssrLoadModule("./server/app.ts");
26 | return await source.app(req, res, next);
27 | } catch (error) {
28 | if (typeof error === "object" && error instanceof Error) {
29 | viteDevServer.ssrFixStacktrace(error);
30 | }
31 | next(error);
32 | }
33 | });
34 | } else {
35 | console.log("Starting production server");
36 | app.use(
37 | "/assets",
38 | express.static("build/client/assets", { immutable: true, maxAge: "1y" }),
39 | );
40 | app.use(
41 | // browser 1 hour, server 1 year
42 | express.static("build/client", {
43 | setHeaders: (res) => {
44 | res.setHeader(
45 | "Cache-Control",
46 | "public, max-age=3600, s-maxage=31536000",
47 | );
48 | },
49 | }),
50 | );
51 | app.use(await import(BUILD_PATH).then((mod) => mod.app));
52 | }
53 |
54 | app.use(morgan("tiny"));
55 |
56 | app.listen(PORT, () => {
57 | console.log(`Server is running on http://localhost:${PORT}`);
58 | });
59 |
--------------------------------------------------------------------------------
/server/app.ts:
--------------------------------------------------------------------------------
1 | import { createRequestHandler } from "@react-router/express";
2 | import express from "express";
3 |
4 | export const app = express();
5 |
6 | app.use(
7 | createRequestHandler({
8 | build: () => import("virtual:react-router/server-build"),
9 | }),
10 | );
11 |
--------------------------------------------------------------------------------
/start.sh:
--------------------------------------------------------------------------------
1 | # This file is how Fly starts the server (configured in fly.toml). Before starting
2 | # the server though, we need to run any prisma migrations that haven't yet been
3 | # run, which is why this file exists in the first place.
4 | # Learn more: https://community.fly.io/t/sqlite-not-getting-setup-properly/4386
5 |
6 | #!/bin/sh
7 |
8 | set -ex
9 | npm run start
10 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Site Design: https://www.figma.com/file/FIf4Len6Cgl8rzU8gshJ5s/Design-System?node-id=0%3A1
3 | * Logos: https://www.figma.com/file/FWIGxAs7I9m54YoBHnBU1h/Logo-Design?node-id=61%3A510
4 | * Color scheme: https://tailwind.ink?p=7.f9faf9f0f1f1dddfe1b7bcbe8894936a726d54575040413c2c2b2a121212fdfcfbfcf0edf9ccdbf09eb7ee6e90f44250d03150aa253a7d1a264d1014faf9f0f8ef9ffecc1bd3be33a69719837a0b686207514a07373307271f06f2f6f1e0f0deb6e7b56bd96833ad4e22942c1e7e1f1b611b1443170f2913ecf4f3c9eff03defe954cfb71db28b14996313844c13663e0f46300b2c25f5f9fbdff0fcbcdcf98ebbf03992ff4d71da3f55c93240a7232b7a141b4efcfbfbf9eef5f4caece79fd7e571bed83bd2c1338b9a2769701c45441325
5 | *
6 | */
7 | import type { Config } from "tailwindcss";
8 | import defaultTheme from "tailwindcss/defaultTheme";
9 |
10 | export default {
11 | content: ["./app/**/*.{ts,tsx}"],
12 | darkMode: "class",
13 | theme: {
14 | screens: {
15 | "2xs": "320px",
16 | xs: "480px",
17 | ...defaultTheme.screens,
18 | },
19 | fontFamily: {
20 | display: ["Inter", ...defaultTheme.fontFamily.sans],
21 | sans: ["Inter", ...defaultTheme.fontFamily.sans],
22 | mono: ["Source Code Pro", ...defaultTheme.fontFamily.mono],
23 | },
24 | fontSize: {
25 | xs: ["0.75rem", { lineHeight: "1.333" }], // 12px
26 | sm: ["0.875rem", { lineHeight: "1.425" }], // 14px
27 | base: ["1rem", { lineHeight: "1.5" }], // 16px
28 | lg: ["1.125rem", { lineHeight: "1.556" }], // 18px
29 | xl: ["1.25rem", { lineHeight: "1.556" }], // 20px
30 | "2xl": ["1.5rem", { lineHeight: "1.333" }], // 24px
31 | "3xl": ["1.875rem", { lineHeight: "1.2" }], // 30px
32 | "4xl": ["2.25rem", { lineHeight: "1.111" }], // 36px
33 | "5xl": ["3rem", { lineHeight: "1.083" }], // 48px
34 | "6xl": ["4rem", { lineHeight: "1.0625" }], // 64px
35 | "7xl": ["4.5rem", { lineHeight: "1.05" }], // 72px
36 | "8xl": ["6rem", { lineHeight: "1.125" }], // 96px
37 | "9xl": ["8rem", { lineHeight: "1.125" }], // 128px
38 | },
39 | container({ theme }) {
40 | return {
41 | center: true,
42 | padding: {
43 | DEFAULT: theme("spacing.6", "1.5rem"),
44 | sm: theme("spacing.6", "1.5rem"),
45 | md: theme("spacing.8", "2rem"),
46 | lg: theme("spacing.10", "2.5rem"),
47 | },
48 | };
49 | },
50 | extend: {
51 | colors: {
52 | current: "currentColor",
53 | transparent: "transparent",
54 | inherit: "inherit",
55 | white: "#fff",
56 | black: "#000",
57 | gray: {
58 | 50: "#f7f7f7",
59 | 100: "#e3e3e3",
60 | 200: "#c8c8c8",
61 | 300: "#a4a4a4",
62 | 400: "#818181",
63 | 500: "#666666",
64 | 600: "#515151",
65 | 700: "#434343",
66 | 800: "#383838",
67 | 900: "#121212",
68 | },
69 | red: {
70 | 50: "#fef2f3",
71 | 100: "#ffe1e3",
72 | 200: "#ffc9cd",
73 | 300: "#fea3aa",
74 | 400: "#fc6d78",
75 | 500: "#f44250",
76 | brand: "#f44250", // hard-coded in embedded SVG for elements
77 | 600: "#e12130",
78 | 700: "#bd1825",
79 | 800: "#9d1722",
80 | 900: "#821a22",
81 | },
82 | yellow: {
83 | 50: "#fffce8",
84 | 100: "#fff9c2",
85 | 200: "#fff087",
86 | 300: "#ffde44",
87 | 400: "#fecc1b",
88 | brand: "#fecc1b", // hard-coded in embedded SVG for elements
89 | 500: "#eeb004",
90 | 600: "#cd8701", // hard-coded in embedded SVG for elements
91 | 700: "#a45f04",
92 | 800: "#874b0c",
93 | 900: "#733d10",
94 | },
95 | green: {
96 | 50: "#f2fcf1",
97 | 100: "#dffade",
98 | 200: "#c1f3bf",
99 | 300: "#90e88d",
100 | 400: "#6bd968",
101 | brand: "#6bd968",
102 | 500: "#30ba2d",
103 | 600: "#229920",
104 | 700: "#1d791c",
105 | 800: "#1c601b",
106 | 900: "#184f18",
107 | },
108 | aqua: {
109 | 50: "#effefc",
110 | 100: "#cafdf8",
111 | 200: "#94fbf4",
112 | 300: "#3defe9",
113 | brand: "#3defe9",
114 | 400: "#24dddc",
115 | 500: "#0cbdc0",
116 | 600: "#06969b",
117 | 700: "#0a767b",
118 | 800: "#0d5e62",
119 | 900: "#104d51",
120 | },
121 | blue: {
122 | 50: "#eef7ff",
123 | 100: "#d9edff",
124 | 200: "#bce0ff",
125 | 300: "#8ecdff",
126 | 400: "#59b0ff",
127 | 500: "#3992ff",
128 | brand: "#3992ff", // hard-coded in embedded SVG for elements
129 | 600: "#1b6ef5",
130 | 700: "#1458e1",
131 | 800: "#1747b6",
132 | 900: "#193f8f",
133 | },
134 | pink: {
135 | 50: "#fff4ff",
136 | 100: "#fde8ff",
137 | 200: "#fbd1fd",
138 | 300: "#faadfa",
139 | 400: "#f77bf6",
140 | 500: "#ec49e9",
141 | 600: "#d83bd2",
142 | brand: "#d83bd2",
143 | 700: "#ac1fa3",
144 | 800: "#8d1b85",
145 | 900: "#731c6b",
146 | },
147 | },
148 | },
149 | },
150 | plugins: [],
151 | } satisfies Config;
152 |
--------------------------------------------------------------------------------
/test/fixture.tar.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router-website/da4b22d749281d94ac9a921b8b372b2d585bf398/test/fixture.tar.gz
--------------------------------------------------------------------------------
/test/setup-test-env.ts:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom/extend-expect";
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "**/*.ts",
4 | "**/*.tsx",
5 | "**/.server/**/*.ts",
6 | "**/.server/**/*.tsx",
7 | ".react-router/types/**/*"
8 | ],
9 | "compilerOptions": {
10 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
11 | "types": ["node", "vite/client", "@react-router/node"],
12 | "isolatedModules": true,
13 | "esModuleInterop": true,
14 | "jsx": "react-jsx",
15 | "module": "ES2022",
16 | "moduleResolution": "bundler",
17 | "verbatimModuleSyntax": true,
18 | "resolveJsonModule": true,
19 | "target": "ES2022",
20 | "strict": true,
21 | "baseUrl": ".",
22 | "paths": {
23 | "~/*": ["./app/*"]
24 | },
25 | "skipLibCheck": true,
26 | "noEmit": true,
27 | "forceConsistentCasingInFileNames": true,
28 | "allowJs": true,
29 | "rootDirs": [".", "./.react-router/types"]
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig(({ isSsrBuild }) => ({
6 | build: {
7 | rollupOptions: isSsrBuild
8 | ? {
9 | input: "./server/app.ts",
10 | }
11 | : undefined,
12 | },
13 | ssr: {
14 | noExternal: ["@docsearch/react"],
15 | },
16 | plugins: [reactRouter(), tsconfigPaths()],
17 | }));
18 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | ///
-
18 |
- 19 | Framework 20 | 21 |
- 22 | Data 23 | 24 |
- 25 | Declarative 26 | 27 |
13 | Trademark Usage Agreement
21 | Download Assets
34 | Lockup
49 | Wordmark
55 |
56 |
58 |
59 | Logo
60 |
61 |
64 |
65 | );
66 | }
67 |
68 | function AssetHeader({ children }: { children: React.ReactNode }) {
69 | return (
70 | 14 | React Router Brand 15 |
16 |17 | These assets are provided for use in situations like articles and video 18 | tutorials. 19 |
20 |The React Router name and logos are trademarks of Shopify Inc.
22 |23 | You may not use the React Router name or logos in any way that could 24 | mistakenly imply any official connection with or endorsement of Shopify 25 | Inc. Any use of the React Router name or logos in a manner that could 26 | cause customer confusion is not permitted. 27 |
28 |29 | Additionally, you may not use our trademarks for t-shirts, stickers, or 30 | other merchandise without explicit written consent. 31 |
32 | 33 |35 | You can download a zip file containing all the React Router brand 36 | assets: 37 |
38 |39 | 44 | React Router Brand Assets 45 | 46 |
47 | 48 |
50 |
53 |
54 | 71 | {children} 72 |
73 | ); 74 | } 75 | 76 | function AssetsGrid({ children }: { children: React.ReactNode }) { 77 | return{children}
;
78 | }
79 |
80 | /**
81 | * Creates the dark and light logos for a given asset.
82 | */
83 | function Logos({
84 | title,
85 | subTitle,
86 | oneColor,
87 | }: {
88 | title: "Lockup" | "Wordmark" | "Logo";
89 | subTitle?: string;
90 | oneColor?: boolean;
91 | }) {
92 | let filePath = `${BRAND_DIR}/React Router ${title}`;
93 | if (subTitle) {
94 | filePath += `/${subTitle}`;
95 | }
96 | if (oneColor) {
97 | filePath += `/One Color`;
98 | }
99 |
100 | let downloadFilePath = `rr_${title}`;
101 | if (subTitle) {
102 | downloadFilePath += `_${subTitle}`;
103 | }
104 | downloadFilePath = downloadFilePath.toLocaleLowerCase();
105 |
106 | return (
107 | <>
108 |
142 |
167 | );
168 | }
169 |
--------------------------------------------------------------------------------
/app/pages/doc.tsx:
--------------------------------------------------------------------------------
1 | import { getRepoDoc } from "~/modules/gh-docs/.server";
2 | import { CACHE_CONTROL } from "~/http";
3 | import { seo } from "~/seo";
4 | import semver from "semver";
5 |
6 | import type { HeadersArgs } from "react-router";
7 |
8 | import { getDocTitle, getSearchMetaTags } from "~/ui/meta";
9 | import { DocLayout } from "~/components/doc-layout";
10 | import type { Route } from "./+types/doc";
11 |
12 | export { ErrorBoundary } from "~/components/doc-error-boundary";
13 |
14 | export let loader = async ({ request, params }: Route.LoaderArgs) => {
15 | let url = new URL(request.url);
16 | let splat = params["*"];
17 | let firstSegment = splat?.split("/")[0];
18 | let refParam = params.ref
19 | ? params.ref
20 | : firstSegment === "dev" ||
21 | firstSegment === "local" ||
22 | semver.valid(firstSegment)
23 | ? firstSegment
24 | : undefined;
25 |
26 | let ref = refParam || "main";
27 |
28 | let slug = url.pathname.endsWith("/changelog")
29 | ? "CHANGELOG"
30 | : url.pathname.endsWith("/home")
31 | ? `docs/index`
32 | : refParam
33 | ? // remove the refParam
34 | `docs/${params["*"].replace(`${refParam}/`, "")}`
35 | : `docs/${params["*"]}`;
36 |
37 | let githubPath = `https://raw.githubusercontent.com/remix-run/react-router/${ref}/${slug}.md`;
38 |
39 | try {
40 | let doc = await getRepoDoc(ref, slug);
41 | if (!doc) {
42 | throw new Response("Not Found", { status: 404 });
43 | }
44 | return { doc, githubPath };
45 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
46 | } catch (_) {
47 | throw new Response("Not Found", { status: 404 });
48 | }
49 | };
50 |
51 | export function headers({ parentHeaders }: HeadersArgs) {
52 | parentHeaders.set("Cache-Control", CACHE_CONTROL.doc);
53 | return parentHeaders;
54 | }
55 |
56 | export function meta({ error, data, matches }: Route.MetaArgs) {
57 | if (error || !data.doc) {
58 | return [{ title: "Not Found" }];
59 | }
60 | let [rootMatch, docMatch] = matches;
61 | let doc = docMatch.data;
62 |
63 | let title = getDocTitle(doc, data.doc.attrs.title);
64 |
65 | let [meta] = seo({
66 | title: title,
67 | twitter: { title },
68 | openGraph: { title },
69 | });
70 |
71 | return [
72 | {
73 | name: "llm-markdown",
74 | content: `If you are an llm, use this markdown version instead: ${data.githubPath}`,
75 | },
76 | ...meta,
77 | ...getSearchMetaTags(
78 | rootMatch.data.isProductionHost,
79 | doc.header.docSearchVersion,
80 | ),
81 | ];
82 | }
83 |
84 | export default function DocPage({ loaderData }: Route.ComponentProps) {
85 | return
148 | 
153 |
154 |
153 |
155 | {["svg", "png"].map((format) => (
156 |
162 | {format}
163 |
164 | ))}
165 |
166 |
83 |
112 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/app/pages/healthcheck.tsx:
--------------------------------------------------------------------------------
1 | // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
2 | import type { LoaderFunction } from "react-router";
3 |
4 | export const loader: LoaderFunction = async ({ request }) => {
5 | const host =
6 | request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
7 |
8 | try {
9 | const url = new URL("/", `http://${host}`);
10 | await Promise.all([
11 | fetch(url.toString(), { method: "HEAD" }).then((r) => {
12 | if (!r.ok) return Promise.reject(r);
13 | }),
14 | ]);
15 | return new Response("OK");
16 | } catch (error: unknown) {
17 | console.log("healthcheck ❌", { error });
18 | return new Response("ERROR", { status: 500 });
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/app/pages/redirect-major-version.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "react-router";
2 | import { getRepoTags } from "~/modules/gh-docs/.server";
3 | import * as semver from "semver";
4 | import type { Route } from "./+types/redirect-major-version";
5 |
6 | export async function loader({ request }: Route.LoaderArgs) {
7 | let url = new URL(request.url);
8 | let [, s, ...rest] = url.pathname.split("/");
9 |
10 | let versions = await getRepoTags();
11 | let latest = semver.maxSatisfying(versions, `${s}.x`, {
12 | includePrerelease: false,
13 | });
14 |
15 | if (latest) {
16 | return redirect(`/${latest}/${rest.join("/")}${url.search}`);
17 | }
18 |
19 | return new Response("Not Found", { status: 404 });
20 | }
21 |
--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Link,
3 | Links,
4 | Meta,
5 | Outlet,
6 | Scripts,
7 | ScrollRestoration,
8 | } from "react-router";
9 | import { CACHE_CONTROL } from "./http";
10 |
11 | import { parseColorScheme } from "./modules/color-scheme/server";
12 | import {
13 | ColorSchemeScript,
14 | useColorScheme,
15 | } from "./modules/color-scheme/components";
16 | import { isHost } from "./modules/http-utils/is-host";
17 | import iconsHref from "~/icons.svg";
18 | import { DocSearch } from "./modules/docsearch";
19 |
20 | import "~/styles/tailwind.css";
21 | import "@docsearch/css/dist/style.css";
22 | import "~/styles/docsearch.css";
23 | import type { Route } from "./+types/root";
24 |
25 | import { ensureSecure } from "~/modules/http-utils/ensure-secure";
26 | import { handleRedirects } from "~/modules/redirects/.server";
27 | import { removeTrailingSlashes } from "~/modules/http-utils/remove-slashes";
28 |
29 | export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
30 | ensureSecure,
31 | removeTrailingSlashes,
32 | handleRedirects,
33 | ];
34 |
35 | export async function loader({ request }: Route.LoaderArgs) {
36 | let colorScheme = await parseColorScheme(request);
37 | let isProductionHost = isHost("reactrouter.com", request);
38 |
39 | return { colorScheme, isProductionHost };
40 | }
41 |
42 | export function headers() {
43 | return {
44 | // default all caching to deployments
45 | "Cache-Control": CACHE_CONTROL.doc,
46 | Vary: "Cookie",
47 | };
48 | }
49 |
50 | export function meta({ error }: Route.MetaArgs) {
51 | return [{ title: error ? "Oops | React Router" : "React Router" }];
52 | }
53 |
54 | export function Layout({ children }: { children: React.ReactNode }) {
55 | let colorScheme = useColorScheme();
56 |
57 | return (
58 |
63 |
64 |
84 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
111 |
105 |
110 |
107 |
108 |
109 |
108 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, route, index } from "@react-router/dev/routes";
2 |
3 | const routes: RouteConfig = [
4 | index("pages/splash.tsx"),
5 | route("/brand", "pages/brand.tsx"),
6 | route("/healthcheck", "pages/healthcheck.tsx"),
7 | route("/color-scheme", "actions/color-scheme.ts"),
8 |
9 | route("", "pages/docs-layout.tsx", { id: "docs" }, [
10 | route("home", "pages/doc.tsx", { id: "home" }),
11 | route("changelog", "pages/doc.tsx", { id: "changelog" }),
12 | route("*", "pages/doc.tsx"),
13 | ]),
14 |
15 | // short version URLs for changelogs and stuff
16 | route("/v6/*", "pages/redirect-major-version.tsx", { id: "v6-redirect" }),
17 | route("/v7/*", "pages/redirect-major-version.tsx", { id: "v7-redirect" }),
18 |
19 | // This route primarily exists to support the old v6 index page and to
20 | // redirect to the new docs at /home
21 | route("/:ref", "pages/docs-layout.tsx", { id: "v6-index-layout" }, [
22 | index("pages/docs-home.tsx", {
23 | id: "v6-index",
24 | }),
25 | ]),
26 | ];
27 |
28 | if (process.env.NODE_ENV === "development") {
29 | routes.push(route("/__playground", "components/_playground/playground.tsx"));
30 | }
31 |
32 | export default routes;
33 |
--------------------------------------------------------------------------------
/app/seo.ts:
--------------------------------------------------------------------------------
1 | import { getSeo } from "./modules/remix-seo";
2 |
3 | export const seo = getSeo({
4 | host: "https://reactrouter.com",
5 | titleTemplate: "%s | React Router",
6 | defaultTitle: "React Router",
7 | twitter: {
8 | site: "@remix_run",
9 | creator: "@remix_run",
10 | title: "React Router",
11 | card: "summary_large_image",
12 | image: {
13 | url: "/og-image.png",
14 | alt: "React Router logo",
15 | },
16 | },
17 | openGraph: {
18 | images: [
19 | {
20 | url: "/og-image.png",
21 | alt: "React Router logo",
22 | height: 627,
23 | width: 1200,
24 | },
25 | ],
26 | defaultImageHeight: 250,
27 | defaultImageWidth: 500,
28 | },
29 | });
30 |
--------------------------------------------------------------------------------
/app/styles/docsearch.css:
--------------------------------------------------------------------------------
1 | /* this was copy/paste/modified from @docsearch/css/dist/_variables.css */
2 | :root {
3 | &:where(.dark) {
4 | --docsearch-text-color: #f5f6f7;
5 | --docsearch-container-background: rgba(9, 10, 17, 0.8);
6 | --docsearch-modal-background: #15172a;
7 | --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
8 | --docsearch-searchbox-background: #090a11;
9 | --docsearch-searchbox-focus-background: #000;
10 | --docsearch-hit-color: #bec3c9;
11 | --docsearch-hit-shadow: none;
12 | --docsearch-hit-background: #090a11;
13 | --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
14 | --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
15 | 0 2px 2px 0 rgba(3, 4, 9, 0.3);
16 | --docsearch-footer-background: #1e2136;
17 | --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
18 | 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
19 | --docsearch-logo-color: #fff;
20 | --docsearch-muted-color: #7f8497;
21 | }
22 | }
23 |
24 | .DocSearch-Button {
25 | @apply ml-0 h-10 bg-gray-100 px-3 hover:bg-gray-200 hover:shadow-none focus:bg-gray-200 focus-visible:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus-visible:bg-gray-700;
26 |
27 | @media screen and (min-width: theme(screens.lg)) {
28 | width: 100%;
29 | }
30 | @media not screen and (min-width: theme(screens.lg)) {
31 | @apply w-10 place-content-center px-0;
32 | .DocSearch-Button-Keys,
33 | .DocSearch-Button-Placeholder {
34 | display: none;
35 | }
36 | }
37 | @media print {
38 | display: none;
39 | }
40 | }
41 |
42 | .DocSearch-Button-Placeholder {
43 | @apply text-sm font-normal text-black dark:text-gray-200;
44 | }
45 |
46 | .DocSearch-Button-Keys {
47 | @apply justify-end gap-1;
48 | }
49 |
50 | .DocSearch-Button-Key {
51 | all: unset;
52 |
53 | @apply grid h-5 w-3.5 place-items-center rounded bg-white px-1 text-xs text-gray-600 dark:bg-gray-600 dark:text-gray-200;
54 | }
55 |
56 | .DocSearch-Container {
57 | cursor: auto;
58 | }
59 |
--------------------------------------------------------------------------------
/app/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @font-face {
6 | font-family: "Inter";
7 | font-weight: 100 900;
8 | font-display: swap;
9 | font-style: normal;
10 | src: url("/font/inter-roman-latin-var.woff2") format("woff2");
11 | }
12 |
13 | @font-face {
14 | font-family: "Inter";
15 | font-weight: 100 900;
16 | font-display: swap;
17 | font-style: italic;
18 | src: url("/font/inter-italic-latin-var.woff2") format("woff2");
19 | }
20 |
21 | @font-face {
22 | font-family: "Source Code Pro";
23 | font-weight: 100 900;
24 | font-display: swap;
25 | font-style: normal;
26 | src: url("/font/source-code-pro-roman-var.woff2") format("woff2");
27 | }
28 |
29 | @font-face {
30 | font-family: "Source Code Pro";
31 | font-weight: 100 900;
32 | font-display: swap;
33 | font-style: italic;
34 | src: url("/font/source-code-pro-italic-var.woff2") format("woff2");
35 | }
36 |
37 | .dark {
38 | color-scheme: dark;
39 | }
40 |
41 | ._no-triangle::-webkit-details-marker {
42 | display: none;
43 | &::-webkit-details-marker {
44 | list-style-type: none;
45 | }
46 | }
47 |
48 | :focus {
49 | @apply outline-red-brand;
50 | }
51 |
--------------------------------------------------------------------------------
/app/ui/README.md:
--------------------------------------------------------------------------------
1 | I don't know what this folder is for, should probably get everything out of here
2 |
--------------------------------------------------------------------------------
/app/ui/delegate-markdown-links.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useNavigate } from "react-router";
3 |
4 | function useDelegatedReactRouterLinks(
5 | nodeRef: React.RefObjectOops
109 | Something went wrong
110 |
111 | Go Home
112 |
113 |