Merge pull request #19 from appwrite/feat-tutorials

feat: tutorials

src/partials/account-vs-user.md

@@ -0,0 +1,21 @@
+
+{% info title="Account vs Users API" %}
+Appwrite provides two APIs to manager user accounts. 
+
+The Account API is the API you should use in your **client applications** like web, Flutter, mobile, and native apps.
+Account API creates sessions, which represent an authenticated user and is attached to a user's [account](/docs/products/auth/account).
+Sessions respect [permissions](/docs/advanced/platform/permissions), which means users can only access resources if they have been granted the correct permissions. 
+
+You'll notice that the Account API doesn't allow you to view or make changes to other users. 
+This is by design and for **security reasons**.
+
+[Account API references](/docs/references/cloud/client-web/account)
+
+The Users API is a dedicated API for managing users from an admin's perspective. **Do not use the Users API on client applications**.
+It should be used with backend or server-side applications with the [Server SDK](#).
+
+Users API uses API keys instead of sessions. 
+This means they're not resticted by permissions, but by the scopes granted to the API key used.
+
+[Users API references](/docs/references/cloud/server-nodejs/users)
+{% /info %}

src/routes/docs/advanced/platform/webhooks/+page.markdoc

@@ -4,17 +4,6 @@ title: Webhooks
 description: Placeholder SEO.
 ---
 
-Certainly! Below is the content converted to Markdown format:
-
-```md
-```php
-<?php
-
-$events = $this->getParam('events', []);
-
-?>
-```
-
 Webhooks allow you to build or set up integrations which subscribe to certain events on Appwrite. When one of those events is triggered, we'll send an HTTP POST payload to the webhook's configured URL. Webhooks can be used to purge cache from CDN, calculate data or send a Slack notification. You're only limited by your imagination.
 
 ## Add your webhook {% #addWebhook %}

src/routes/docs/advanced/self-hosting/functions/+page.markdoc

@@ -79,8 +79,6 @@ Check the **Any account** box under **Where can this GitHub App be installed?**
 
 After creating your app, you'll have to configure the following environment variables.
 
-Markdown doesn't natively support tables with complex markup like HTML does. However, you can create simple tables with Markdown. Here's a basic conversion of your table to Markdown:
-
 | Variable                     | Description                                                                                                                                                                                                                                                                                                                                                                               |
 |------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `_APP_DOMAIN`                | Your main Appwrite domain used to access the Appwrite Console. When setting a public suffix domain, Appwrite will attempt to issue a valid SSL certificate automatically. When used with a dev domain, Appwrite will assign a self-signed SSL certificate. If you're using a proxy for **localhost development**, such as [ngrok](https://ngrok.com/), this will be the domain of your localhost proxy. |

src/routes/docs/apis/graphql/+page.markdoc

@@ -1,56 +1,45 @@
 ---
 layout: article
 title: GraphQL
-description: 
-difficulty: beginner
-readtime: 10
+description: Description used for SEO
 ---
 
-Appwrite supports multiple protocols for accessing the server, including [REST](/docs/apis/rest), [GraphQL](/docs/apis/graphql), and [Realtime](/docs/apis/realtime). The GraphQL API allows you to query and mutate any resource type on your Appwrite server through the endpoint `/v1/graphql`. Every endpoint available through REST is available through GraphQL, except for OAuth.
+Appwrite supports multiple protocols for accessing the server, including [REST](/docs/rest), [GraphQL](/docs/graphql), and [Realtime](/docs/realtime).
+
+The GraphQL API allows you to query and mutate any resource type on your Appwrite server through the endpoint `/v1/graphql`. 
+Every endpoint available through REST is available through GraphQL, except for OAuth.
+
+## Requests {% #requests %}
+
+Although every query executes through the same endpoint, there are multiple ways to make a GraphQL request. All requests, however, share a common structure.
+
+| Name           | Type   | Description                                                               |
+|----------------|--------|---------------------------------------------------------------------------|
+| query          | string | **Required**, the GraphQL query to execute.                                              |
+| operationName  | string | **Optional**, if the query contains several named operations, controls which one to execute. |
+| variables      | object | **Optional**, an object containing variable names and values for the query. Variables are made available to your query with the `$` prefix. |
+
+### GraphQL model parameters {% #graphql-model-parameters %}
 
-{% info title="GraphQL Model Parameters" %}
 In Appwrite's GraphQL API, all internal model parameters are prefixed with `_` instead of `$` because `$` is reserved by GraphQL.
 
 For example, `$collectionId` in the REST API would be referenced as `_collectionId` in the GraphQL API.
-{% /info %}
 
-## Requests {% #requests %}
-Although every query executes through the same endpoint, there are multiple ways to make a GraphQL request. All requests, however, share a common structure.
+### GET requests {% #get-resquest %}
 
-{% table %}
-* Name {% width=100 %}
-*   {% width=100 %}
-* Type {% width=100 %}
-* Description
----
-* `query`
-* required
-* string
-* The GraphQL query to execute.
----
-* `operationName`
-* optional
-* string
-* If the query contains several named operations, controls which one to execute.
----
-* `variables`
-* optional
-* object
-* An object containing variable names and values for the query. Variables are made available to your query with the $ prefix.
----
-{% /table %}
+You can execute a GraphQL query via a GET request, passing a `query` and optionally `operationName` and `variables` as query parameters.
 
-### GET
-You can execute a GraphQL query via a GET request, passing a query and optionally operationName and variables as query parameters.
+### POST requests {% #post-request %}
 
-### POST
 There are multiple ways to make a GraphQL POST request, differentiated by content type.
 
-#### JSON
+{% tabs %}
+{% tabsitem #json title="JSON" %}
 
-There are two ways to make requests with the `application/json` content type. You can send a JSON object containing a `query` and optionally `operationName` and `variables`, or an array of objects with the same structure.
+There are two ways to make requests with the `application/json` content type. 
+You can send a JSON object containing a `query` and optionally `operationName` and `variables`, or an array of objects with the same structure.
 
-**object**
+#### Object
 
 ```json
 {
@@ -60,7 +49,7 @@ There are two ways to make requests with the `application/json` content type. Yo
 }
 ```
 
-**array**
+#### Array
 
 ```json
 [
@@ -71,9 +60,9 @@ There are two ways to make requests with the `application/json` content type. Yo
     }
 ]
 ```
+{% /tabsitem %}
 
-#### GraphQL
-
+{% tabsitem #graphql title="GraphQL" %}
 The `application/graphql` content type can be used to send a query as the raw POST body.
 
 ```graphql
