Big progress! gets data from pocketbase

src/pages/shop/_shop_main.svelte

@@ -1,14 +1,29 @@
-<script>
-    import ShopItemCard from "./comps/ShopItemCard.svelte";
+<script lang="ts">
+  import { onMount } from "svelte";
+  import ShopItemCard from "./comps/ShopItemCard.svelte";
+  import { api } from "@stores";
+  import { ShopItem } from "@src/ts/api/classes/ShopItem";
+
+  let allItems: undefined | ShopItem[] = undefined;
+
+  onMount(async () => {
+    allItems = await api.GetAllShopItems();
+    console.log(allItems);
+  });
 </script>
+
 <div class="p-8 flex w-full justify-center">
   <div class="text-4xl cozette">Items</div>
 </div>
 
 <div class="flex w-full justify-center">
-  <div class="grid grid-cols-2 gap-4 ">
-    {#each { length: 5 } as _, i}
-      <ShopItemCard/>
-    {/each}
+  <div class="grid grid-cols-2 gap-4">
+    {#if allItems != undefined}
+      {#each allItems as item, i}
+        <ShopItemCard bind:shopItem={item} />
+      {/each}
+    {:else}
+      <div></div>
+    {/if}
   </div>
 </div>

src/pages/shop/comps/ShopItemCard.svelte

@@ -1,14 +1,22 @@
-<script>
+<script lang="ts">
+  import type { ShopItem } from "@src/ts/api/classes/ShopItem";
+
+  export let shopItem: ShopItem;
 </script>
 
 <div>
   <div class="group relative w-64 h-64 bg-slate-300">
-
     <div class="w-full h-full">
-      <img class="object-cover w-full h-full peer" src="/images/Zhen/Infomatik/PressurePlate.png" alt="">
+      <img
+        class="object-cover w-full h-full peer"
+        src={shopItem.preview_image}
+        alt=""
+      />
     </div>
 
-    <div class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50">
+    <div
+      class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50"
+    >
       Baller
     </div>
   </div>

src/routes/+layout.svelte

@@ -26,7 +26,7 @@
   afterNavigate(() => {
     const params = new URLSearchParams(window.location.search);
     hideOnPrint = params.get("hideOnPrint") === "1";
-    console.log(hideOnPrint);
+    // console.log(hideOnPrint);
   });
 
   import { onMount } from "svelte";
@@ -105,7 +105,8 @@
           <a
             href="/zhen/cv/rev3?hideOnPrint=1"
             target="_blank"
-            style="width: 7.5rem;" class="text-center justify-center">Zhen CV</a
+            style="width: 7.5rem;"
+            class="text-center justify-center">Zhen CV</a
           >
           <!-- <a href="/tools" style="width: 7.5rem;" class="text-center">Tools</a> -->
           <a href="https://botalex.itch.io/" target="_blank">Games</a>
@@ -142,7 +143,11 @@
               href="https://botalex.itch.io/"
               target="_blank">Games</a
             >
-            <a href="/zhen/cv/rev3?hideOnPrint=1" target="_blank" class="justify-center">Zhen's CV</a>
+            <a
+              href="/zhen/cv/rev3?hideOnPrint=1"
+              target="_blank"
+              class="justify-center">Zhen's CV</a
+            >
             <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
                         <a onclick={resetNavBar} href="/about">About</a> -->
           </div>

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;