docs: cleanup docs (remix-run#5249)

jstafman · Jan 28, 2023 · 37707bf · 37707bf
1 parent 91c8c18
commit 37707bf
Show file tree

Hide file tree

Showing 33 changed files with 54 additions and 19 deletions.
diff --git a/docs/components/await.md b/docs/components/await.md
@@ -1,5 +1,6 @@
 ---
 title: Await
+toc: false
 ---
 
 # `<Await>`

diff --git a/docs/components/form.md b/docs/components/form.md
@@ -4,10 +4,10 @@ title: Form
 
 # `<Form>`
 
-<docs-success>Watch the <a href="https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">📼 Remix Singles</a>: <a href="https://www.youtube.com/watch?v=Iv25HAHaFDs&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Data Mutations with Form + action</a>, <a href="https://www.youtube.com/watch?v=w2i-9cYxSdc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Multiple Forms and Single Button Mutations</a> and <a href="https://www.youtube.com/watch?v=bMLej7bg5Zo&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Clearing Inputs After Form Submissions</a></docs-success>
-
 <docs-info>This component is simply a re-export of [React Router's `Form`][rr-form].</docs-info>
 
+<docs-success>Watch the <a href="https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">📼 Remix Singles</a>: <a href="https://www.youtube.com/watch?v=Iv25HAHaFDs&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Data Mutations with Form + action</a>, <a href="https://www.youtube.com/watch?v=w2i-9cYxSdc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Multiple Forms and Single Button Mutations</a> and <a href="https://www.youtube.com/watch?v=bMLej7bg5Zo&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Clearing Inputs After Form Submissions</a></docs-success>
+
 The `<Form>` component is a declarative way to perform data mutations: creating, updating, and deleting data. While it might be a mind-shift to think about these tasks as "navigation", it's how the web has handled mutations since before JavaScript was created!
 
 ```tsx
@@ -94,7 +94,7 @@ When the `action` prop is omitted, `<Form>` and `<form>` will sometimes call dif
 - `<form>` uses the current URL as the default which can lead to surprising results: forms inside parent routes will post to the child action if you're at the child's URL and the parents action when you're at the parent's URL. This means as the user navigates, the form's behavior changes.
 - `<Form>` will always post to the route's action, independent of the URL. A form in a parent route will always post to the parent, even if you're at the child's URL.
 
-For more information and usage, please refer to the [React Router `Form` docs][rr-form].
+<docs-info>For more information and usage, please refer to the [React Router `Form` docs][rr-form].</docs-info>
 
 See also:
 

diff --git a/docs/components/links.md b/docs/components/links.md
@@ -1,5 +1,6 @@
 ---
 title: Links
+toc: false
 ---
 
 # `<Links />`

diff --git a/docs/components/live-reload.md b/docs/components/live-reload.md
@@ -1,5 +1,6 @@
 ---
 title: LiveReload
+toc: false
 ---
 
 # `<LiveReload />`

diff --git a/docs/components/meta.md b/docs/components/meta.md
@@ -1,5 +1,6 @@
 ---
 title: Meta
+toc: false
 ---
 
 # `<Meta />`

diff --git a/docs/components/nav-link.md b/docs/components/nav-link.md
@@ -1,5 +1,6 @@
 ---
 title: NavLink
+toc: false
 ---
 
 # `<NavLink>`

diff --git a/docs/components/outlet.md b/docs/components/outlet.md
@@ -1,9 +1,10 @@
 ---
 title: Outlet
+toc: false
 ---
 
 # `<Outlet>`
 
-This <docs-info> is simply a re-export of [React Router's `Outlet`][rr-outlet].</docs-info>
+<docs-info>This component is simply a re-export of [React Router's `Outlet`][rr-outlet].</docs-info>
 
 [rr-outlet]: https://reactrouter.com/components/outlet
diff --git a/docs/components/prefetch-page-links.md b/docs/components/prefetch-page-links.md
@@ -1,5 +1,6 @@
 ---
 title: PrefetchPageLinks
+toc: false
 ---
 
 # `<PrefetchPageLinks />`

diff --git a/docs/components/scripts.md b/docs/components/scripts.md
@@ -1,5 +1,6 @@
 ---
 title: Scripts
+toc: false
 ---
 
 # `<Scripts />`

diff --git a/docs/file-conventions/entry.client.md b/docs/file-conventions/entry.client.md
@@ -1,5 +1,6 @@
 ---
 title: entry.client
+toc: false
 ---
 
 # entry.client

diff --git a/docs/file-conventions/entry.server.md b/docs/file-conventions/entry.server.md
@@ -1,5 +1,6 @@
 ---
 title: entry.server
+toc: false
 ---
 
 # entry.server

diff --git a/docs/file-conventions/root.md b/docs/file-conventions/root.md
@@ -1,5 +1,6 @@
 ---
 title: root
+toc: false
 ---
 
 # Root Route

diff --git a/docs/guides/bff.md b/docs/guides/bff.md
@@ -1,5 +1,6 @@
 ---
 title: Backend For Frontend
+toc: false
 ---
 
 # Backend For Your Frontend

diff --git a/docs/guides/streaming.md b/docs/guides/streaming.md
@@ -25,14 +25,11 @@ export async function loader({ params }: LoaderArgs) {
     params.packageId
   );
 
-  return json<LoaderData>({
-    packageLocation,
-  });
+  return json({ packageLocation });
 }
 
 export default function PackageRoute() {
-  const data = useLoaderData<typeof loader>();
-  const { packageLocation } = data;
+  const { packageLocation } = useLoaderData<typeof loader>();
 
   return (
     <main>

diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
@@ -1,5 +1,6 @@
 ---
 title: TypeScript
+toc: false
 ---
 
 # TypeScript

diff --git a/docs/hooks/use-action-data.md b/docs/hooks/use-action-data.md
@@ -1,9 +1,12 @@
 ---
 title: useActionData
+toc: false
 ---
 
 # `useActionData`
 
+<docs-info>This hook is simply a re-export of [React Router's `useActionData`][rr-useactiondata].</docs-info>
+
 This hook returns the JSON parsed data from your route action. It returns `undefined` if there hasn't been a submission at the current location yet.
 
 ```tsx lines=[3,12,21]
@@ -151,10 +154,13 @@ If you're using `<Form>` and don't care to support the cases above, you don't ne
 
 <docs-info>In general, if the form validation fails, return data from the action and render it in the component. But, once you actually change data (in your database, or otherwise), you should redirect.</docs-info>
 
+<docs-info>For more information and usage, please refer to the [React Router `useActionData` docs][rr-useactiondata].</docs-info>
+
 See also:
 
 - [`action`][action]
 - [`useTransition`][usetransition]
 
 [action]: ../route/action
 [usetransition]: ../hooks/use-transition
+[rr-useactiondata]: https://reactrouter.com/hooks/use-action-data
diff --git a/docs/hooks/use-before-unload.md b/docs/hooks/use-before-unload.md
@@ -39,6 +39,6 @@ function SomeForm() {
 }
 ```
 
-For more information and usage, please refer to the [React Router `useBeforeUnload` docs][rr-usebeforeunload].
+<docs-info>For more information and usage, please refer to the [React Router `useBeforeUnload` docs][rr-usebeforeunload].</docs-info>
 
 [rr-usebeforeunload]: https://reactrouter.com/hooks/use-before-unload
diff --git a/docs/hooks/use-fetchers.md b/docs/hooks/use-fetchers.md
@@ -1,5 +1,6 @@
 ---
 title: useFetchers
+toc: false
 ---
 
 # `useFetchers`

diff --git a/docs/hooks/use-form-action.md b/docs/hooks/use-form-action.md
@@ -23,6 +23,6 @@ function SomeComponent() {
 
 (Yes, HTML buttons can change the action of their form!)
 
-For more information and usage, please refer to the [React Router `useFormAction` docs][rr-useformaction].
+<docs-info>For more information and usage, please refer to the [React Router `useFormAction` docs][rr-useformaction].</docs-info>
 
 [rr-useformaction]: https://reactrouter.com/hooks/use-form-action
diff --git a/docs/hooks/use-loader-data.md b/docs/hooks/use-loader-data.md
@@ -1,9 +1,12 @@
 ---
 title: useLoaderData
+toc: false
 ---
 
 # `useLoaderData`
 
+<docs-info>This hook is simply a re-export of [React Router's `useLoaderData`][rr-useloaderdata].</docs-info>
+
 <docs-success>Watch the <a href="https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">📼 Remix Single</a>: <a href="https://www.youtube.com/watch?v=NXqEP_PsPNc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Loading data into components</a></docs-success>
 
 This hook returns the JSON parsed data from your route loader function.
@@ -21,3 +24,7 @@ export default function Invoices() {
   // ...
 }
 ```
+
+<docs-info>For more information and usage, please refer to the [React Router `useLoaderData` docs][rr-useloaderdata].</docs-info>
+
+[rr-useloaderdata]: https://reactrouter.com/hooks/use-loader-data
diff --git a/docs/hooks/use-matches.md b/docs/hooks/use-matches.md
@@ -1,5 +1,6 @@
 ---
 title: useMatches
+toc: false
 ---
 
 # `useMatches`

diff --git a/docs/hooks/use-navigation.md b/docs/hooks/use-navigation.md
@@ -20,6 +20,6 @@ function SomeComponent() {
 }
 ```
 
-For more information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].
+<docs-info>For more information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].</docs-info>
 
 [rr-usenavigation]: https://reactrouter.com/hooks/use-navigation
diff --git a/docs/hooks/use-revalidator.md b/docs/hooks/use-revalidator.md
@@ -1,5 +1,6 @@
 ---
 title: useRevalidator
+toc: false
 ---
 
 # `useRevalidator`
@@ -26,6 +27,6 @@ function WindowFocusRevalidator() {
 }
 ```
 
-For more information and usage, please refer to the [React Router `useRevalidator` docs][rr-userevalidator].
+<docs-info>For more information and usage, please refer to the [React Router `useRevalidator` docs][rr-userevalidator].</docs-info>
 
 [rr-userevalidator]: https://reactrouter.com/hooks/use-revalidator
diff --git a/docs/hooks/use-route-loader-data.md b/docs/hooks/use-route-loader-data.md
@@ -25,6 +25,6 @@ Remix creates the route IDs automatically. They are simply the path of the route
 | `app/routes/teams.tsx`     | `"routes/teams"`     |
 | `app/routes/teams.$id.jsx` | `"routes/teams.$id"` |
 
-For more information and usage, please refer to the [React Router `useRouteLoaderData` docs][rr-userouteloaderdata].
+<docs-info>For more information and usage, please refer to the [React Router `useRouteLoaderData` docs][rr-userouteloaderdata].</docs-info>
 
 [rr-userouteloaderdata]: https://reactrouter.com/hooks/use-route-loader-data
diff --git a/docs/hooks/use-submit.md b/docs/hooks/use-submit.md
@@ -1,5 +1,6 @@
 ---
 title: useSubmit
+toc: false
 ---
 
 # `useSubmit`
@@ -71,6 +72,6 @@ function useSessionTimeout() {
 }
 ```
 
-For more information and usage, please refer to the [React Router `useSubmit` docs][rr-usesubmit].
+<docs-info>For more information and usage, please refer to the [React Router `useSubmit` docs][rr-usesubmit].</docs-info>
 
 [rr-usesubmit]: https://reactrouter.com/hooks/use-submit
diff --git a/docs/other-api/asset-imports.md b/docs/other-api/asset-imports.md
@@ -1,5 +1,6 @@
 ---
 title: Asset Imports
+toc: false
 ---
 
 # Asset URL Imports

diff --git a/docs/other-api/node.md b/docs/other-api/node.md
@@ -2,7 +2,9 @@
 title: "@remix-run/node"
 ---
 
-This contains utilities and polyfills for Node.js.
+# `@remix-run/node`
+
+This package contains utilities and polyfills for Node.js.
 
 <docs-info>Most of the time you will never be importing from this package directly as it's used internally by adapters such as `@remix-run/express`.</docs-info>
 

diff --git a/docs/other-api/serve.md b/docs/other-api/serve.md
@@ -1,5 +1,6 @@
 ---
 title: "@remix-run/serve"
+toc: false
 order: 3
 ---
 

diff --git a/docs/utils/defer.md b/docs/utils/defer.md
@@ -1,16 +1,16 @@
 ---
 title: defer
+toc: false
 ---
 
 # `defer`
 
 This is a shortcut for creating a streaming/deferred response. It assumes you are using `utf-8` encoding. From a developer perspective it behaves just like [`json()`][json], but with the ability to transport promises to your UI components.
 
 ```ts lines=[2,5,10]
-import type { LoaderFunction } from "@remix-run/node"; // or cloudflare/deno
 import { defer } from "@remix-run/node"; // or cloudflare/deno
 
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const aStillRunningPromise = loadSlowDataAsync();
 
   // So you can write this without awaiting the promise:
@@ -24,7 +24,7 @@ export const loader: LoaderFunction = async () => {
 You can also pass a status code and headers:
 
 ```ts lines=[9-14]
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const aStillRunningPromise = loadSlowDataAsync();
 
   return defer(

diff --git a/docs/utils/json.md b/docs/utils/json.md
@@ -1,5 +1,6 @@
 ---
 title: json
+toc: false
 ---
 
 # `json`

diff --git a/docs/utils/redirect.md b/docs/utils/redirect.md
@@ -1,5 +1,6 @@
 ---
 title: redirect
+toc: false
 ---
 
 # `redirect`

diff --git a/docs/utils/unstable-create-file-upload-handler.md b/docs/utils/unstable-create-file-upload-handler.md
@@ -1,5 +1,6 @@
 ---
 title: unstable_createFileUploadHandler
+toc: false
 ---
 
 # `unstable_createFileUploadHandler`

diff --git a/docs/utils/unstable-create-memory-upload-handler.md b/docs/utils/unstable-create-memory-upload-handler.md
@@ -1,5 +1,6 @@
 ---
 title: unstable_createMemoryUploadHandler
+toc: false
 ---
 
 # `unstable_createMemoryUploadHandler`