docs: fix typos in article

Author: atinux

docs/content/5.blog/2.drawing-app-with-nuxt-and-cloudflare-r2.md

@@ -16,11 +16,11 @@ category: Tutorial
 
 ## Introduction
 
-I won't go into each details of the code, but I'll try to explain the main concepts and how to build a drawing app with Nuxt and Cloudflare R2.
+I won't go into each detail of the code, but I'll try to explain the main concepts and how to build a drawing app with Nuxt and Cloudflare R2.
 
-Atidraw is a web application that lets you to create and share your drawings with the world. Harnessing the power of OAuth for user authentication and Cloudflare R2 to store and list the drawings. 
+Atidraw is a web application that lets you create and share your drawings with the world. Our app uses OAuth for user authentication and Cloudflare R2 to store and list drawings.
 
-The application is running with server-side rendering on the edge using Cloudflare Pages on the Workers free plan.
+The application runs with server-side rendering on the edge using Cloudflare Pages on the Workers free plan.
 
 ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1723210615/nuxthub/344159247-85f79def-f633-40b7-97c2-3a8579e65af1_xyrfin.jpg" controls class="lg:w-2/3 h-auto border dark:border-gray-800 rounded"}
   :source{src="https://res.cloudinary.com/nuxt/video/upload/v1723210615/nuxthub/344159247-85f79def-f633-40b7-97c2-3a8579e65af1_xyrfin.webm" type="video/webm"}
@@ -29,15 +29,15 @@ The application is running with server-side rendering on the edge using Cloudfla
 ::
 
 ::note{to="https://draw.nuxt.dev" icon="i-ph-rocket-launch-duotone" color="blue" target="_blank"}
-  The demo is available on **draw.nuxt.dev**.
+  The demo is available at **draw.nuxt.dev**.
 ::
 ::callout{to="https://github.com/atinux/atidraw" icon="i-simple-icons-github" color="gray" target="_blank"}
-  The source code of the app is available on **github.com/atinux/atidraw**.
+  The source code of the app is available at **github.com/atinux/atidraw**.
 ::
 
 ## Project Dependencies
 
