Big progress! gets data from pocketbase

src/ts/Helper.ts

@@ -0,0 +1,57 @@
+import { PUBLIC_URL_BASE } from "$env/static/public";
+
+// Absolute vibe coded. Idk if it works or not. Not important anyways
+// Assumes PUBLIC_URL_BASE is something like "https://deprived.dev"
+const ABSOLUTE_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
+
+function withTrailingSlash(s: string): string {
+  return s.replace(/\/+$/, "") + "/";
+}
+
+export function ParseAssetUrl(url: string, base?: string): string {
+  // Handle empty/undefined url: if a base is given, return the base itself
+  if (!url) {
+    const origin =
+      (typeof PUBLIC_URL_BASE !== "undefined" && PUBLIC_URL_BASE) || "";
+    if (!base) return ""; // no filename, no base → nothing to resolve
+
+    try {
+      // Make base absolute
+      const absoluteBase = ABSOLUTE_RE.test(base)
+        ? withTrailingSlash(base)
+        : new URL(withTrailingSlash(base), withTrailingSlash(origin)).href;
+
+      return absoluteBase; // e.g. "https://deprived.dev/assets/shop/preview-images/"
+    } catch {
+      return "";
+    }
+  }
+
+  // Already absolute
+  if (ABSOLUTE_RE.test(url)) {
+    try {
+      return new URL(url).href;
+    } catch {
+      return url;
+    }
+  }
+
+  const origin =
+    (typeof PUBLIC_URL_BASE !== "undefined" && PUBLIC_URL_BASE) || "";
+  let absoluteBase = "";
+
+  try {
+    if (base) {
+      absoluteBase = ABSOLUTE_RE.test(base)
+        ? withTrailingSlash(base)
+        : new URL(withTrailingSlash(base), withTrailingSlash(origin)).href;
+    } else {
+      if (!origin) return url;
+      absoluteBase = withTrailingSlash(origin);
+    }
+
+    return new URL(url, absoluteBase).href;
+  } catch {
+    return url;
+  }
+}

src/ts/api/api.ts

@@ -0,0 +1,18 @@
+// This files is meant for interaction with pocketbase. I might split this into multiple files later
+// It is meant to be called from stores.ts
+
+import PocketBase from "pocketbase";
+import { ShopItem } from "./classes/ShopItem";
+import { PUBLIC_POCKET_URL, PUBLIC_ASSETS_URL_BASE } from "$env/static/public";
+
+export let pb = new PocketBase(PUBLIC_POCKET_URL);
+
+console.log(PUBLIC_POCKET_URL);
+
+export class ApiService {
+  // read function name
+  static async GetAllShopItems(): Promise<ShopItem[]> {
+    const list = await pb.collection("shopItems").getList(1, 50, {});
+    return list.items.map((rec: any) => ShopItem.fromJSON(rec));
+  }
+}

src/ts/api/classes/ShopItem.ts

@@ -0,0 +1,46 @@
+import { PUBLIC_POCKET_URL, PUBLIC_URL_BASE } from "$env/static/public";
+import { ParseAssetUrl } from "@src/ts/Helper";
+
+export class ShopItem {
+  item_name: string;
+  preview_image: string;
+  page_url: string; // the url used for the item
+  images_root: string; // might not be optimal to include this, in the same class, but should be fine, for now at least
+  category: string[];
+  sold_quantity: number;
+  stock: number;
+  unlisted: boolean;
+
+  constructor(
+    item_name: string,
+    preview_image: string,
+    redirect: string,
+    images_root: string,
+    category: string[],
+    sold_quantity: number,
+    stock: number,
+    unlisted: boolean,
+  ) {
+    this.item_name = item_name;
+    this.preview_image = preview_image;
+    this.page_url = redirect;
+    this.images_root = images_root;
+    this.category = category;
+    this.sold_quantity = sold_quantity;
+    this.stock = stock;
+    this.unlisted = unlisted;
+  }
+
+  static fromJSON(json: any): ShopItem {
+    return new ShopItem(
+      json.item_name,
+      ParseAssetUrl(json.preview_image, "/assets/shop/preview-images"),
+      json.page_url,
+      ParseAssetUrl(json.images_root, "/assets/shop/" + json.item_name + "/"), // Please use better paths
+      json.category,
+      json.sold_quantity,
+      json.stock,
+      json.unlisted,
+    );
+  }
+}

src/ts/store.ts

@@ -1,2 +1,3 @@
-import PocketBase from "pocketbase";
-export let pb = new PocketBase("https://pocket.deprived.dev");
+import { ApiService } from "./api/api";
+
+export let api = ApiService;