@@ -84,69 +73,55 @@ query GetAccount {
     }
 }
 ```
+{% /tabsitem %}
+{% /tabs %}
 
-#### Multipart Form Data
 
-The `multipart/form-data` content type can be used to upload files via GraphQL. In this case, the form data must include the following parts in addition to the files to upload.
+### Multipart form data {% #multipart-form-data %}
 
-{% table %}
-* Name {% width=100 %}
-*   {% width=100 %}
-* Type {% width=100 %}
-* Description
----
-* `operations`
-* required
-* string
-* JSON encoded GraphQL query and optionally operation name and variables. File variables should contain null values.
----
-* `map`
-* required
-* string
-* JSON encoded map of form-data filenames to the operations dot-path to inject the file to, e.g. variables.file.
----
-{% /table %}
+The `multipart/form-data` content type can be used to upload files via GraphQL. 
+In this case, the form data must include the following parts in addition to the files to upload.
+
+| Name        | Type   | Description                                                                                                               |
+|-------------|--------|---------------------------------------------------------------------------------------------------------------------------|
+| operations  |string | **Required**, JSON encoded GraphQL query and optionally operation name and variables. File variables should contain null values.        |
+| map         | string |  **Required**, JSON encoded map of form-data filenames to the operations dot-path to inject the file to, e.g. `variables.file`.           |
 
 ## Responses {% #responses %}
 
-A response to a GraphQL request will have the following structure.
+A response to a GraphQL request will have the following structure:
 
-{% table %}
-* Name {% width=100 %}
-*   {% width=100 %}
-* Type {% width=100 %}
-* Description
----
-* `data`
-* 
-* object
-* The data returned by the query, maps requested field names to their results.
----
-* `errors`
-* 
-* object[]
-* An array of errors that occurred during the request.
----
-{% /table %}
+| Name   | Type     | Description                                                                    |
+|--------|----------|--------------------------------------------------------------------------------|
+| data   | object   | The data returned by the query, maps requested field names to their results.   |
+| errors | object[] | An array of errors that occurred during the request.                            |
 
-The data object will contain a map of requested field names to their results. If no data is returned, the object will not be present in the response.
+The data object will contain a map of requested field names to their results. 
+If no data is returned, the object will not be present in the response.
 
-The errors array will contain error objects, each with their own **message** and **path**. The path will contain the field key that is null due to the error. If no errors occur, the array will not be present in the response.
+The errors array will contain error objects, each with their own **message** and **path**. 
+The path will contain the field key that is null due to the error. 
+If no errors occur, the array will not be present in the response.
 
 ## Authentication {% #authentication %}
-GraphQL authenticates using Appwrite accounts and sessions. Both accounts and sessions can be created with GraphQL using the `accountCreate`, `accountCreateEmailSession`, `accountCreateAnonymousSession`, or `accountCreatePhoneSession` mutations.
 
-More information and examples of authenticating users can be found in the dedicated [authentication guide](/docs/products/auth).
+GraphQL authenticates using Appwrite accounts and sessions. 
+Both accounts and sessions can be created with GraphQL using the `accountCreate`, `accountCreateEmailSession`, 
+`accountCreateAnonymousSession`, or `accountCreatePhoneSession` mutations.
 
-## GraphQL vs REST  {% #graphql-vs-rest %}
+More information and examples of authenticating users can be found in the dedicated [authentication guide](/docs/authentication).
+
+## GraphQL vs REST {% #graphql-vs-rest %}
 
 There are two main features that make GraphQL appealing when compared to the REST API: **selection sets** and **query batching**.
 
-### Selection Sets
+### Selection sets {% #selection-sets %}
 
-Selection sets can be used to tell a GraphQL API exactly which fields of a particular resource you would like to receive in the response. The server will respond with only those fields, nothing more, nothing less. This gives you full control over what data comes into your application.
+Selection sets can be used to tell a GraphQL API exactly which fields of a particular resource you would like to receive in the response. 
+The server will respond with only those fields, nothing more, nothing less. This gives you full control over what data comes into your application.
 
-For example, to retrieve only the email of a currently authenticated user, you could query the `accountGet` field, passing only email as the **field selection set**.
+For example, to retrieve only the email of a currently authenticated user, you could query the `accountGet` field, 
+passing only email as the **field selection set**.
 
 ```graphql
 query GetAccount {
@@ -159,7 +134,7 @@ query GetAccount {
 
 Given this query, the GraphQL API will respond with:
 
-```graphql
+```json
 {
     "data": {
         "accountGet": {
@@ -170,11 +145,13 @@ Given this query, the GraphQL API will respond with:
 }
 ```
 
-This can be a useful feature for performance, network efficiency, and app responsiveness. As the processing happens on the server, the bandwidth consumed for the request can be dramatically reduced.
+This can be a useful feature for performance, network efficiency, and app responsiveness. 
+As the processing happens on the server, the bandwidth consumed for the request can be dramatically reduced.
 
-## Query batching  {% #query-batching %}
+## Query batching {% #query-batching %}
 
-GraphQL allows sending multiple queries or mutations in the same request. There are two different ways to batch queries. The simplest way is to include multiple fields in a single query **or** mutation.
+GraphQL allows sending multiple queries or mutations in the same request. 
+There are two different ways to batch queries. The simplest way is to include multiple fields in a single query **or** mutation.
 
 ```graphql
 query GetAccountAndLocale {
@@ -204,7 +181,8 @@ If both field executions succeed, the response will contain a data key for each
 }
 ```
 
-If there was no authenticated user, the `accountGet` field would fail to resolve. In such a case the value of the data key for that field will be null, and an object will be added to the errors array instead.
+If there was no authenticated user, the `accountGet` field would fail to resolve. 
+In such a case the value of the data key for that field will be null, and an object will be added to the errors array instead.
 
 ```json
 {
@@ -224,13 +202,16 @@ If there was no authenticated user, the `accountGet` field would fail to resolve
 }
 ```
 
-Batching with a single query or mutation has some down-sides. You can not mix and match queries and mutations within the same request unless you provide an operationName, in which case you can only execute one query per request.
+Batching with a single query or mutation has some down-sides. 
+You cannot mix and match queries and mutations within the same request unless you provide an operationName, 
+in which case you can only execute one query per request.
 
 Additionally, all **variables** must be passed in the same object, which can be cumbersome and hard to maintain.
 
-The second way to batch is to pass an array of queries or mutations in the request. In this way, you can execute queries **and** mutations and keep variables separated for each.
+The second way to batch is to pass an array of queries or mutations in the request. 
+In this way, you can execute queries **and** mutations and keep variables separated for each.
 
-```graphql
+```json
 [
     {
         "query": "query GetAccount { accountGet{ email } }",
@@ -241,7 +222,9 @@ The second way to batch is to pass an array of queries or mutations in the reque
 ]
 ```
 
-## SDK Usage {% #sdk-usage %}
+This allows you to execute complex actions in a single network request.
+
+## SDK usage {% #sdk-usage %}
 
 Appwrite SDKs also support GraphQL in addition to the REST services.
 
@@ -283,7 +266,6 @@ mutation.then(response => {
     console.log(error);
 });
 ```
-
 ```dart
 import 'package:appwrite/appwrite.dart';
 
@@ -321,8 +303,7 @@ mutation.then((response) {
     print(error.message);
 });
 ```
-
-```java
+```kotlin
 import io.appwrite.Client
 import io.appwrite.services.Graphql
 
@@ -360,7 +341,6 @@ try {
     ex.printStackTrace()
 }
 ```
-
 ```swift
 import Appwrite
 
@@ -401,4 +381,4 @@ do {
     print(error.localizedDescription)
 }
 ```
-{% /multicode %}
+{% /multicode %}