-Our Nuxt application is using the following dependencies:
+Our Nuxt application uses the following dependencies:
 
 - [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils) for user authentication
 - [`signature_pad`](https://github.com/szimek/signature_pad) for the drawing canvas
@@ -61,16 +61,16 @@ export default defineNuxtConfig({
 ```
 
 ::note
-The `blob` option will use Cloudflare platform proxy in development and automatically create a Cloudflare R2 bucket for your project when you deploy it. It also provide helpers to upload and list files.
+The `blob` option will use Cloudflare platform proxy in development and automatically create a Cloudflare R2 bucket for your project when you deploy it. It also provides helpers to upload and list files.
 ::
 
 ::tip
-The project is also using the `future.compatibilityVersion: 4` option to use the [new directory structure](https://nuxt.com/docs/getting-started/upgrade#new-directory-structure).
+The project is also using the `future.compatibilityVersion: 4` option to leverage the [new directory structure](https://nuxt.com/docs/getting-started/upgrade#new-directory-structure).
 ::
 
 ## User Authentication
 
-For user authentication, we'll use [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils), it providers helpers to authenticate users with OAuth providers and storing the user session in encrypted cookies.
+For user authentication, we'll use [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils). It provides functions to authenticate users with OAuth providers and stores the user session in encrypted cookies.
 
 First, we need to set up a session secret (used to encrypt & decrypt the session cookie) and our OAuth application credentials in the `.env` file:
 
@@ -101,14 +101,14 @@ export default oauthGitHubEventHandler({
 ```
 
 ::tip
-The `.get.ts` suffix is indicating that only GET requests will be handled by this route.
+The `.get.ts` suffix indicates that only GET requests will be handled by this route.
 ::
 
 When the user hits `/auth/github`:
 1. `oauthGitHubEventHandler` redirects the user to the GitHub OAuth page
-2. The user is redirected back to **/auth/github**
+2. The user is then redirected back to **/auth/github**
 3. `onSuccess()` is called and the user session is set in a cookie
-4. The user is redirected to **/draw**
+4. The user is finally redirected to **/draw**
 
 In [`app/pages/draw.vue`](https://github.com/atinux/atidraw/blob/main/app/pages/draw.vue), we can leverage [`useUserSession()`](https://github.com/atinux/nuxt-auth-utils?tab=readme-ov-file#vue-composable) to know if the user is authenticated or not.
 
@@ -251,18 +251,18 @@ export default eventHandler(async (event) => {
 ```
 
 ::tip
-The `requireUserSession()` helper is provided by [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils) and will throw a `401` error if the user is not authenticated.
+The `requireUserSession()` function is provided by [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils) and will throw a `401` error if the user is not authenticated.
 ::
 
-As you can see, we don't need to have a database as we store the user metadata in the Cloudflare R2 bucket custom metadata.
+As you can see, we don't need a database as we store the user metadata in the Cloudflare R2 bucket custom metadata.
 
 ::note
-Learn more about the [`hubBlob()`](/docs/storage/blob) server helper to work with the Cloudflare R2 bucket.
+Learn more about the [`hubBlob()`](/docs/storage/blob) server function to work with the Cloudflare R2 bucket.
 ::
 
 ## List Drawings
 
-It's time to list our users drawings, first, we need to create a new API route in `server/api/drawings.get.ts`:
+It's time to list our user drawings! First, however, we need to create a new API route in `server/api/drawings.get.ts`:
 
 ```ts [server/api/drawings.get.ts]
 export default eventHandler(async (event) => {
@@ -293,15 +293,17 @@ const { data } = await useFetch('/api/drawings')
 </template>
 ```
 
+::tip{icon="i-ph-rocket-launch"}
 That's it! We have a minimal and fully functional drawing application.
+::
 
 ## Drawings Order
 
 You may have noticed that the last drawing is displayed last, this is because Cloudflare R2 is using alphabetical order to list the files and we use the timestamp (using `Date.now()`) as the file name. Also, R2 doesn't support listing files with a custom order.
 
 Even though it's easy to add a Cloudflare D1 database with [`hubDatabase()`](/docs/storage/database), I wanted to keep this example as simple as possible.
 
-Instead, I had the idea to use the timestamp in 2050 minus the timestamp of the drawing to get a descending order. Yeah, it's a bit hacky but it works, until 2050, it's still a long time 😄.
+Instead, I had the idea to use the timestamp in 2050 minus the timestamp of the drawing to get a descending order. It's not perfect but it works, until 2050, it's still a long time 😄.
 
 Let's update our **/api/upload** route to update the filename:
 
@@ -465,13 +467,13 @@ Or go to https://admin.hub.nuxt.com and select your project.
 
 Congratulations! You've now built a fully functional drawing application using Nuxt and Cloudflare R2 for storage. Users can create drawings, save them to the cloud, and access them from anywhere.
 
-Next, we are going to leverage Cloudflare AI to generate the alt text for the user drawings (accessibility & SEO) as well as generating an alternative drawing using AI.
+Next, we are going to leverage Cloudflare AI to generate the alternative text for the user drawings (accessibility & SEO) as well as generating an alternative drawing using AI.
 
 Feel free to expand on this foundation and add your own unique features to make Atidraw yours!
 
 ::callout{to="https://github.com/atinux/atidraw" icon="i-simple-icons-github" color="gray" target="_blank"}
-  The source code of the app is available on **github.com/atinux/atidraw**.
+  The source code of the app is available at **github.com/atinux/atidraw**.
 ::
 ::note{to="https://draw.nuxt.dev" icon="i-ph-rocket-launch-duotone" target="_blank"}
-  The demo is available on **draw.nuxt.dev**.
+  The demo is available at **draw.nuxt.dev**.
 ::