diff --git a/contributors.yml b/contributors.yml
index bfb5eb0f5c7..9101fa076f5 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -357,3 +357,4 @@
- zachdtaylor
- zainfathoni
- zhe
+- apeltop
diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md
index c8dfd32794b..2c8c0d2bcda 100644
--- a/docs/guides/migrating-react-router-app.md
+++ b/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.
Important: 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.
diff --git a/examples/google-analytics/app/utils/gtags.client.ts b/examples/google-analytics/app/utils/gtags.client.ts
index 2fdc6900b31..7f5e441fc84 100644
--- a/examples/google-analytics/app/utils/gtags.client.ts
+++ b/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) => {
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;
}
diff --git a/examples/image-resize/app/routes/assets/resize/$.ts b/examples/image-resize/app/routes/assets/resize/$.ts
index cf50155d477..4b91c645d7d 100644
--- a/examples/image-resize/app/routes/assets/resize/$.ts
+++ b/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,
diff --git a/examples/infinite-scrolling/app/routes/offset/advanced.tsx b/examples/infinite-scrolling/app/routes/offset/advanced.tsx
index b9ec7fd4b4e..62476456097 100644
--- a/examples/infinite-scrolling/app/routes/offset/advanced.tsx
+++ b/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");
diff --git a/examples/infinite-scrolling/app/routes/page/advanced.tsx b/examples/infinite-scrolling/app/routes/page/advanced.tsx
index c3cac0ec05e..6763e08fb38 100644
--- a/examples/infinite-scrolling/app/routes/page/advanced.tsx
+++ b/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");
diff --git a/examples/io-ts-formdata-decoding/app/routes/index.tsx b/examples/io-ts-formdata-decoding/app/routes/index.tsx
index 5db24f47baf..02f633f67d2 100644
--- a/examples/io-ts-formdata-decoding/app/routes/index.tsx
+++ b/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");
diff --git a/examples/pm-app/app/routes/dashboard/projects/$projectId.tsx b/examples/pm-app/app/routes/dashboard/projects/$projectId.tsx
index 16a7fca6ca1..4a922bf90c3 100644
--- a/examples/pm-app/app/routes/dashboard/projects/$projectId.tsx
+++ b/examples/pm-app/app/routes/dashboard/projects/$projectId.tsx
@@ -335,7 +335,7 @@ export default function ProjectRoute() {
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!
diff --git a/examples/pm-app/app/styles/global.css b/examples/pm-app/app/styles/global.css
index 144095da2fb..3f9f94f392b 100644
--- a/examples/pm-app/app/styles/global.css
+++ b/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";
diff --git a/examples/route-modal/app/routes/invoices/$id/edit.tsx b/examples/route-modal/app/routes/invoices/$id/edit.tsx
index 19a5a297798..77f2a1dc3bd 100644
--- a/examples/route-modal/app/routes/invoices/$id/edit.tsx
+++ b/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");
diff --git a/examples/route-modal/app/routes/invoices/add.tsx b/examples/route-modal/app/routes/invoices/add.tsx
index 94fd5bd03fa..31d480490e8 100644
--- a/examples/route-modal/app/routes/invoices/add.tsx
+++ b/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) =>