doc: add Refine tutorial

src/icons/output/_variables.scss

@@ -30,11 +30,12 @@ $aw-icon-nuxt: "\ea1d";
 $aw-icon-platform: "\ea1e";
 $aw-icon-plus: "\ea1f";
 $aw-icon-product-hunt: "\ea20";
-$aw-icon-rest: "\ea21";
-$aw-icon-search: "\ea22";
-$aw-icon-star: "\ea23";
-$aw-icon-system: "\ea24";
-$aw-icon-twitter: "\ea25";
-$aw-icon-vue: "\ea26";
-$aw-icon-x: "\ea27";
-$aw-icon-youtube: "\ea28";
+$aw-icon-refine: "\ea21";
+$aw-icon-rest: "\ea22";
+$aw-icon-search: "\ea23";
+$aw-icon-star: "\ea24";
+$aw-icon-system: "\ea25";
+$aw-icon-twitter: "\ea26";
+$aw-icon-vue: "\ea27";
+$aw-icon-x: "\ea28";
+$aw-icon-youtube: "\ea29";

src/icons/output/aw-icon.css

@@ -49,11 +49,12 @@
 .aw-icon-platform:before { content: "\ea1e"; }
 .aw-icon-plus:before { content: "\ea1f"; }
 .aw-icon-product-hunt:before { content: "\ea20"; }
-.aw-icon-rest:before { content: "\ea21"; }
-.aw-icon-search:before { content: "\ea22"; }
-.aw-icon-star:before { content: "\ea23"; }
-.aw-icon-system:before { content: "\ea24"; }
-.aw-icon-twitter:before { content: "\ea25"; }
-.aw-icon-vue:before { content: "\ea26"; }
-.aw-icon-x:before { content: "\ea27"; }
-.aw-icon-youtube:before { content: "\ea28"; }
+.aw-icon-refine:before { content: "\ea21"; }
+.aw-icon-rest:before { content: "\ea22"; }
+.aw-icon-search:before { content: "\ea23"; }
+.aw-icon-star:before { content: "\ea24"; }
+.aw-icon-system:before { content: "\ea25"; }
+.aw-icon-twitter:before { content: "\ea26"; }
+.aw-icon-vue:before { content: "\ea27"; }
+.aw-icon-x:before { content: "\ea28"; }
+.aw-icon-youtube:before { content: "\ea29"; }

src/icons/output/aw-icon.scss

@@ -48,14 +48,15 @@
 .aw-icon-platform:before { content: "\ea1e"; }
 .aw-icon-plus:before { content: "\ea1f"; }
 .aw-icon-product-hunt:before { content: "\ea20"; }
-.aw-icon-rest:before { content: "\ea21"; }
-.aw-icon-search:before { content: "\ea22"; }
-.aw-icon-star:before { content: "\ea23"; }
-.aw-icon-system:before { content: "\ea24"; }
-.aw-icon-twitter:before { content: "\ea25"; }
-.aw-icon-vue:before { content: "\ea26"; }
-.aw-icon-x:before { content: "\ea27"; }
-.aw-icon-youtube:before { content: "\ea28"; }
+.aw-icon-refine:before { content: "\ea21"; }
+.aw-icon-rest:before { content: "\ea22"; }
+.aw-icon-search:before { content: "\ea23"; }
+.aw-icon-star:before { content: "\ea24"; }
+.aw-icon-system:before { content: "\ea25"; }
+.aw-icon-twitter:before { content: "\ea26"; }
+.aw-icon-vue:before { content: "\ea27"; }
+.aw-icon-x:before { content: "\ea28"; }
+.aw-icon-youtube:before { content: "\ea29"; }
 
 $aw-icon-apple: "\ea01";
 $aw-icon-arrow-down: "\ea02";
@@ -89,11 +90,12 @@ $aw-icon-nuxt: "\ea1d";
 $aw-icon-platform: "\ea1e";
 $aw-icon-plus: "\ea1f";
 $aw-icon-product-hunt: "\ea20";
-$aw-icon-rest: "\ea21";
-$aw-icon-search: "\ea22";
-$aw-icon-star: "\ea23";
-$aw-icon-system: "\ea24";
-$aw-icon-twitter: "\ea25";
-$aw-icon-vue: "\ea26";
-$aw-icon-x: "\ea27";
-$aw-icon-youtube: "\ea28";
+$aw-icon-refine: "\ea21";
+$aw-icon-rest: "\ea22";
+$aw-icon-search: "\ea23";
+$aw-icon-star: "\ea24";
+$aw-icon-system: "\ea25";
+$aw-icon-twitter: "\ea26";
+$aw-icon-vue: "\ea27";
+$aw-icon-x: "\ea28";
+$aw-icon-youtube: "\ea29";

