From b46695f93945dd84dc05e344f3d700d88f4cdce9 Mon Sep 17 00:00:00 2001
From: Andreas Deininger <andreas@deininger.net>
Date: Fri, 3 Jan 2025 21:58:49 +0100
Subject: [PATCH] Fix typos (#1219)

---
 content/en/blog/preact-x.md                 |  4 ++--
 content/en/blog/simplifying-islands-arch.md | 12 ++++++------
 content/en/guide/v10/no-build-workflows.md  |  2 +-
 content/en/guide/v10/options.md             |  2 +-
 content/en/guide/v10/typescript.md          |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/en/blog/preact-x.md b/content/en/blog/preact-x.md
index 8e2cd30f4..f75b148b7 100644
--- a/content/en/blog/preact-x.md
+++ b/content/en/blog/preact-x.md
@@ -64,14 +64,14 @@ const App = () => {
 
 In 10.8.0 we introduced [state settling](https://github.com/preactjs/preact/pull/3553), this would ensure that if a component updates hook-state
 during render that we'd pick this up, cancel prior effects and render on. We'd of course have to ensure that this didn't loop but this feature
-reduces the amount of renders that are queued up because of in-render state invocations, this feature also increased our compatability with the
+reduces the amount of renders that are queued up because of in-render state invocations, this feature also increased our compatibility with the
 React ecosystem as a lot of libraries relied on effects not being called multiple times due to in-render state updates.
 
 ### 10.11.0
 
 After a lot of research we found a way to introduce [useId](https://github.com/preactjs/preact/pull/3583) into Preact, this required a ton of research
 of how we could go about adding unique values for a given tree-structure. One of our maintainers wrote about
-[our research at the time](https://www.jovidecroock.com/blog/preact-use-id) and we've iterated on it ever since trying to make it as collission free as possible...
+[our research at the time](https://www.jovidecroock.com/blog/preact-use-id) and we've iterated on it ever since trying to make it as collision free as possible...
 
 ### 10.15.0
 
diff --git a/content/en/blog/simplifying-islands-arch.md b/content/en/blog/simplifying-islands-arch.md
index 50216c7dd..5e70d0727 100644
--- a/content/en/blog/simplifying-islands-arch.md
+++ b/content/en/blog/simplifying-islands-arch.md
@@ -11,7 +11,7 @@ authors:
 
 ## Intro
 
-This guide is a simple walkthrough to understand how island architechture works
+This guide is a simple walkthrough to understand how island architecture works
 and being able to setup your own using tools you already have around you.
 
 First off, what are islands ? You can read more about it's origin from 
@@ -39,7 +39,7 @@ apps.
 
 Here's an overview
 
-1. Intially render the view on the server as a static page.
+1. Initially render the view on the server as a static page.
 2. Hydrate the app on client
 
 To go into the details of each.
@@ -68,7 +68,7 @@ pick up. Hapi, Koa, Fastify, etc.
 import { h } from 'preact'
 import preactRenderToString from 'preact-render-to-string'
 
-// ...remainig express.js setup
+// ...remaining express.js setup
 
 const HomePage = () => {
   return h('h1', {}, 'hello')
@@ -259,7 +259,7 @@ output.
 moving on to the client side config, which does add a few more things than
 simply providing an entry and getting an output.
 
-This is shortened out to explain the relavant bits
+This is shortened out to explain the relevant bits
 
 ```js
 // webpack.config.client.js
@@ -350,7 +350,7 @@ We can now move on to each folders' significance here.
 ## `client`
 
 The `src/client` in this `main` branch is used to write the `mount` point code
-that get's sent with the rendered html.
+that gets sent with the rendered html.
 
 You add selective mounting based on pages and selectors that you wish to use,
 even though it would fetch multiple JS files, these files are never to have
@@ -458,4 +458,4 @@ hydration / island styled hydration with nodejs.
 Most of this can be achieved with almost all bundlers and a little more
 modification to how the configurations are generated, can help you achieve a
 similar DX to astro though you are better off using astro if you aren't a fan of
-maintaining configs.
\ No newline at end of file
+maintaining configs.
diff --git a/content/en/guide/v10/no-build-workflows.md b/content/en/guide/v10/no-build-workflows.md
index 3c61145a9..eb5b8f56a 100644
--- a/content/en/guide/v10/no-build-workflows.md
+++ b/content/en/guide/v10/no-build-workflows.md
@@ -68,7 +68,7 @@ utilize import maps, but a basic example looks like the following:
 
 We create a `<script>` tag with a `type="importmap"` attribute, and then define the modules we'd like to use
 inside of it as JSON. Later, in a `<script type="module">` tag, we can import these modules using bare specifiers,
-similiar to what you'd see in Node.
+similar to what you'd see in Node.
 
 > **Note:** We use `?external=preact` in the example above as https://esm.sh will helpfully provide the
 > module you're asking for as well as its dependencies -- for `htm/preact`, this means also providing a
diff --git a/content/en/guide/v10/options.md b/content/en/guide/v10/options.md
index 6fc1126f2..d1ac26375 100644
--- a/content/en/guide/v10/options.md
+++ b/content/en/guide/v10/options.md
@@ -70,7 +70,7 @@ Invoked immediately after a vnode is rendered, once its DOM representation is co
 
 **Signature:** `(event: Event) => any`
 
-Invoked just before a DOM event is handled by its associated Virtual DOM listener. When `options.event` is setted, the event which is event listener argument is replaced return value of `options.event`.
+Invoked just before a DOM event is handled by its associated Virtual DOM listener. When `options.event` is set, the event which is event listener argument is replaced return value of `options.event`.
 
 #### `options.requestAnimationFrame`
 
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
index bc52b6e96..d29dc344f 100644
--- a/content/en/guide/v10/typescript.md
+++ b/content/en/guide/v10/typescript.md
@@ -294,7 +294,7 @@ This helps a lot if you want to make sure that the elements you `ref` to are inp
 
 ## Typing context
 
-`createContext` tries to infer as much as possible from the intial values you pass to:
+`createContext` tries to infer as much as possible from the initial values you pass to:
 
 ```tsx
 import { h, createContext } from "preact";
@@ -382,7 +382,7 @@ Most hooks don't need any special typing information, but can infer types from u
 
 ### useState, useEffect, useContext
 
-`useState`, `useEffect` and `useContext` all feature generic types so you don't need to annotate extra. Below is a minimal component that uses `useState`, with all types infered from the function signature's default values.
+`useState`, `useEffect` and `useContext` all feature generic types so you don't need to annotate extra. Below is a minimal component that uses `useState`, with all types inferred from the function signature's default values.
 
 ```tsx
 const Counter = ({ initial = 0 }) => {