chore: fix docs links (#113)

MichaelDeBoey · web-flow · commit 07b18dca6cac · 2022-12-21T20:04:25.000+01:00
diff --git a/_official-blog-tutorial/README.md b/_official-blog-tutorial/README.md
@@ -14,7 +14,7 @@ npx create-remix --template remix-run/indie-stack
 - Production-ready [SQLite Database](https://sqlite.org)
 - Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
 - [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
-- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
+- Email/Password Authentication with [cookie-based sessions](https://remix.run/utils/sessions#createcookiesessionstorage)
 - Database ORM with [Prisma](https://prisma.io)
 - Styling with [Tailwind](https://tailwindcss.com/)
 - End-to-end testing with [Cypress](https://cypress.io)
diff --git a/basic/app/root.tsx b/basic/app/root.tsx
@@ -22,7 +22,7 @@ import darkStylesUrl from "~/styles/dark.css";
  * every route in the app, but individual routes can include their own links
  * that are automatically unloaded when a user navigates away from the route.
  *
- * https://remix.run/api/app#links
+ * https://remix.run/route/links
  */
 export const links: LinksFunction = () => {
   return [
diff --git a/basic/app/routes/demos/actions.tsx b/basic/app/routes/demos/actions.tsx
@@ -8,7 +8,7 @@ export const meta: MetaFunction = () => ({
 });
 
 // When your form sends a POST, the action is called on the server.
-// - https://remix.run/api/conventions#action
+// - https://remix.run/route/action
 // - https://remix.run/guides/data-updates
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData();
@@ -34,7 +34,7 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function ActionsDemo() {
-  // https://remix.run/api/remix#useactiondata
+  // https://remix.run/hooks/use-action-data
   const actionMessage = useActionData<typeof action>();
   const answerRef = useRef<HTMLInputElement>(null);
 
@@ -85,13 +85,11 @@ export default function ActionsDemo() {
           </li>
           <li>
             API:{" "}
-            <a href="https://remix.run/api/conventions#action">
-              Route Action Export
-            </a>
+            <a href="https://remix.run/route/action">Route Action Export</a>
           </li>
           <li>
             API:{" "}
-            <a href="https://remix.run/api/remix#useactiondata">
+            <a href="https://remix.run/hooks/use-action-data">
               <code>useActionData</code>
             </a>
           </li>
diff --git a/basic/app/routes/demos/params/$id.tsx b/basic/app/routes/demos/params/$id.tsx
@@ -4,7 +4,7 @@ import { useCatch, useLoaderData } from "@remix-run/react";
 
 // The `$` in route filenames becomes a pattern that's parsed from the URL and
 // passed to your loaders so you can look up data.
-// - https://remix.run/api/conventions#loader-params
+// - https://remix.run/route/loader#params
 export const loader = async ({ params }: LoaderArgs) => {
   // pretend like we're using params.id to look something up in the db
 
@@ -47,9 +47,9 @@ export default function ParamDemo() {
   );
 }
 
-// https://remix.run/api/conventions#catchboundary
-// https://remix.run/api/remix#usecatch
-// https://remix.run/api/guides/not-found
+// https://remix.run/route/catch-boundary
+// https://remix.run/hooks/use-catch
+// https://remix.run/guides/not-found
 export function CatchBoundary() {
   const caught = useCatch();
 
@@ -91,8 +91,8 @@ export function CatchBoundary() {
   );
 }
 
-// https://remix.run/api/conventions#errorboundary
-// https://remix.run/api/guides/not-found
+// https://remix.run/route/error-boundary
+// https://remix.run/guides/not-found
 export function ErrorBoundary({ error }: { error: Error }) {
   console.error(error);
   return (
diff --git a/basic/app/routes/index.tsx b/basic/app/routes/index.tsx
@@ -10,7 +10,7 @@ type IndexData = {
 // Loaders provide data to components and are only ever called on the server, so
 // you can connect to a database or run any server side code you want right next
 // to the component that renders it.
-// https://remix.run/api/conventions#loader
+// https://remix.run/route/loader
 export const loader = async () => {
   const data: IndexData = {
     resources: [
@@ -43,11 +43,11 @@ export const loader = async () => {
     ],
   };
 
-  // https://remix.run/api/remix#json
+  // https://remix.run/utils/json
   return json(data);
 };
 
-// https://remix.run/api/conventions#meta
+// https://remix.run/route/meta
 export const meta: MetaFunction = () => ({
   title: "Remix Starter",
   description: "Welcome to remix!",
diff --git a/catch-boundary/README.md b/catch-boundary/README.md
@@ -16,4 +16,4 @@ Check [app/routes/users/$userId.tsx](app/routes/users/$userId.tsx) to see the Ca
 
 ## Related Links
 
-- [CatchBoundary in the Remix Docs](https://remix.run/api/conventions#catchboundary)
+- [CatchBoundary in the Remix Docs](https://remix.run/route/catch-boundary)
diff --git a/combobox-resource-route/README.md b/combobox-resource-route/README.md
@@ -20,6 +20,6 @@ The relevant files are:
 
 ## Related Links
 
-- [useFetcher](https://remix.run/api/remix#usefetcher)
+- [useFetcher](https://remix.run/hooks/use-fetcher)
 - [Resource Routes](https://remix.run/guides/resource-routes)
 - [Reach UI Combobox](https://reach.tech/combobox)
diff --git a/combobox-resource-route/app/routes/index.tsx b/combobox-resource-route/app/routes/index.tsx
@@ -12,7 +12,7 @@ import type { Lang } from "~/models/langs";
 
 export function links() {
   // Add them to the page when this route is active:
-  // https://remix.run/api/conventions#links
+  // https://remix.run/route/links
   return [{ rel: "stylesheet", href: comboboxStyles }];
 }
 
diff --git a/dark-mode/README.md b/dark-mode/README.md
@@ -22,6 +22,6 @@ The Themed component is used to conditionally render two components depending on
 
 ## Related Links
 
-- [Creating cookie sessions in the Remix docs](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
-- [useFetcher in the Remix docs](https://remix.run/docs/en/v1/api/remix#usefetcher) (used to tell the server to update the cookie value when the theme changes)
-- [Blog post with complete explanation of each part of the code](https://www.mattstobbs.com/remix-dark-mode/)
+- [Creating cookie sessions in the Remix docs](https://remix.run/utils/sessions#createcookiesessionstorage)
+- [useFetcher in the Remix docs](https://remix.run/hooks/use-fetcher) (used to tell the server to update the cookie value when the theme changes)
+- [Blog post with complete explanation of each part of the code](https://www.mattstobbs.com/remix-dark-mode)
diff --git a/dataloader/README.md b/dataloader/README.md
@@ -2,7 +2,7 @@
 
 This example shows how to avoid redundant roundtrips to data sources via batching and caching, implemented with [DataLoader](https://github.com/graphql/dataloader). This comes in handy when there are multiple nested routes that depend on the same data source.
 
-Note that in many cases, you can meet the same requirement with Remix's own [useMatches](https://remix.run/docs/en/v1/api/remix#usematches) which lets you use all of your parent-routes' data in child routes. If that suits your use case, using `useMatches` is preferable. There are cases where this might not be the best fit though, including:
+Note that in many cases, you can meet the same requirement with Remix's own [useMatches](https://remix.run/hooks/use-matches) which lets you use all of your parent-routes' data in child routes. If that suits your use case, using `useMatches` is preferable. There are cases where this might not be the best fit though, including:
 
 - You can't be sure if a parent did already request a particular piece of data
 - You don't want your data loading to be tightly coupled with your parent routes, for architectural reasons
@@ -17,10 +17,10 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 `app/data.server.ts` implements the `db` object which mimics an ORM in the style of [Prisma](https://www.prisma.io/). The method `db.user#findMany` logs _user#findMany_ to the console, for demo purposes.
 
-There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/docs/en/v1/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
+There's exactly one DataLoader factory `createUsersByIdLoader`, implemented in `app/loaders/userLoader.ts`. It's put on context of [createRequestHandler](https://remix.run/other-api/adapter#createrequesthandler) in `server/index.ts` as `usersById` which is made available to all Remix-loaders and -actions. Both the loaders of `app/routes/users.tsx` and `app/routes/users/index.tsx` make calls to this loader. When inspecting the server logs while refreshing the page, you'll notice that there's only one log _user#findMany_ per request, proving that with this implementation, there's only one rountrip to the database.
 
 ## Related Links
 
 - [DataLoader docs](https://github.com/graphql/dataloader)
 - [DataLoader – Source code walkthrough [video]](https://youtu.be/OQTnXNCDywA), for those interested
-- Remix docs: [useMatches](https://remix.run/docs/en/v1/api/remix#usematches)
+- Remix docs: [useMatches](https://remix.run/hooks/use-matches)
diff --git a/file-and-cloudinary-upload/README.md b/file-and-cloudinary-upload/README.md
@@ -1,14 +1,14 @@
 # Upload images to cloudinary
 
-This is a simple example of using the remix buildin [uploadHandler](https://remix.run/docs/en/v1/api/remix#uploadhandler) and Form with multipart data to upload a file with the built-in local uploader and upload an image file to cloudinary with a custom uploader and display it.
+This is a simple example of using the remix buildin [uploadHandler](https://remix.run/utils/parse-multipart-form-data#uploadhandler) and Form with multipart data to upload a file with the built-in local uploader and upload an image file to cloudinary with a custom uploader and display it.
 
 The relevent files are:
 
 ```
 ├── app
 │   ├── routes
 │   │   ├── cloudinary-upload.tsx // upload to cloudinary
-│   │   └── local-upload.tsx // local upload using build in [createfileuploadhandler](https://remix.run/docs/en/v1/api/remix#unstable_createfileuploadhandler)
+│   │   └── local-upload.tsx // local upload using build in [createFileUploadHandler](https://remix.run/utils/unstable-create-file-upload-handler)
 │   └── utils
 │       └── utils.server.ts  // init cloudinary nodejs client on server side
 |── .env // holds cloudinary credentails
@@ -26,6 +26,6 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Related Links
 
-- [Handle Multiple Part Forms (File Uploads)](https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata-node)
-- [Upload Handler](https://remix.run/docs/en/v1/api/remix#uploadhandler)
-- [Custom Uploader](https://remix.run/docs/en/v1/api/remix#custom-uploadhandler)
+- [Handle Multiple Part Forms (File Uploads)](https://remix.run/utils/parse-multipart-form-data-node)
+- [Upload Handler](https://remix.run/utils/parse-multipart-form-data#uploadhandler)
+- [Custom Uploader](https://remix.run/guides/file-uploads)
diff --git a/file-and-s3-upload/README.md b/file-and-s3-upload/README.md
@@ -1,6 +1,6 @@
 # Upload images to S3
 
-This is a simple example of using the remix built-in [uploadHandler](https://remix.run/docs/en/v1/api/remix#uploadhandler) and Form with multipart data to upload a file with the built-in local uploader and upload an image file to S3 with a custom uploader and display it. You can test it locally by running the dev server and opening the path `/s3-upload` in your browser.
+This is a simple example of using the remix built-in [uploadHandler](https://remix.run/utils/parse-multipart-form-data#uploadhandler) and Form with multipart data to upload a file with the built-in local uploader and upload an image file to S3 with a custom uploader and display it. You can test it locally by running the dev server and opening the path `/s3-upload` in your browser.
 
 The relevent files are:
 
@@ -30,6 +30,6 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Related Links
 
-- [Handle Multiple Part Forms (File Uploads)](https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata-node)
-- [Upload Handler](https://remix.run/docs/en/v1/api/remix#uploadhandler)
-- [Custom Uploader](https://remix.run/docs/en/v1/api/remix#custom-uploadhandler)
+- [Handle Multiple Part Forms (File Uploads)](https://remix.run/utils/parse-multipart-form-data-node)
+- [Upload Handler](https://remix.run/utils/parse-multipart-form-data#uploadhandler)
+- [Custom Uploader](https://remix.run/guides/file-uploads)
diff --git a/firebase/README.md b/firebase/README.md
@@ -49,4 +49,4 @@ Requests to the Firestore are made using the `firebase-admin`-SDK. You need to c
 
 - [Firestore Data Converters](https://firebase.google.com/docs/reference/node/firebase.firestore.FirestoreDataConverter) for typing
 - [Firebase Session Cookies](https://firebase.google.com/docs/auth/admin/manage-cookies)
-- [Remix `cookieSessionStorage`](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
+- [Remix `cookieSessionStorage`](https://remix.run/utils/sessions#createcookiesessionstorage)
diff --git a/gdpr-cookie-consent/README.md b/gdpr-cookie-consent/README.md
@@ -16,9 +16,9 @@ Once they submit the consent form, a dummy tracking [script](public/dummy-analyt
 
 > If you want to reset the example delete the `gdpr-consent` cookie in the `Application`/`cookies` in the browser's developer tools.
 
-The example is using [Remix Cookie API](https://remix.run/docs/en/v1/api/remix#cookies).
+The example is using [Remix Cookie API](https://remix.run/utils/cookies).
 
 ## Related Links
 
-- https://remix.run/docs/en/v1/api/remix#cookies
+- https://remix.run/utils/cookies
 - https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
diff --git a/google-analytics/app/root.tsx b/google-analytics/app/root.tsx
@@ -20,7 +20,7 @@ import * as gtag from "~/utils/gtags.client";
  * @description
  * If you would like to include the development env values in your browser bundle AKA
  * set some global values on the window object, take a look at these docs here:
- * https://remix.run/docs/en/v1/guides/envvars#server-environment-variables
+ * https://remix.run/guides/envvars#server-environment-variables
  */
 // export async function loader() {
 //   return json({
diff --git a/graphql-api/README.md b/graphql-api/README.md
@@ -5,7 +5,7 @@ This example demonstrates using the [Fetch API][link-fetch] to query a [GraphQL]
 ## Setup
 
 - Setup the `GRAPHQL_API` environment variable
-  - See the [Remix docs](https://remix.run/docs/guides/envvars) for some suggested patterns
+  - See the [Remix docs](https://remix.run/guides/envvars) for some suggested patterns
 - Run `npm install`
 - And start the example with `npm run dev`
 - Visit [http://localhost:3000](http://localhost:3000) in your browser.
@@ -47,5 +47,5 @@ This example makes use of [Remix Resource Routes][link-resource-routes] to fetch
 [link-codegen]: https://www.graphql-code-generator.com/ "GraphQL Code Generator"
 [link-fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API "Fetch API"
 [link-graphql]: https://graphql.org/ "GraphQL"
-[link-resource-routes]: https://remix.run/docs/en/v1/guides/resource-routes "Resource Routes"
+[link-resource-routes]: https://remix.run/guides/resource-routes "Resource Routes"
 [link-sample-api]: https://rickandmortyapi.com/graphql "Rick & Morty API"
diff --git a/infinite-scrolling/README.md b/infinite-scrolling/README.md
@@ -1,6 +1,6 @@
 # Infinite scrolling
 
-This example shows a minimal implementation of infinite scrolling that uses [useFetcher](https://remix.run/docs/en/v1/api/remix#usefetcher) and [URL Search Params](https://remix.run/docs/en/v1/guides/data-loading#url-search-params).
+This example shows a minimal implementation of infinite scrolling that uses [useFetcher](https://remix.run/hooks/use-fetcher) and [URL Search Params](https://remix.run/guides/data-loading#url-search-params).
 
 ## Preview
 
@@ -15,5 +15,5 @@ tba
 ## Related Links
 
 - Remix docs:
-  - [useFetcher](https://remix.run/docs/en/v1/api/remix#usefetcher)
-  - [URL Search Params](https://remix.run/docs/en/v1/guides/data-loading#url-search-params)
+  - [useFetcher](https://remix.run/hooks/use-fetcher)
+  - [URL Search Params](https://remix.run/guides/data-loading#url-search-params)
diff --git a/io-ts-formdata-decoding/README.md b/io-ts-formdata-decoding/README.md
@@ -51,7 +51,7 @@ those assertions are not guaranteed to be safe:
 
 io-ts describes itself as a _"runtime type system for IO decoding/encoding"_. It can do what TypeScript by itself is not designed for: validate types at runtime. `app/formData.ts` implements a function `decodeFormData` that takes a `Request` and a [runtime representation of a type](https://gcanti.github.io/io-ts/modules/index.ts.html#type) and returns a correctly typed record with the form's data. In case the data is malformed, it will throw a [422 Uprocessable Entity](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422).
 
-The route `app/routes/index.tsx` implements an action that calls `decodeFormData`. It also implements a [CatchBoundary](https://remix.run/docs/en/v1/api/conventions#catchboundary), which will render iff you provide anything other than a number to the `<input name="age" />`.
+The route `app/routes/index.tsx` implements an action that calls `decodeFormData`. It also implements a [CatchBoundary](https://remix.run/route/catch-boundary), which will render iff you provide anything other than a number to the `<input name="age" />`.
 
 ## Related Links
 
diff --git a/multiple-forms/README.md b/multiple-forms/README.md
@@ -14,4 +14,4 @@ We have a page with invitations to a party. We display who the invitation was se
 
 ## Related Links
 
-- [Actions](https://remix.run/api/conventions#action)
+- [Actions](https://remix.run/route/action)
diff --git a/nprogress/README.md b/nprogress/README.md
@@ -17,4 +17,4 @@ To visualize it, the `/` route has a link to `/slow-page` whose loader takes one
 ## Related Links
 
 - [NProgress](https://ricostacruz.com/nprogress/)
-- [useTransition](https://remix.run/api/remix#usetransition)
+- [useTransition](https://remix.run/hooks/use-transition)
diff --git a/pathless-routes/README.md b/pathless-routes/README.md
@@ -42,6 +42,6 @@ Here `app/routes/articles/__layout.tsx` will add a pathless route, and acts as a
 
 ## Related Links
 
-- [Pathless Routes](https://remix.run/api/conventions#pathless-layout-routes)
-- [Layout Routes](https://remix.run/api/conventions#layout-routes)
+- [Pathless Routes](https://remix.run/file-conventions/routes-files#pathless-layout-routes)
+- [Layout Routes](https://remix.run/file-conventions/routes-files#layout-routes)
 - [Remix MD/MDX](https://remix.run/guides/mdx)
diff --git a/redis-upstash-session/app/sessions/upstash.server.ts b/redis-upstash-session/app/sessions/upstash.server.ts
@@ -19,7 +19,7 @@ const expiresToSeconds = (expires) => {
   return secondsDelta < 0 ? 0 : secondsDelta;
 };
 
-// For more info check https://remix.run/api/remix#createsessionstorage
+// For more info check https://remix.run/utils/sessions#createsessionstorage
 export function createUpstashSessionStorage({ cookie }: any) {
   return createSessionStorage({
     cookie,
diff --git a/remix-auth-supabase-github/app/supabase.client.ts b/remix-auth-supabase-github/app/supabase.client.ts
@@ -27,7 +27,7 @@ if (!window.env.PUBLIC_SUPABASE_ANON_KEY)
 // };
 
 // ⚠️ cloudflare needs you define fetch option : https://github.com/supabase/supabase-js#custom-fetch-implementation
-// Use Remix fetch polyfill for node (See https://remix.run/docs/en/v1/other-api/node)
+// Use Remix fetch polyfill for node (See https://remix.run/other-api/node)
 export const supabaseClient = createClient(
   window.env.SUPABASE_URL,
   window.env.PUBLIC_SUPABASE_ANON_KEY,
diff --git a/remix-auth-supabase-github/app/supabase.server.ts b/remix-auth-supabase-github/app/supabase.server.ts
@@ -29,7 +29,7 @@ if (!process.env.SUPABASE_SERVICE_KEY)
 // };
 
 // ⚠️ cloudflare needs you define fetch option : https://github.com/supabase/supabase-js#custom-fetch-implementation
-// Use Remix fetch polyfill for node (See https://remix.run/docs/en/v1/other-api/node)
+// Use Remix fetch polyfill for node (See https://remix.run/other-api/node)
 export const supabaseAdmin = createClient(
   process.env.SUPABASE_URL,
   process.env.SUPABASE_SERVICE_KEY
diff --git a/search-input/app/root.tsx b/search-input/app/root.tsx
@@ -18,7 +18,7 @@ import globalStylesUrl from "~/styles/global.css";
  * every route in the app, but individual routes can include their own links
  * that are automatically unloaded when a user navigates away from the route.
  *
- * https://remix.run/api/app#links
+ * https://remix.run/route/links
  */
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: globalStylesUrl }];
diff --git a/session-flash/README.md b/session-flash/README.md
diff --git a/sharing-loader-data/README.md b/sharing-loader-data/README.md
diff --git a/stripe-integration/README.md b/stripe-integration/README.md
diff --git a/tiptap-collab-editing/README.md b/tiptap-collab-editing/README.md
diff --git a/toast-message/README.md b/toast-message/README.md
diff --git a/twind/README.md b/twind/README.md
diff --git a/usematches-loader-data/README.md b/usematches-loader-data/README.md

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ import darkStylesUrl from "~/styles/dark.css";`
`22`	`22`	`* every route in the app, but individual routes can include their own links`
`23`	`23`	`* that are automatically unloaded when a user navigates away from the route.`
`24`	`24`	`*`
`25`		`- * https://remix.run/api/app#links`
	`25`	`+ * https://remix.run/route/links`
`26`	`26`	`*/`
`27`	`27`	`export const links: LinksFunction = () => {`
`28`	`28`	`return [`
Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,4 @@ Check [app/routes/users/$userId.tsx](app/routes/users/$userId.tsx) to see the Ca`
`16`	`16`
`17`	`17`	`## Related Links`
`18`	`18`
`19`		`-- [CatchBoundary in the Remix Docs](https://remix.run/api/conventions#catchboundary)`
	`19`	`+- [CatchBoundary in the Remix Docs](https://remix.run/route/catch-boundary)`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ import type { Lang } from "~/models/langs";`
`12`	`12`
`13`	`13`	`export function links() {`
`14`	`14`	`// Add them to the page when this route is active:`
`15`		`- // https://remix.run/api/conventions#links`
	`15`	`+ // https://remix.run/route/links`
`16`	`16`	`return [{ rel: "stylesheet", href: comboboxStyles }];`
`17`	`17`	`}`
`18`	`18`