src/icons/output/info.json

@@ -191,52 +191,58 @@
     "className": "aw-icon-product-hunt",
     "unicode": ""
   },
-  "rest": {
+  "refine": {
     "encodedCode": "\\ea21",
     "prefix": "aw-icon",
-    "className": "aw-icon-rest",
+    "className": "aw-icon-refine",
     "unicode": ""
   },
-  "search": {
+  "rest": {
     "encodedCode": "\\ea22",
     "prefix": "aw-icon",
-    "className": "aw-icon-search",
+    "className": "aw-icon-rest",
     "unicode": ""
   },
-  "star": {
+  "search": {
     "encodedCode": "\\ea23",
     "prefix": "aw-icon",
-    "className": "aw-icon-star",
+    "className": "aw-icon-search",
     "unicode": ""
   },
-  "system": {
+  "star": {
     "encodedCode": "\\ea24",
     "prefix": "aw-icon",
-    "className": "aw-icon-system",
+    "className": "aw-icon-star",
     "unicode": ""
   },
-  "twitter": {
+  "system": {
     "encodedCode": "\\ea25",
     "prefix": "aw-icon",
-    "className": "aw-icon-twitter",
+    "className": "aw-icon-system",
     "unicode": ""
   },
-  "vue": {
+  "twitter": {
     "encodedCode": "\\ea26",
     "prefix": "aw-icon",
-    "className": "aw-icon-vue",
+    "className": "aw-icon-twitter",
     "unicode": ""
   },
-  "x": {
+  "vue": {
     "encodedCode": "\\ea27",
     "prefix": "aw-icon",
-    "className": "aw-icon-x",
+    "className": "aw-icon-vue",
     "unicode": ""
   },
-  "youtube": {
+  "x": {
     "encodedCode": "\\ea28",
     "prefix": "aw-icon",
-    "className": "aw-icon-youtube",
+    "className": "aw-icon-x",
     "unicode": ""
+  },
+  "youtube": {
+    "encodedCode": "\\ea29",
+    "prefix": "aw-icon",
+    "className": "aw-icon-youtube",
+    "unicode": ""
   }
 }

src/lib/components/Technologies.svelte

@@ -37,6 +37,11 @@
             name: 'Angular',
             href: '/docs/quick-starts/angular',
             image: `/images/platforms/${$themeInUse}/angular.svg`
+        },
+         {
+            name: 'Refine',
+            href: '/docs/quick-starts/refine',
+            image: `/images/platforms/${$themeInUse}/refine.svg`
         },
         {
             name: 'Apple',
@@ -47,7 +52,8 @@
             name: 'Android',
             href: '/docs/quick-starts/android',
             image: `/images/platforms/${$themeInUse}/android.svg`
-        }
+        },
+
     ] as Array<{
         name: string;
         href: string;

src/routes/docs/quick-starts/+page.svelte

@@ -48,6 +48,12 @@
 					icon: 'icon-svelte',
 					image: '/images/blog/placeholder.png',
 					href: 'sveltekit'
+				},
+				{
+					title: 'Refine',
+					icon: 'aw-icon-refine',
+					image: '/images/blog/placeholder.png',
+					href: 'refine'
 				}
 			]
 		},

src/routes/docs/quick-starts/refine/+page.markdoc

@@ -0,0 +1,179 @@
+---
+layout: article
+title: Start with Refine
+description: Build Refine apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more.
+difficulty: beginner
+readtime: 3
+back: /docs/quick-starts
+---
+
+Learn how to setup your first Refine project powered by Appwrite.
+{% section #step-1 step=1 title="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 a **Web app**. The **Hostname** should be `localhost`. 
+
+{% 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.
+
+{% /section %}
+{% section #step-2 step=2 title="Create Refine project" %}
+Create a Refine project with Appwrite support.
+
+```sh
+npm create refine-app@latest -- --preset refine-appwrite
+```
+{% /section %}
+{% section #step-3 step=3 title="Install Appwrite" %}
+
+
+Using the `refine-appwrite` preset eliminates the need for extra dependencies for a quick start.
+
+If you want to integrate Appwrite into an existing Refine app, simply use this command:
+```sh
+npm install @refinedev/appwrite
+```
+Then follow [this](https://refine.dev/docs/packages/documentation/data-providers/appwrite) guide.
+
+
+{% /section %}
+{% section #step-4 step=4 title="Import Appwrite" %}
+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 %}
+Navigate to `src/utility/appwriteClient.ts` and add your API credentials.
+
+
+```ts
+import { Account, Appwrite, Storage } from "@refinedev/appwrite";
+
+const APPWRITE_URL = '<YOUR_API_ENDPOINT>'; // Replace with your Appwrite API Endpoint
+const APPWRITE_PROJECT = "<YOUR_PROJECT_ID>"; // Replace with your project ID
+
+const appwriteClient = new Appwrite();
+
+appwriteClient.setEndpoint(APPWRITE_URL).setProject(APPWRITE_PROJECT);
+const account = new Account(appwriteClient);
+const storage = new Storage(appwriteClient);
+
+export { account, appwriteClient, storage };
+
+```
+{% /section %}
+{% section #step-5 step=5 title="Create a login page" %}
+
+Replace the code in `src/App.tsx` with the following.
+
+```js
+import { Authenticated, Refine } from '@refinedev/core';
+import { dataProvider, liveProvider } from '@refinedev/appwrite';
+import {
+    AuthPage,
+    ErrorComponent,
+    RefineThemes,
+    ThemedLayoutV2,
+    useNotificationProvider,
+} from '@refinedev/antd';
+import routerProvider, {
+    CatchAllNavigate,
+    NavigateToResource,
+} from '@refinedev/react-router-v6';
+import '@refinedev/antd/dist/reset.css';
+
+import { App as AntdApp, ConfigProvider } from 'antd';
+import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
+
+import { appwriteClient } from './utility';
+import { authProvider } from './authProvider';
+
+const App: React.FC = () => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider theme={RefineThemes.Blue}>
+                <AntdApp>
+                    <Refine
+                        dataProvider={dataProvider(appwriteClient, {
+                            databaseId: '<APPWRITE_DATABASE_ID>',
+                        })}
+                        liveProvider={liveProvider(appwriteClient, {
+                            databaseId: '<APPWRITE_DATABASE_ID>',
+                        })}
+                        authProvider={authProvider}
+                        routerProvider={routerProvider}
+                        notificationProvider={useNotificationProvider}
+                    >
+                        <Routes>
+                            <Route
+                                element={
+                                    <Authenticated
+                                        fallback={
+                                            <CatchAllNavigate to="/login" />
+                                        }
+                                    >
+                                        <ThemedLayoutV2>
+                                            <Outlet />
+                                        </ThemedLayoutV2>
+                                    </Authenticated>
+                                }
+                            ></Route>
+
+                            <Route
+                                element={
+                                    <Authenticated fallback={<Outlet />}>
+                                        <NavigateToResource resource="<APPWRITE_COLLECTION_ID>" />
+                                    </Authenticated>
+                                }
+                            >
+                                <Route path="/login" element={<AuthPage />} />
+                                <Route
+                                    path="/register"
+                                    element={<AuthPage type="register" />}
+                                />
+                            </Route>
+
+                            <Route
+                                element={
+                                    <Authenticated>
+                                        <ThemedLayoutV2>
+                                            <Outlet />
+                                        </ThemedLayoutV2>
+                                    </Authenticated>
+                                }
+                            >
+                                <Route path="*" element={<ErrorComponent />} />
+                            </Route>
+                        </Routes>
+                    </Refine>
+                </AntdApp>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export default App;
+```
+{% /section %}
+
+{% section #step-6 step=6 title="All set" %}
+Run your project with `npm run dev -- --open --port 3000` and open [Localhost on Port 3000](http://localhost:3000) in your browser.
+{% /section %}

src/routes/docs/tutorials/+page.svelte

@@ -73,6 +73,17 @@
                             </p>
                         </a>
                     </li>
+                    <li class="is-mobile-col-span-2">
+                        <a href="/docs/tutorials/refine" class="aw-card is-normal">
+                            <header class="u-flex u-cross-baseline u-gap-4">
+                                <span class="aw-icon-refine aw-u-font-size-24" aria-hidden="true" />
+                                <h4 class="aw-sub-body-500 aw-u-color-text-primary">Refine</h4>
+                            </header>
+                            <p class="aw-sub-body-400 u-margin-block-start-4">
+                                Learn Appwrite Auth, Databases, and more with Refine.
+                            </p>
+                        </a>
+                    </li>
                     <li class="is-mobile-col-span-2">
                         <article class="aw-card is-full-color">
                             <header class="u-flex u-cross-baseline u-gap-4">