Add env variables, update texts

src/routes/docs/tutorials/nuxt/step-2/+page.markdoc

@@ -27,7 +27,7 @@ Open the file `nuxt.config.ts`and add links to the stylesheets from the `appwrit
 The design system is then ready to be used in all pages and components with auto-import, meaning that you don't have to add import statements to the scripts.
 
 ```ts
-[nuxt.config.ts]
+// [nuxt.config.ts]
 
 export default defineNuxtConfig({
   app: {
@@ -55,23 +55,27 @@ npm run dev
 
 Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase.
 To take advantage of this we need to add the following directories:
-- components
-- composables
-- layouts
-- pages
+- `/components/` to keep our UI components in one place.
+  We will get back to it in [step 5](/docs/tutorials/nuxt/step-5)
+- `/composables/`for storing files handling global states and data fetching.
+  We will use it in [step 4](/docs/tutorials/nuxt/step-4)
+- `/layouts/` to store the page layouts
+- `/pages/` for the content pages.
 
-Create the `components` directory for our components.
-We will come back to it in step 5 when adding navigation.
+Run the following command to create these folders
 
-Add the `composables/` directory and leave it empty for now, too.
-We will use it in step 4 to handle the global states and data fetching for the user authentication.
+```sh
+mkdir components composables layouts pages
+```
 
-Next, create the `layouts/` directory and add the file `default.vue`.
+# Add layout {% #add-layout %}
+
+Go to the `layouts/` directory and add the file `default.vue`.
 Add the following code for the default layout.
 As you see it's nearly empty but it is needed for the automatic routing to work properly.
 
 ```vue
-[src/layouts/default.vue]
+// [layouts/default.vue]
 
 <template>
   <div>
@@ -86,13 +90,15 @@ export default {
 </script>
 ```
 
-The last directory to add is `pages`.
+# Add home page {% #add-home-page %}
+
+Next, head over to the `pages`directory.
 This is where we will keep the content that will render on our pages in the web application.
 Each file you put in here will automatically become a route.
-Add the file `index.vue` to the `/pages` directory and add the following code.
+Add the file `index.vue` with the following code.
 
 ```vue
-[pages/index.vue]
+// [pages/index.vue]
 
 <template>
   <div>
@@ -126,7 +132,7 @@ This is what your directory should look like after adding the new directories an
 └── tsconfig.json
 ```
 
-# Render page {% #rener-page %}
+# Render page {% #render-page %}
 
 If you run the development server now, it will still render the Nuxt Welcome page.
 We need to tell our app to use the files we just created instead.
@@ -134,7 +140,7 @@ Open `app.vue`in the root directory and replace the content with the following c
 Your page will now be up and running.
 
 ```vue
-[app.vue]
+// [app.vue]
 
 <template>
   <div>

src/routes/docs/tutorials/nuxt/step-3/+page.markdoc

@@ -30,10 +30,11 @@ The **Hostname** should be localhost.
 
 You can skip the optional steps.
 
-# Initialize Appwrite SDK {% #init-sdk %}
+# Secrets
 
-To use Appwrite in our app, we'll need to find our project ID.
-It is located in the **Settings** page.
+To connect to Appwrite in our app, we'll need to use sensitive information.
+We keep the secrets by using environment variables for the endpoint and project id.
+Your project id is located in the **Settings** page in the Appwrite console.
 
 {% only_dark %}
 ![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
@@ -42,17 +43,28 @@ It is located in the **Settings** page.
 ![Project settings screen](/images/docs/quick-starts/project-id.png)
 {% /only_light %}
 
+Add a `.env` file to the root directory and add the following code to it, replacing `YOUR_PROJECT_ID` with your project id.
+
+```
+VITE_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
+VITE_APPWRITE_PROJECT="YOUR_PROJECT_ID"
+```
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
 Create a new file `appwrite.js` for the Appwrite related code.
 Only one instance of the `Client()` class should be created per app.
-Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
+Add the following code to it.
 
 ```js
 import { Client, Databases, Account } from "appwrite";
 
+const url = import.meta.env.VITE_APPWRITE_ENDPOINT;
+const project = import.meta.env.VITE_APPWRITE_PROJECT;
+
 const client = new Client();
-client
-  .setEndpoint("https://cloud.appwrite.io/v1")
-  .setProject("<YOUR_PROJECT_ID>"); // Replace with your project ID
+
+client.setEndpoint(url).setProject(project);
 
 export const account = new Account(client);
 export const database = new Databases(client);

src/routes/docs/tutorials/nuxt/step-4/+page.markdoc

@@ -75,7 +75,7 @@ In step 5 we will add a loginbutton that will redirect us to this page.
 Add the following code to build the form.
 
 ```vue
-[pages/login.vue]
+// [pages/login.vue]
 
 <template>
   <div class="u-max-width-650" style="margin: 0 auto;">

src/routes/docs/tutorials/nuxt/step-5/+page.markdoc

@@ -14,7 +14,7 @@ We will also put the user's e-mail address next to the logout button.
 From the `components` directory, create the file `navbar.vue` and add the code below.
 
 ```vue
-[components/navbar.vue]
+// [components/navbar.vue]
 
 <template>
   <div>
@@ -56,7 +56,7 @@ From the `components` directory, create the file `navbar.vue` and add the code b
 Open `app.vue` from the root directory and add the navigation bar.
 
 ```vue
-[app.vue]
+// [app.vue]
 <template>
   <NuxtLayout>
     <!-- Add navbar -->

src/routes/docs/tutorials/nuxt/step-6/+page.markdoc

@@ -22,8 +22,18 @@ Create a new collection with the following attributes:
 | description | String | No       |
 
 Change the collection's permissions in the settings to give access.
-First, add the role "Any" and check the `READ` box.
-Next, add a "Users" role and give them access to create, update and delete by checking those boxes.
+First, add the role **Any** and check the **Read** box.
+Next, add a **Users** role and give them access to **create**, **update** and **delete** by checking those boxes.
+
+# Secrets
+
+Just like when we set up the connection to Appwrite in [step 2](/docs/tutorials/nuxt/step-2), we need to keep the variables with the collection id secret.
+Open the `.env` file and add your database id and your collection id to it.
+
+```
+VITE_IDEAS_DATABASE_ID="YOUR_DATABASE_ID"
+VITE_IDEAS_COLLECTION_ID="YOUR_COLLECTION_ID"
+```
 
 # Query methods {% #query-methods %}
 
@@ -34,14 +44,14 @@ We will add a new composable, `useIdeas`, to handle this functionality.
 Create a new file in the composables directory, `useIdeas.js` and add the following code.
 
 ```js
-[composables/useIdeas.js]
+// [composables/useIdeas.js]
 
 import { ID, Query } from "appwrite";
 import { database } from "~/appwrite";
 import { ref } from "vue";
 
-const IDEAS_DATABASE_ID = "YOUR_DATABASE_ID";
-const IDEAS_COLLECTION_ID = "YOUR_COLLECTION_ID";
+const ideasDatabaseId = import.meta.env.VITE_IDEAS_DATABASE_ID;
+const ideasCollectionId = import.meta.env.VITE_IDEAS_COLLECTION_ID;
 
 const current = ref(null); //Reference for the fetched data
 
@@ -51,8 +61,8 @@ export const useIdeas = () => {
   // Add the list to the current reference object
   const init = async () => {
     const response = await database.listDocuments(
-      IDEAS_DATABASE_ID,
-      IDEAS_COLLECTION_ID,
+      ideasDatabaseId,
+      ideasCollectionId,
       [Query.orderDesc("$createdAt"), Query.limit(10)]
     );
     current.value = response.documents;
@@ -62,8 +72,8 @@ export const useIdeas = () => {
   // Change the value of the current object
   const add = async (idea) => {
     const response = await database.createDocument(
-      IDEAS_DATABASE_ID,
-      IDEAS_COLLECTION_ID,
+      ideasDatabaseId,
+      ideasCollectionId,
       ID.unique(),
       idea
     );
@@ -71,7 +81,7 @@ export const useIdeas = () => {
   };
 
   const remove = async (id) => {
-    await database.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
+    await database.deleteDocument(ideasDatabaseId, ideasCollectionId, id);
     await init(); //Refetch ideas to ensure we have 10 items
   };
 

src/routes/docs/tutorials/nuxt/step-7/+page.markdoc

@@ -17,7 +17,7 @@ The form need a text field for filling in the title, a textarea for the descript
 From the `components` directory, add the file `ÌdeasForm.vue` and add the following code.
 
 ```vue
-[components/IdeasForm.vue]
+// [components/IdeasForm.vue]
 
 <template>
   <div>
@@ -87,8 +87,8 @@ From the `components` directory, add the file `ÌdeasForm.vue` and add the follo
 ```
 
 Next, add the component to the page `pages/index.vue` by auto-importing it in the `<template>`tag.
-In doing that, we need to take a moment to think of how we want to display the form to our.
-Since it should only be shown to a logged in user, we need to wrap it in a `<section>` that renders conditionally when the `isLoggedIn` reference in the `useUserSession` is true.
+In doing that, we need to take a moment to think about how we want to display the form to the users.
+Since it should only be shown to logged in user, we need to wrap it in a `<section>`that renders conditionally when the `isLoggedIn` reference in the `useUserSession` is true.
 If the requirement is not met, we show a paragraph with some information to the user instead.
 
 Add the following code to the `index.vue`page to conditionally render the form and information paragraph.
@@ -96,7 +96,7 @@ Add the following code to the `index.vue`page to conditionally render the form a
 Overwrite the contents of `pages/index.vue` with the following code.
 
 ```vue
-[pages/index.vue]
+// [pages/index.vue]
 
 <template>
   <div class="u-max-width-650" style="margin: 0 auto;">
@@ -204,7 +204,7 @@ Return to the file `pages/index.vue` once more to import the list of ideas.
 This component should be visible to all users, so no conditional rendering neeeds to be handled.
 
 ```vue
-[pages/index.vue]
+// [pages/index.vue]
 
 <template>
   <div class="u-max-width-650" style="margin: 0 auto;">

src/routes/docs/tutorials/nuxt/step-8/+page.markdoc

@@ -7,4 +7,5 @@ step: 8
 
 # Test your project {% #test-project %}
 Run your project with `npm run dev -- --open --port 3000` and open [http://localhost:3000](http://localhost:3000) in your browser.
+
 Head to the [Appwrite Console](https://cloud.appwrite.io/console) to see the new users and follow their interactions.