fix(examples, docs): fix typos

contributors.yml

@@ -357,3 +357,4 @@
 - zachdtaylor
 - zainfathoni
 - zhe
+- apeltop

docs/guides/migrating-react-router-app.md

@@ -159,7 +159,7 @@ export default function Root() {
 
 Notice a few things here:
 
-- We got rid of the `noscript` tag. We're server rendering now, which means users who disable JavaScript will still be able to see our app (and over time, as you make [a few tweaks to improve progressive enahancement](../pages/philosophy#progressive-enhancement), much of your app should still work).
+- We got rid of the `noscript` tag. We're server rendering now, which means users who disable JavaScript will still be able to see our app (and over time, as you make [a few tweaks to improve progressive enhancement](../pages/philosophy#progressive-enhancement), much of your app should still work).
 - Inside of the root element we render an `Outlet` component from `@remix-run/react`. This is the same component that you would normally use to render your matched route in a React Router app; it serves the same function here, but it's adapter for the router in Remix.
 
 <docs-warning><strong>Important:</strong> be sure to delete the `index.html` from your `public` directory after you've created your root route. Keeping the file around may cause your server to send that HTML instead of your Remix app when accessing the `/` route.</docs-warning>

examples/google-analytics/app/utils/gtags.client.ts

@@ -15,7 +15,7 @@ declare global {
 export const pageview = (url: string, trackingId: string) => {
   if (!window.gtag) {
     console.warn(
-      "window.gtag is not defined. This could mean your google anylatics script has not loaded on the page yet."
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet."
     );
     return;
   }
@@ -36,7 +36,7 @@ export const event = ({
 }: Record<string, string>) => {
   if (!window.gtag) {
     console.warn(
-      "window.gtag is not defined. This could mean your google anylatics script has not loaded on the page yet."
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet."
     );
     return;
   }

examples/image-resize/app/routes/assets/resize/$.ts

@@ -76,7 +76,7 @@ function streamingResize(
   height: number | undefined,
   fit: keyof FitEnum
 ) {
-  // create the sharp transform pipline
+  // create the sharp transform pipeline
   // https://sharp.pixelplumbing.com/api-resize
   // you can also add watermarks, sharpen, blur, etc.
   const sharpTransforms = sharp()
@@ -162,7 +162,7 @@ function handleError(error: unknown) {
     });
   }
 
-  // if there is an error proccessing the image, we return a 500 error
+  // if there is an error processing the image, we return a 500 error
   return new Response(errorT.message, {
     status: 500,
     statusText: errorT.message,

examples/infinite-scrolling/app/routes/offset/advanced.tsx

@@ -92,10 +92,10 @@ export default function Index() {
     if (!hydrating) return;
     if (!parentRef.current) return;
 
-    const inifiniteScrollTop = sessionStorage.getItem("infiniteScrollTop");
-    if (!inifiniteScrollTop) return;
+    const infiniteScrollTop = sessionStorage.getItem("infiniteScrollTop");
+    if (!infiniteScrollTop) return;
 
-    parentRef.current.scrollTop = Number(inifiniteScrollTop);
+    parentRef.current.scrollTop = Number(infiniteScrollTop);
 
     return () => {
       sessionStorage.removeItem("infiniteScrollTop");

examples/infinite-scrolling/app/routes/page/advanced.tsx

@@ -93,10 +93,10 @@ export default function Index() {
     if (!hydrating) return;
     if (!parentRef.current) return;
 
-    const inifiniteScrollTop = sessionStorage.getItem("infiniteScrollTop-page");
-    if (!inifiniteScrollTop) return;
+    const infiniteScrollTop = sessionStorage.getItem("infiniteScrollTop-page");
+    if (!infiniteScrollTop) return;
 
-    parentRef.current.scrollTop = Number(inifiniteScrollTop);
+    parentRef.current.scrollTop = Number(infiniteScrollTop);
 
     return () => {
       sessionStorage.removeItem("infiniteScrollTop");

examples/io-ts-formdata-decoding/app/routes/index.tsx

@@ -21,7 +21,7 @@ type ActionData = {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  // Using `FormData` with TypeScript can be a little inconvinient:
+  // Using `FormData` with TypeScript can be a little inconvenient:
   //
   //     const formData = await request.formData();
   //     const name = formData.get("name");

examples/pm-app/app/routes/dashboard/projects/$projectId.tsx

@@ -335,7 +335,7 @@ export default function ProjectRoute() {
             <p>
               Updating members in this dialog will send a request to the server
               on each change to the autocomplete field. Notice optimistic
-              updates in the bacground UI as you make changes!
+              updates in the background UI as you make changes!
             </p>
           </Note>
         </div>

examples/pm-app/app/styles/global.css

@@ -4,12 +4,12 @@
 @import "./_root.css";
 @import "./_utils.css";
 
-/* layout coponents */
+/* layout components */
 @import "./ui/_flex.css";
 @import "./ui/_stack.css";
 @import "./ui/_max-container.css";
 
-/* other ui coponents */
+/* other ui components */
 @import "./ui/_button.css";
 @import "./ui/_token.css";
 @import "./ui/_form.css";

examples/route-modal/app/routes/invoices/$id/edit.tsx

@@ -44,7 +44,7 @@ export const loader: LoaderFunction = async ({ params }) => {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  // Here we can update our dabatase with the updated invoice
+  // Here we can update our database with the updated invoice
 
   // Redirect back to invoice list
   return redirect("/invoices");

examples/route-modal/app/routes/invoices/add.tsx

@@ -19,7 +19,7 @@ export const links: LinksFunction = () => {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  // Here we can update our dabatase with the new invoice
+  // Here we can update our database with the new invoice
 
   // This is just so we can see the transition
   return new Promise((resolve) =>