examples: fix typos (#82506)

## Summary

Fix typos in code, styles, and documentation across multiple example
projects

Chores:
- Correct variable name typo in the with-slate example
(edtorState→editorState)
- Fix CSS/SASS class name misspellings (populer→popular, Serach→Search,
serachSelector→searchSelector)
- Update example documentation and comments to fix English typos (Data
SOUCE→SOURCE, accessiblity→accessibility, exchanges, doesn't, deploying,
validates, quickly)

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

Co-authored-by: Joseph <[email protected]>

Author: JamBalaya56562

examples/blog-starter/src/app/_components/theme-switcher.tsx

@@ -101,7 +101,7 @@ const Script = memo(() => (
 ));
 
 /**
- * This component wich applies classes and transitions.
+ * This component applies classes and transitions.
  */
 export const ThemeSwitcher = () => {
   return (

examples/cms-buttercms/css/main.css

@@ -96,7 +96,7 @@ Start by creating the `blog`-type
 
 ```bash
 curl --location --request POST 'https://api.enterspeed.com/ingest/v2/1' \
---header 'X-Api-Key: [YOUR DATA SOUCE API KEY]' \
+--header 'X-Api-Key: [YOUR DATA SOURCE API KEY]' \
 --header 'Content-Type: application/json' \
 --data-raw '{
   "type": "blog",
@@ -108,7 +108,7 @@ Next, ingest the actual blog post
 
 ```bash
 curl --location --request POST 'https://api.enterspeed.com/ingest/v2/2' \
---header 'X-Api-Key: [YOUR DATA SOUCE API KEY]' \
+--header 'X-Api-Key: [YOUR DATA SOURCE API KEY]' \
 --header 'Content-Type: application/json' \
 --data-raw '{
   "type": "blogPost",

examples/cms-enterspeed/README.md

@@ -22,7 +22,7 @@ export default defineType({
           name: "alt",
           type: "string",
           title: "Alternative text",
-          description: "Important for SEO and accessiblity.",
+          description: "Important for SEO and accessibility.",
           validation: (rule) => {
             return rule.custom((alt, context) => {
               if ((context.document?.picture as any)?.asset?._ref && !alt) {

examples/cms-sanity/sanity/schemas/documents/author.ts

@@ -66,7 +66,7 @@ export default defineType({
           name: "alt",
           type: "string",
           title: "Alternative text",
-          description: "Important for SEO and accessiblity.",
+          description: "Important for SEO and accessibility.",
           validation: (rule) => {
             return rule.custom((alt, context) => {
               if ((context.document?.coverImage as any)?.asset?._ref && !alt) {

examples/cms-sanity/sanity/schemas/documents/post.ts

@@ -96,7 +96,7 @@ ${componentFiles
 // See https://nextjs.org/docs/advanced-features/dynamic-import
 // At the end you will have single preloaded script for each lazy loading module.
 // Editing mode doesn't work well with dynamic components in nextjs: dynamic components are not displayed without refresh after a rendering is added.
-// This happens beacuse Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
+// This happens because Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
 // So we use require() to obtain dynamic components in editing mode while preserving dynamic logic for non-editing scenarios
 // As we need to be able to seamlessly work with dynamic components in both editing and normal modes, different componentFactory functions will be passed to app
 

examples/cms-sitecore-xmcloud/scripts/templates/component-factory.ts

@@ -252,15 +252,15 @@ $search-filter-slider-bg-active: $bg-blue;
 $search-filter-slider-btn-border: $border-gray;
 $search-filter-slider-btn-bg: $bg-light-gray;
 $search-filter-slider-btn-bg-active: $bg-light-gray-active;
-//Serach Pagination
+//Search Pagination
 $search-pagination-bg: transparent;
 $search-pagination-active-bg: $bg-blue;
 $search-pagination-active-color: $text-white;
 $search-pagination-hover-color: $text-blue;
 $search-pagination-hover-bg: $bg-submenu-active;
 $search-pagination-hover-border: $border-basic-active;
 //Search selector
-$serach-selector-variant-color-active: $text-blue-active;
+$search-selector-variant-color-active: $text-blue-active;
 //Typehead
 $tt-color: $text-basic;
 $tt-color-active: $text-blue;

examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/vars/_colors.scss

@@ -119,7 +119,7 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 | `NEXT_PUBLIC_BASE_URL`               | Insert base url of frontend                                             | http://localhost:3000    | Used for generating sitemap, redirects etc.                                                                                                                         |
 | `NEXT_PUBLIC_WORDPRESS_API_URL`      | Insert base url of your WordPress installation                          | http://wp-domain.com     | Used when requesting wordpress for data                                                                                                                             |
 | `NEXT_PUBLIC_WORDPRESS_API_HOSTNAME` | The hostname without protocol for your WordPress installation           | wp-domain.com            | Used for dynamically populating the next.config images remotePatterns                                                                                               |
-| `HEADLESS_SECRET`                    | Insert the same random key, that you generated for your `wp-config.php` | INSERT_RANDOM_SECRET_KEY | Used for public exhanges between frontend and backend                                                                                                               |
+| `HEADLESS_SECRET`                    | Insert the same random key, that you generated for your `wp-config.php` | INSERT_RANDOM_SECRET_KEY | Used for public exchanges between frontend and backend                                                                                                               |
 | `WP_USER`                            | Insert a valid WordPress username                                       | username                 | Username for a system user created specifically for interacting with your WordPress installation                                                                    |
 | `WP_APP_PASS`                        | Insert application password                                             | 1234 5678 abcd efgh      | [Generate an application password](https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/) for the WordPress user defined in `WP_USER` |
 
@@ -195,7 +195,7 @@ This `functions.php` is implementing different useful features for using WordPre
 
 - Setting up a primary menu (fetched in `Navigation..tsx`)
 - Rewriting preview and rest links to match the frontend instead of the WordPress installation
-- Implementing cache tag revalidation everytime you update a post in WordPress
+- Implementing cache tag revalidation every time you update a post in WordPress
 - Implementing rest endpoints for sitemap generation
 
 ```php

examples/cms-wordpress/README.md

@@ -59,7 +59,7 @@ export async function getServerSideProps(context) {
 
   const { collection } = connection;
 
-  // Check connection with a KV GET operation for a key that doesnt exist
+  // Check connection with a KV GET operation for a key that doesn't exist
   let isConnected = false;
   try {
     await collection.get("testingConnectionKey");

examples/with-couchbase/pages/index.js

@@ -235,7 +235,7 @@ export default function Home() {
           </h2>
           <p className={inter.className}>
             Next.js 13 continues to bring many new features to developers,
-            especially those depoying on Vercel. We are trying to keep up, we
+            especially those deploying on Vercel. We are trying to keep up, we
             promise!
           </p>
         </div>