From 8ae9f4569c0e45969fa0a029daad7ecf947b71d5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Oct 2024 15:16:19 +0200
Subject: [PATCH 1/3] experiment: multi region image transformer

---
 package.json                      |  1 +
 pnpm-lock.yaml                    | 32 +++++++++++++++++++++++++++++++
 src/lib/components/Article.svelte | 12 +++++++-----
 src/lib/utils/console.ts          |  2 +-
 src/lib/utils/image.ts            | 13 +++++++++++++
 5 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/utils/image.ts

diff --git a/package.json b/package.json
index dd7b381565..67edf84f36 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
         "@types/morgan": "^1.9.9",
         "@typescript-eslint/eslint-plugin": "^7.13.1",
         "@typescript-eslint/parser": "^7.13.1",
+        "@unpic/svelte": "^0.0.53",
         "clsx": "^2.1.1",
         "cva": "npm:class-variance-authority@^0.7.0",
         "date-fns": "^3.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 642c1e9e34..1908a441d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^7.13.1
         version: 7.18.0(eslint@8.57.0)(typescript@5.5.4)
+      '@unpic/svelte':
+        specifier: ^0.0.53
+        version: 0.0.53(svelte@4.2.18)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1674,6 +1677,14 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@unpic/core@0.0.49':
+    resolution: {integrity: sha512-tAqeJRMPF2TrZbSQe74OZ9O5DzKDDUoFwFbZUpjvLcgwGQ/8aleDCb2Iy3bHFJfzzYZ9iHN0hN1VpTlAGQd+ZA==}
+
+  '@unpic/svelte@0.0.53':
+    resolution: {integrity: sha512-v6pT8igLvV94vanvVLUTkaphyPsT/rKq8KcJYGLebirp3PwbMBUDKehgtrSONa8eYwvbe3q3sACFI8f4Eit54w==}
+    peerDependencies:
+      svelte: '*'
+
   '@vitest/expect@1.6.0':
     resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
 
@@ -3810,6 +3821,9 @@ packages:
     resolution: {integrity: sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==}
     engines: {node: '>=10'}
 
+  style-object-to-css-string@1.1.3:
+    resolution: {integrity: sha512-bISQoUsir/qGfo7vY8rw00ia9nnyE1jvYt3zZ2jhdkcXZ6dAEi74inMzQ6On57vFI+I4Fck6wOv5UI9BEwJDgw==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4103,6 +4117,9 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unpic@3.18.0:
+    resolution: {integrity: sha512-JemzuG3nyKpEQ/DArrYM0l+LDSLLPYiUQvDfGXJY35+r0J0C984vPB4Zh8DyMVip102YSnTeZtZ6Q8OQegQDRQ==}
+
   unplugin@1.0.1:
     resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
 
@@ -6052,6 +6069,17 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unpic/core@0.0.49':
+    dependencies:
+      unpic: 3.18.0
+
+  '@unpic/svelte@0.0.53(svelte@4.2.18)':
+    dependencies:
+      '@unpic/core': 0.0.49
+      style-object-to-css-string: 1.1.3
+      svelte: 4.2.18
+      unpic: 3.18.0
+
   '@vitest/expect@1.6.0':
     dependencies:
       '@vitest/spy': 1.6.0
@@ -8268,6 +8296,8 @@ snapshots:
       '@tokenizer/token': 0.3.0
       peek-readable: 4.1.0
 
+  style-object-to-css-string@1.1.3: {}
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -8578,6 +8608,8 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unpic@3.18.0: {}
+
   unplugin@1.0.1:
     dependencies:
       acorn: 8.12.1
diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte
index 9c46a44d46..6b12195c66 100644
--- a/src/lib/components/Article.svelte
+++ b/src/lib/components/Article.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import Media from '$lib/UI/Media.svelte';
     import { formatDate } from '$lib/utils/date';
-
+    import { transformer } from '$lib/utils/image';
+    import { Image } from '@unpic/svelte';
     export let title: string;
     export let cover: string;
     export let href: string;
@@ -14,12 +14,14 @@
 <li>
     <a class="web-grid-articles-item is-transparent" {href}>
         <div class="web-grid-articles-item-image">
-            <Media
+            <Image
+                layout="constrained"
                 src={cover}
                 class="web-u-media-ratio-16-9"
+                width={368}
+                height={207}
                 alt={title}
-                autoplay
-                controls={false}
+                {transformer}
             />
         </div>
         <div class="web-grid-articles-item-content">
diff --git a/src/lib/utils/console.ts b/src/lib/utils/console.ts
index 0464a49bf1..58d303d16c 100644
--- a/src/lib/utils/console.ts
+++ b/src/lib/utils/console.ts
@@ -61,7 +61,7 @@ function isAppwriteUser(user: unknown): user is AppwriteUser {
     return typeof user === 'object' && user !== null && '$id' in user;
 }
 
-export function getAppwriteUser(): Promise<AppwriteUser | null> {
+export async function getAppwriteUser(): Promise<AppwriteUser | null> {
     return account
         .get()
         .then((res) => res)
diff --git a/src/lib/utils/image.ts b/src/lib/utils/image.ts
new file mode 100644
index 0000000000..db476743b2
--- /dev/null
+++ b/src/lib/utils/image.ts
@@ -0,0 +1,13 @@
+import type { ImageProps } from '@unpic/svelte';
+import { Avatars, Client } from '@appwrite.io/console';
+
+const client = new Client();
+client.setProject('console').setEndpoint('https://migration.appwrite.org/v1')
+const avatars = new Avatars(client);
+
+export const transformer: ImageProps['transformer'] = (options) => {
+	const { url, height, width } = options;
+    // if (dev) return url;
+    const src = new URL(url, 'https://appwrite.io');
+    return avatars.getImage(src.toString(), width, height);
+};

From 6aac55f237db215bc6172618800483b4a131c185 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Oct 2024 15:17:39 +0200
Subject: [PATCH 2/3] chore: fix style

---
 src/lib/utils/image.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/utils/image.ts b/src/lib/utils/image.ts
index db476743b2..2dbb54b13a 100644
--- a/src/lib/utils/image.ts
+++ b/src/lib/utils/image.ts
@@ -6,8 +6,7 @@ client.setProject('console').setEndpoint('https://migration.appwrite.org/v1')
 const avatars = new Avatars(client);
 
 export const transformer: ImageProps['transformer'] = (options) => {
-	const { url, height, width } = options;
-    // if (dev) return url;
+    const { url, height, width } = options;
     const src = new URL(url, 'https://appwrite.io');
     return avatars.getImage(src.toString(), width, height);
 };

From 434978d3ec05385d936dfea00184c40e2274a23d Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Oct 2024 15:21:03 +0200
Subject: [PATCH 3/3] feat: cdn

---
 src/lib/utils/image.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/utils/image.ts b/src/lib/utils/image.ts
index 2dbb54b13a..d0046a9ad1 100644
--- a/src/lib/utils/image.ts
+++ b/src/lib/utils/image.ts
@@ -2,7 +2,7 @@ import type { ImageProps } from '@unpic/svelte';
 import { Avatars, Client } from '@appwrite.io/console';
 
 const client = new Client();
-client.setProject('console').setEndpoint('https://migration.appwrite.org/v1')
+client.setProject('console').setEndpoint('https://appwrite-test-cdn.global.ssl.fastly.net/v1')
 const avatars = new Avatars(client);
 
 export const transformer: ImageProps['transformer'] = (options) => {