fixed a bug where I'd get the wrong image url for avatars

Author: polaroidkidd

.env.development

@@ -5,7 +5,7 @@
 DATABASE_URL="postgres://admin:pass123@localhost:7500/cloudkit-db"
 RATE_LIMIT="ngDPzgdE2apsLdSXLLnQYjbgNkt8ODeX36mq1hnK3NcfmVYwvMrqqkKgHLHNcLdjkcjdaIK9yoAzx0NLf5GLPfYVHbcfWCt83aSet88kgxkAhySGBCwvVuJE4aSRKtOd"
 # Images with docker-compose for local development
-IMAGE_API="http://localhost:7501/image"
+PUBLIC_IMAGE_API_URL="http://localhost:7501/image"
 IMAGE_API_TOKEN="" # Only used in Prod builds
 IMAGE_API_ACCOUNT_IDENTIFIER="" # Only used in Prod builds
 

.env.example

@@ -10,8 +10,8 @@ REDIS_URL="redis://default:redispw@localhost:6379"
 REDIS_TOKEN="" # Only used in Prod builds
 
 # Images: Cloudflare
-IMAGE_API_TOKEN="" # Only used in Prod builds
-IMAGE_API="http://localhost:6501/image"
+PUBLIC_IMAGE_API_TOKEN="" # Only used in Prod builds
+PUBLIC_IMAGE_API="http://localhost:6501/image"
 PUBLIC_IMAGE_DELIVERY="http://localhost:6501/image"
 
 IS_CI=false

.github/workflows/MERGE_MASTER.yml

@@ -14,7 +14,7 @@ env:
   REDIS_TOKEN: ${{ secrets.REDIS_TOKEN }}
   REDIS_URL: ${{ secrets.REDIS_URL }}
   IMAGE_API_TOKEN: ${{ secrets.IMAGE_API_TOKEN }}
-  IMAGE_API: ${{ secrets.IMAGE_API }}
+  PUBLIC_IMAGE_API_URL: ${{ secrets.PUBLIC_IMAGE_API_URL }}
   PUBLIC_IMAGE_DELIVERY: ${{ secrets.PUBLIC_IMAGE_DELIVERY }}
   IS_CI: true
 

.github/workflows/PR.yml

@@ -12,7 +12,7 @@ env:
   DATABASE_URL: ${{ secrets.DATABASE_URL }}
   DATA_PROXY: ${{ secrets.DATA_PROXY }}
   IMAGE_API_TOKEN: ${{ secrets.IMAGE_API_TOKEN }}
-  IMAGE_API: ${{ secrets.IMAGE_API }}
+  PUBLIC_IMAGE_API_URL: ${{ secrets.PUBLIC_IMAGE_API_URL }}
   PUBLIC_IMAGE_DELIVERY: ${{ secrets.PUBLIC_IMAGE_DELIVERY }}
   IMAGE_API_ACCOUNT_IDENTIFIER: ${{ secrets.IMAGE_API_ACCOUNT_IDENTIFIER }}
   IS_CI: true

apps/web/src/lib/server/repository/image-repository.ts

@@ -1,8 +1,8 @@
 import type { Image } from '@cloudkit/ui-core';
 import { generateId } from 'lucia';
 
-import { IMAGE_API, IMAGE_API_TOKEN } from '$env/static/private';
-
+import { IMAGE_API_TOKEN } from '$env/static/private';
+import { PUBLIC_IMAGE_API_URL } from '$env/static/public';
 import type { CloudflareImageDeleteResponse, UserWithRelations } from '@cloudkit/ui-core';
 import { isDevOrCi } from '@cloudkit/ui-core';
 import { db } from './prisma-client';
