doc- Tutorial for Ionic

src/routes/docs/tutorials/Ionic/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />

src/routes/docs/tutorials/Ionic/+layout.ts

@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+	const tutorials = import.meta.glob('./**/*.markdoc', {
+		eager: true
+	});
+	return {
+		tutorials,
+		pathname: url.pathname
+	};
+};

src/routes/docs/tutorials/Ionic/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	throw redirect(303, '/docs/tutorials/Ionic/step-1');
+};

src/routes/docs/tutorials/Ionic/step-1/+page.markdoc

@@ -0,0 +1,35 @@
+---
+layout: tutorial
+title: Build an app with Ionic
+description: Learn to build a mobile app with Ionic framework and Appwrite backend.
+step: 1
+difficulty: beginner
+readtime: 10
+---
+
+**My Ionic App**: An introductory tutorial to building a mobile app with Ionic and Appwrite.
+
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/ionic-app.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/ionic-app.png)
+{% /only_light %}
+
+# Concepts {% #concepts %}
+
+This tutorial will introduce the following concepts:
+
+1. Setting up your Ionic project
+2. Creating user interfaces with Ionic components
+3. Implementing authentication 
+4. Working with data using Appwrite as a backend
+5. Enhancing user experience with Ionic features
+
+
+# Prerequisites {% #prerequisites %}
+
+1. Basic knowledge of JavaScript and TypeScript.
+2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer.
+
+Now you have a template for creating a tutorial for Ionic following the same structure as the React tutorial.

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

@@ -0,0 +1,30 @@
+---
+layout: tutorial
+title: Create an Ionic App
+description: Create an Ionic app project and integrate it with Appwrite.
+step: 2
+---
+
+# Create Ionic project {% #create-ionic-project %}
+
+Create an Ionic app with the `ionic start` command.
+
+```sh
+ionic start my-ionic-app blank
+cd my-ionic-app
+
+# Add dependencies {% #add-dependencies %}
+
+Install the JavaScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+
+You can start the development server to watch your app update in the browser as you make changes.
+
+```sh
+ionic serve
+```
+
+

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

@@ -0,0 +1,55 @@
+---
+layout: tutorial
+title: Set Up Appwrite in Ionic
+description: Import and initialize Appwrite for your Ionic application.
+step: 3
+---
+
+# Create Project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+If this is your first time using Appwrite, create an account and create your first project.
+
+Then, under **Add a platform**, add an **Ionic app**. 
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our Ionic app, you'll need to find your project ID. Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Create a new file `src/appwrite/appwrite.ts` to hold our 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.
+
+```typescript
+import { Appwrite } from 'appwrite';
+
+const client = new Appwrite();
+client
+  .setEndpoint('https://cloud.appwrite.io/v1')
+  .setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
+
+export const appwrite = client;