fix(docs): typos (#6000)

documentation/blog/2023-08-12-react-admin-vs-refine.md

@@ -458,7 +458,7 @@ To sum it up:
 
 - Refine is not only an open-core solution but also a performance-driven framework with it's architecture.
 - Its headless nature keeps your project well within the realm of vanilla React, making integration seamless.This architecture ensures that your project remains firmly rooted in vanilla React, simplifying integration.
-- One of the most importatnt aspect is that Refine empowers you with free enterprise-level features, similar to those found in react-admin's enterprise package, without any additional financial commitment.
+- One of the most important aspect is that Refine empowers you with free enterprise-level features, similar to those found in react-admin's enterprise package, without any additional financial commitment.
 
 From our point of view, this combination of capabilities, coupled with its user-friendly nature and and remarkably small bundle size positions Refine as an perfect choice for web developers.
 

documentation/blog/2023-10-26-htmx.md

@@ -286,7 +286,7 @@ Additionally, htmx offers a programmatic method for cancelling requests: To stop
 
 ## CSS Transitions
 
-HTMX lets you perform CSS Transitions without the need for javascript. we will illustrate this wwith an example:
+HTMX lets you perform CSS Transitions without the need for javascript. we will illustrate this with an example:
 
 ```tsx
 <div id="div1">The Empire</div>

documentation/blog/2024-02-05-docker-alternatives.md

@@ -283,7 +283,7 @@ This will build the Dockerfile in the current directory with Buildkit, creating
 
 ## **Comparison Chart**
 
-Below is a comparison table summarizing the key differences between all the Docker alternatives disussed above.
+Below is a comparison table summarizing the key differences between all the Docker alternatives discussed above.
 
 | Feature           | Docker                                | containerd                                    | LXD                                             | BuildKit                                | Podman                        | buildah                           | runc                                                          |
 | ----------------- | ------------------------------------- | --------------------------------------------- | ----------------------------------------------- | --------------------------------------- | ----------------------------- | --------------------------------- | ------------------------------------------------------------- |

documentation/blog/2024-02-16-async-vs-sync.md

@@ -1,6 +1,6 @@
 ---
 title: Synchronous vs. Asynchronous Programming
-description: This article explains the differences between the Syncronous and Asynchronous programming and when to use each.
+description: This article explains the differences between the Synchronous and Asynchronous programming and when to use each.
 slug: synchronous-vs-asynchronous
 authors: muhammad_khabbab
 tags: [javascript]

documentation/blog/2024-02-23-recharts.md

@@ -3,7 +3,7 @@ title: Create charts using Recharts
 description: We'll explore how to create charts in a Refine project using Recharts.
 slug: recharts
 authors: joseph_mawa
-tags: [react, refine]
+tags: [react, Refine]
 image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-02-23-recharts/social.png
 hide_table_of_contents: false
 ---
@@ -64,7 +64,7 @@ import {
 
 ## How to create a Refine project
 
-In this section, we will create a refine demo project.
+In this section, we will create a Refine demo project.
 
 ```sh
 npm create refine-app@latest
@@ -219,7 +219,7 @@ export default App;
 </p>
 </details>
 
-In the code above, we added another data provider. The data provider will fetch data from the [fast foods API](https://api.finefoods.refine.dev). It's a dummy API created by the refine team. You can use it to create simple projects when testing out refine. We will use the API to create charts later.
+In the code above, we added another data provider. The data provider will fetch data from the [fast foods API](https://api.finefoods.refine.dev). It's a dummy API created by the Refine team. You can use it to create simple projects when testing out refine. We will use the API to create charts later.
 
 You will now see a dashboard entry in the sidebar. The dashboard will look like the image below. We will create charts and render them in the dashboard in the next sub-sections.
 
@@ -276,7 +276,7 @@ The `<LineChart />` component has the `data` prop for passing the data you want
 ];
 ```
 
-Let's create a simple Line chart in our refine project. We will render it in the dashboard we created above. Start by creating the `src/pages/dashboard/charts/line-chart.tsx` file. Copy and paste the code below into it. The `charts` directory doesn't exist yet. Start by creating it.
+Let's create a simple Line chart in our Refine project. We will render it in the dashboard we created above. Start by creating the `src/pages/dashboard/charts/line-chart.tsx` file. Copy and paste the code below into it. The `charts` directory doesn't exist yet. Start by creating it.
 
 ```tsx title="src/pages/dashboard/charts/line-chart.tsx"
 import React from "react";
@@ -327,7 +327,7 @@ Let's now import the above component and render it in the `<DashboardPage />` co
 
 <details>
 
-<summary>Show DasboardPage code</summary>
+<summary>Show DashboardPage code</summary>
 
 <p>
 
@@ -462,7 +462,7 @@ To represent the above data in an area chart, you can use the `<AreaChart />` co
 </AreaChart>
 ```
 
-Let's now add an area chart to the refine project we created above. Create the `src/pages/dashboard/charts/area-chart.tsx` file. Copy and paste the code below into it.
+Let's now add an area chart to the Refine project we created above. Create the `src/pages/dashboard/charts/area-chart.tsx` file. Copy and paste the code below into it.
 
 ```tsx title="src/pages/dashboard/charts/area-chart.tsx"
 import {
@@ -572,7 +572,7 @@ Bar charts are among the most common charts for visualizing data. You can use it
 
 Like the other types of charts, the data you want to represent on a bar chart should be an array of objects. You need to pass it to the `<BarChart />` component as the value of the `data` prop.
 
-Let's add a bar chart to the dashboard in the refine project we created above. Create the `src/pages/dashboard/charts/bar-chart.tsx` file. Copy and paste the code below into it.
+Let's add a bar chart to the dashboard in the Refine project we created above. Create the `src/pages/dashboard/charts/bar-chart.tsx` file. Copy and paste the code below into it.
 
 ```tsx title="src/pages/dashboard/charts/bar-chart.tsx"
 import React from "react";
@@ -868,7 +868,7 @@ export { LineChartComponent } from "./line-chart";
 export { AreaChartComponent } from "./area-chart";
 export { BarChartComponent } from "./bar-chart";
 export { ScatterChartComponent } from "./scatter-chart";
-//highligh-next-line
+//highlight-next-line
 export { PieChartComponent } from "./pie-chart";
 ```
 

documentation/blog/2024-02-28-css-box-shadow.md

@@ -118,7 +118,7 @@ In this section, we will explore CSS Box shadow examples. Some of them are used
 
 **Example 1**
 
-In the example below, we are applying two box shadows seprated by commas. The first shadow effect has y-offset of `1px` and blur radius of `2px`. The x-offset and spread radius are both zero. The second box shadow has positive length values except the x-offset. Its value is zero.
+In the example below, we are applying two box shadows separated by commas. The first shadow effect has y-offset of `1px` and blur radius of `2px`. The x-offset and spread radius are both zero. The second box shadow has positive length values except the x-offset. Its value is zero.
 
 ```css
 .box {
@@ -514,7 +514,7 @@ The code above will generate a box shadow that looks like the image below.
 
 **Example 20**
 
-In the box shadow example below we have two box shadows seprated by a comma. The first box shadow has positive value for the y-offset and blur radius but a negative value for the spread radius. In the second box radius all length values are zero except the spread radius.
+In the box shadow example below we have two box shadows separated by a comma. The first box shadow has positive value for the y-offset and blur radius but a negative value for the spread radius. In the second box radius all length values are zero except the spread radius.
 
 ```css
 .box {

documentation/blog/2024-02-29-ts-map.md

@@ -85,7 +85,7 @@ Where necessary, it uses the [`as`](https://www.typescriptlang.org/docs/handbook
 
 Before we get into the mechanics of the above examples, in this section, we spend some time to get a fair understanding of the above-mentioned underlying building blocks that make a custom-type mapper utility.
 
-### TypeScript Custom Type Mapper Building Blocks: The Index Singature Syntax
+### TypeScript Custom Type Mapper Building Blocks: The Index Signature Syntax
 
 TypeScript index signature syntax forms the most important component of a custom type mapper. An example looks like this:
 

documentation/blog/2024-03-07-internal-tools-development.md

@@ -12,7 +12,7 @@ hide_table_of_contents: false
 
 This post provides an industry-centric perspective on the track custom internal tools development. We cover the trail of emergent technologies in web based internal tools development, and present a comprehensive guide on building enterprise tools with cutting-edge open source frameworks and libraries in the React/Node.js ecosystem.
 
-Internal tools are specialized software applications used by a company's back-office departments. They empower a workforce by automating complex business processes and workflows for staff, managers, admnistrators and other stakeholders. Software based business process and workflow management helps companies achieve greater efficiency and productivity by enabling better collaboration among participants, more refined processes and streamlined workflows.
+Internal tools are specialized software applications used by a company's back-office departments. They empower a workforce by automating complex business processes and workflows for staff, managers, administrators and other stakeholders. Software based business process and workflow management helps companies achieve greater efficiency and productivity by enabling better collaboration among participants, more refined processes and streamlined workflows.
 
 In this post, we briefly review the current state of the enterprise tools landscape to understand how internal tools development looks like entering 2024. We first get a brief historical account of how off-the-shelf desktop based internal tools solutions made their way to the web via cloud hosted applications. We evaluate the pros and cons of internal tool builder platforms and differentiate them from more custom development using cutting edge open source technologies in the React/Node.js ecosystem.
 
@@ -58,7 +58,7 @@ Below is a quick rundown of common enterprise internal tools used by stable busn
   For C level administrators and decision makers, user and roles management is a key feature implemented to allow structuring their organization. Approval workflow is another feature typical to admin panels for all levels of admin scopes.
 
 - **Dashboards**
-  Dasboards present data metrics, visualizations, reports and real-time analytics in a page specifically intended to provide insightful overview to a stakeholder. Dashboards are used in ERP softwares, admin panels, business intelligence software and any tool that offer central access and management of resources.
+  Dashboards present data metrics, visualizations, reports and real-time analytics in a page specifically intended to provide insightful overview to a stakeholder. Dashboards are used in ERP software, admin panels, business intelligence software and any tool that offer central access and management of resources.
 
 - **Business Intelligence Tools**
   Essentially, business intelligence tools specialize in capturing, transforming, manipulating and analyzing data. Generating reports and visualizations are integral parts of BI software. In most cases, data processing is handled by powerful engines running in the background. BI tools are also able to integrate with ERP systems and third party services.
@@ -76,7 +76,7 @@ Below is a quick rundown of common enterprise internal tools used by stable busn
 - **Collaboration Tools**
   Central to workforce empowerment are collaboration tools such as Slack, Google Groups, Discord, Discourse, Trello and a host of other technologies that foster workplace communication and teamwork. Most of them start with a free tier and offer commercial features on its top.
 
-Apart from these common types, internal tools vary specific to industries. For example, inventory management software help automate and manage processes in warehouses, e-commerce stocks and sales stores. Logistics and supply chain software refine complex workflows that involve multiple stakeholders. And there are other types of internal tools for sourcing and procurement, manufacturing, research & development and engineering, asset management, etc.
+Apart from these common types, internal tools vary specific to industries. For example, inventory management software help automate and manage processes in warehouses, e-commerce stocks and sales stores. Logistics and supply chain software Refine complex workflows that involve multiple stakeholders. And there are other types of internal tools for sourcing and procurement, manufacturing, research & development and engineering, asset management, etc.
 
 Besides implementing domain specific logic for each of these types, internal tools have to implement the following core functionalities:
 
@@ -144,7 +144,7 @@ Modern internal tools development involves the following considerations that app
 - **Scalability and adaptability**. Mostly shaped by architectural decisions and choice of underlying technologies.
 - **Extensibility and integration support**.
 - **Development speed and efficiency**. Depends on the team size, sprint cycles, and the velocity offered by development infrastructure, frameworks and libraries.
-- **Developer experience**. Often aligns with optimal developer environment, technological choices and the team culture that enables developement of a product.
+- **Developer experience**. Often aligns with optimal developer environment, technological choices and the team culture that enables development of a product.
 - **User experience, interface design and implementation**
 - **Backend API integration, data fetching and management**
 
@@ -204,7 +204,7 @@ Refine offers unmatched flexibility in backend API integration. Again, Refine's
 
 Refine's minimal coupling ensures a greater surface for backend API integration with the help of data providers. This gives Refine an upper edge over Redwood which is coupled to a backend that offers somewhat tedious integrations to external APIs via Prisma and other middlewares.
 
-**Interoperability and Mutliple Data Sources**
+**Interoperability and Multiple Data Sources**
 
 Internal tools are centered around a single source of data that is shared across business units. Interoperability of internal tools is essential to enterprise operations. Refine is geared to implement interoperable modules by connecting to a single data source with a primary data provider. In BI tools, that usually fetch and process data from multiple sources, multiple data providers can also be used to access the necessary data.
 

documentation/blog/2024-03-11-jwt-authentication.md

@@ -237,7 +237,7 @@ Let's implement a simple user authorization with JWTs. Add the changes below to
 //highlight-start
 require("dotenv").config();
 const jwt = require("jsonwebtoken");
-//highlight-ned
+//highlight-end
 const express = require("express");
 const app = express();
 

documentation/blog/2024-03-18-low-code-platforms.md

@@ -150,4 +150,4 @@ In short, while low-code can kickstart app development, relying on it without un
 
 Low-code platforms are ideal for quick prototyping and involving non-technical users in app creation. However, as project complexity increases, the limitations of low-code platforms become apparent, often leading to challenges in scalability and customization.
 
-Despite these challenges, low-code remains a usefull tool for certain use cases, underscoring the importance of choosing the right approach based on project requirements. Ultimately, while low-code platforms offer a promising route for fast and accessible app development, they may not always be the best choice for more complex, long-term software projects.
+Despite these challenges, low-code remains a useful tool for certain use cases, underscoring the importance of choosing the right approach based on project requirements. Ultimately, while low-code platforms offer a promising route for fast and accessible app development, they may not always be the best choice for more complex, long-term software projects.