@@ -63,7 +63,7 @@ class ImageRepository {
 		await this.postToImageService(image);
 		const id = generateId(31);
 
-		return db.image.create({ data: { id: id, url: `${IMAGE_API}/${id}` } });
+		return db.image.create({ data: { id: id, url: `${PUBLIC_IMAGE_API_URL}/${id}` } });
 	}
 
 	async deleteFromCloudflare(url: string): Promise<CloudflareImageDeleteResponse> {
@@ -134,13 +134,13 @@ class ImageRepository {
 	async postToImageService(image: string | File): Promise<{ url: string; id: string }> {
 		const id = generateId(31);
 
-		if (isDevOrCi) {
+		if (!isDevOrCi) {
 			try {
-				await fetch(`${IMAGE_API}/${id}`, {
+				await fetch(`${PUBLIC_IMAGE_API_URL}/${id}`, {
 					method: 'PUT',
 					headers: {
 						'Content-prefix': 'image/webp',
-						Slug: `${`${IMAGE_API}/${id}`}.webp`
+						Slug: `${`${PUBLIC_IMAGE_API_URL}/${id}`}.webp`
 					},
 					body: image
 				});
@@ -149,13 +149,13 @@ class ImageRepository {
 				console.info('error posting to image service');
 			}
 
-			return { url: `${IMAGE_API}/${id}`, id: id };
+			return { url: `${PUBLIC_IMAGE_API_URL}/${id}`, id: id };
 		} else {
 			const form = new FormData();
 
 			form.append('file', new Blob([image]));
 			form.append('id', id);
-			const workerResponse = await fetch(IMAGE_API, {
+			const workerResponse = await fetch(PUBLIC_IMAGE_API_URL, {
 				method: 'POST',
 				headers: {
 					Authorization: `Bearer ${IMAGE_API_TOKEN}`
@@ -164,17 +164,17 @@ class ImageRepository {
 			});
 			const response = await workerResponse.json();
 
-			return { url: `${IMAGE_API}/${response.result.id}`, id: response.result.id };
+			return { url: `${PUBLIC_IMAGE_API_URL}/${response.result.id}`, id: response.result.id };
 		}
 	}
 
 	async patchToImageService(image: File, id: string): Promise<string> {
 		if (isDevOrCi) {
-			await fetch(`${IMAGE_API}/${id}`, {
+			await fetch(`${PUBLIC_IMAGE_API_URL}/${id}`, {
 				method: 'PUT',
 				headers: {
 					'Content-prefix': 'image/webp',
-					Slug: `${IMAGE_API}/${id}.webp`
+					Slug: `${PUBLIC_IMAGE_API_URL}/${id}.webp`
 				},
 				body: image
 			});
@@ -196,7 +196,7 @@ class ImageRepository {
 
 			form.append('file', new Blob([image]));
 			form.append('id', id);
-			const workerResponse = await fetch(IMAGE_API, {
+			const workerResponse = await fetch(PUBLIC_IMAGE_API_URL, {
 				method: 'POST',
 				headers: {
 					Authorization: `Bearer ${IMAGE_API_TOKEN}`

packages/db-schema/package.json

@@ -11,6 +11,7 @@
 		"push:prod": "dotenv -e ../../.env.production -- prisma db push --schema ./prisma/schema.prisma",
 		"push:manual": "dotenv -e ../../.env.development -- prisma db push --schema ./prisma/schema.prisma && pnpm format",
 		"studio": "dotenv -e ../../.env.development -- prisma studio --schema ./prisma/schema.prisma && pnpm format",
+		"studio:prod": "dotenv -e ../../.env.production -- prisma studio --schema ./prisma/schema.prisma && pnpm format",
 		"format": "prettier --config ../../.prettierrc --write ."
 	},
 	"dependencies": {

packages/ui-core/src/components/media/avatar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { PUBLIC_IMAGE_API_URL } from '$env/static/public';
 	import { Avatar } from '@skeletonlabs/skeleton';
 	export let width = '';
 	export let src: string;
@@ -9,7 +10,7 @@
 	export let updatedAt: Date;
 	$: url = isBase64
 		? src
-		: `${src}${src.includes('img.cloudkit.fyi') ? (isLarge ? '/lg' : '/sm') : ''}`;
+		: `${src}${src.includes(PUBLIC_IMAGE_API_URL) ? (isLarge ? '/lg' : '/sm') : ''}`;
 </script>
 
 {#if src !== null}