save

.wundergraph/operations/Cloudron.graphql

@@ -0,0 +1,5 @@
+query {
+  cloudron_getProfile {
+    email
+  }
+}

.wundergraph/operations/Dragons.graphql

@@ -1,6 +0,0 @@
-query Dragons {
-	spacex_dragons {
-		name
-		active
-	}
-}

.wundergraph/operations/Me.graphql

@@ -0,0 +1,11 @@
+query {
+  system_db_users_me {
+    id
+    first_name
+    last_name
+    avatar {
+      id
+    }
+    external_identifier
+  }
+}

.wundergraph/schemas/placeholder.json

@@ -0,0 +1,181 @@
+{
+    "openapi": "3.0.0",
+    "info": {
+        "version": "1.0.0",
+        "title": "JSON Placeholder API",
+        "description": "See https://jsonplaceholder.typicode.com/"
+    },
+    "servers": [
+        {
+            "url": "https://jsonplaceholder.typicode.com"
+        }
+    ],
+    "paths": {
+        "/posts": {
+            "get": {
+                "description": "Returns all posts",
+                "tags": [
+                    "Posts"
+                ],
+                "operationId": "getPosts",
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/PostsList"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/users": {
+            "get": {
+                "description": "Returns all users",
+                "tags": [
+                    "Users"
+                ],
+                "operationId": "getUsers",
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UserList"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/users/{id}": {
+            "get": {
+                "description": "Returns a user by id",
+                "tags": [
+                    "Users"
+                ],
+                "operationId": "getUser",
+                "parameters": [
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "required": true,
+                        "description": "The user id.",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/User"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "User not found"
+                    }
+                }
+            }
+        },
+        "/posts/{id}": {
+            "get": {
+                "description": "Returns a post by id",
+                "tags": [
+                    "Posts"
+                ],
+                "operationId": "getPost",
+                "parameters": [
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "required": true,
+                        "description": "The user id.",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/Post"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Post not found"
+                    }
+                }
+            }
+        }
+    },
+    "components": {
+        "schemas": {
+            "PostsList": {
+                "type": "array",
+                "items": {
+                    "$ref": "#/components/schemas/Post"
+                }
+            },
+            "UserList": {
+                "type": "array",
+                "items": {
+                    "$ref": "#/components/schemas/User"
+                }
+            },
+            "Post": {
+                "type": "object",
+                "required": [
+                    "id",
+                    "userId",
+                    "title"
+                ],
+                "properties": {
+                    "id": {
+                        "type": "integer"
+                    },
+                    "userId": {
+                        "type": "integer"
+                    },
+                    "title": {
+                        "type": "string"
+                    }
+                }
+            },
+            "User": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "integer"
+                    },
+                    "name": {
+                        "type": "string"
+                    },
+                    "username": {
+                        "type": "string"
+                    },
+                    "email": {
+                        "type": "string"
+                    }
+                }
+            }
+        }
+    }
+}

.wundergraph/wundergraph.config.ts

@@ -9,11 +9,6 @@ dotenv.config();
 const directusSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus.graphql'), 'utf8');
 const directusSystemSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus_system.graphql'), 'utf8');
 
-const spaceX = introspect.graphql({
-	apiNamespace: 'spacex',
-	url: 'https://spacex-api.fly.dev/graphql/',
-});
-
 const db = introspect.graphql({
 	apiNamespace: 'db',
 	loadSchemaFromString: directusSchema,
@@ -22,6 +17,25 @@ const db = introspect.graphql({
 		.addStaticHeader('Authorization', new EnvironmentVariable('DIRECTUS', process.env.DIRECTUS))
 });
 
+const placeholder = introspect.openApiV2({
+	apiNamespace: 'placeholder',
+	source: {
+		kind: "file",
+		filePath: "./schemas/placeholder.json"
+	},
+	baseURL: 'https://jsonplaceholder.typicode.com',
+});
+
+const cloudron = introspect.openApiV2({
+	apiNamespace: 'cloudron',
+	source: {
+		kind: "file",
+		filePath: "./schemas/cloudron.json"
+	},
+	headers: (builder) => builder
+		.addStaticHeader('Authorization', new EnvironmentVariable('CLOUDRON_API', process.env.CLOUDRON_API))
+});
+
 const system_db = introspect.graphql({
 	apiNamespace: 'system_db',
 	loadSchemaFromString: directusSystemSchema,
@@ -32,7 +46,7 @@ const system_db = introspect.graphql({
 
 // configureWunderGraph emits the configuration
 configureWunderGraphApplication({
-	apis: [spaceX, db, system_db],
+	apis: [db, system_db, placeholder, cloudron],
 	server,
 	operations,
 	generate: {

package.json

@@ -22,7 +22,7 @@
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.5.0",
     "@tailwindcss/forms": "^0.5.6",
-    "@tauri-apps/cli": "^1.4.0",
+    "@tauri-apps/cli": "2.0.0-alpha.14",
     "@types/cookie": "^0.5.1",
     "@types/js-cookie": "^3.0.3",
     "@types/jsonwebtoken": "^9.0.2",

src/lib/mockApps.js

@@ -0,0 +1,7 @@
+export const mockApps = [
+    {  name: 'cloud' },
+    { name: 'pass'},
+    {  name: 'directus' },
+    { name: 'penpot'}
+  ];
+  

src/routes/me/+layout.svelte

@@ -9,6 +9,8 @@
         <li><a href="/me/banking">Banking</a></li>
         <li><a href="/me/bookmarks">Bookmarks</a></li>
         <li><a href="/me/acc">Access Control</a></li>
+        <li><a href="/me/apps">Apps</a></li>
+        <li><a href="/me/resttest">REST</a></li>
       </ul>
     </nav>
   </aside>

src/routes/me/+page.svelte

@@ -1,11 +1,47 @@
-<script>
+<script lang="ts">
   import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../lib/wundergraph";
+  import { Avatar } from "@skeletonlabs/skeleton";
+
+  const meQuery = createQuery({
+    operationName: "Me",
+  });
 </script>
 
 <HeaderMain>
   <div slot="header">
-    <h1>Dashboard</h1>
+    <h1>Profile</h1>
   </div>
 
-  <div slot="main">Welcome back, Samuel this is your Dashboard</div>
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $meQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $meQuery.error}
+        <pre>Error: {JSON.stringify($meQuery.error, null, 2)}</pre>
+      {:else}
+        <div class="container mx-auto p-8 space-y-8">
+          <div class="flex items-center space-x-4">
+            <Avatar
+              class="rounded-full w-24"
+              src={`https://directus.andert.me/assets/${
+                $meQuery.data.system_db_users_me?.avatar.id
+              }?access_token=${
+                import.meta.env.VITE_DIRECTUS_TEMPORARY_ACCESS_TOKEN
+              }`}
+            />
+            <div>
+              <h3 class="h3">Welcome back</h3>
+              <h2 class="h2">
+                {$meQuery.data.system_db_users_me?.first_name}
+                {$meQuery.data.system_db_users_me?.last_name}
+              </h2>
+              {$meQuery.data.system_db_users_me?.external_identifier}
+              <p />
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
 </HeaderMain>

src/routes/me/apps/+page.svelte

@@ -0,0 +1,13 @@
+<!-- src/routes/apps/+page.svelte -->
+<script>
+  import { mockApps } from "$lib/mockApps.js";
+</script>
+
+<h1>Apps List</h1>
+<ul>
+  {#each mockApps as app}
+    <li>
+      <a href="/me/apps/{app.name}">{app.name}</a>
+    </li>
+  {/each}
+</ul>

src/routes/me/apps/[name]/+page.js

@@ -0,0 +1,12 @@
+import { mockApps } from '$lib/mockApps';
+
+export function load({ params }) {
+    const { name } = params;
+    const app = mockApps.find(a => a.name == name);
+
+    if (app) {
+        return { props: { app } };
+    }
+    
+    return { status: 404 };
+}

src/routes/me/apps/[name]/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<!-- 
+<iframe
+  src={`https://${data.props.app.name}.andert.me`}
+  width="100%"
+  height="100%"
+/> -->

src/routes/me/resttest/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../../lib/wundergraph";
+
+  const cloudronQuery = createQuery({
+    operationName: "Cloudron",
+  });
+</script>
+
+<HeaderMain>
+  <div slot="header">
+    <h1>Cloudron Test</h1>
+  </div>
+
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $cloudronQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $cloudronQuery.error}
+        <pre>Error: {JSON.stringify($cloudronQuery.error, null, 2)}</pre>
+      {:else}
+        <pre>{JSON.stringify($cloudronQuery.data, null, 2)}</pre>
+      {/if}
+    </div>
+  </div>
+</HeaderMain>