src/routes/cv/comps/LinkedInQR.svelte

@@ -1,10 +1,34 @@
-<script>
+<script lang="ts">
-  import QRCode from "$lib/alex/cv-comps/LinkedInQrCode.svg?raw";
+  import re from "@src/ts/Redaction/Redactor";
+
+  // Gave up because a little drunk, so rest is chatgpt
+
+  function getHTML(url: string): Promise<string> {
+    return fetch(url, { method: "GET", headers: { Accept: "text/html" } }).then(
+      (res) => {
+        if (!res.ok)
+          throw new Error(`GET ${url} failed: ${res.status} ${res.statusText}`);
+        return res.text();
+      },
+    );
+  }
+
+  // recompute the promise when the (store-derived) URL changes
+  $: url = $re?.linkedIn?.imageId || "";
+  $: htmlPromise = url ? getHTML(url) : Promise.resolve("");
 </script>
 
 <div class="container">
   <div>LinkedIn</div>
-  <div class="qrcode corner-border-container p-4">{@html QRCode}</div>
+  <div class="qrcode corner-border-container p-4">
+    {#await htmlPromise}
+      <span>Loading…</span>
+    {:then html}
+      {@html html}
+    {:catch err}
+      <span class="text-red-600">{err.message}</span>
+    {/await}
+  </div>
 </div>
 
 <style lang="scss">

src/ts/Redaction/Profile.ts

@@ -2,6 +2,7 @@
 import { z } from "zod";
 
 const Link = z.object({
+  imageId: z.string().min(1).optional(),
   text: z.string().min(1),
   link: z.string().url(),
 });

src/ts/Redaction/Redactor.ts

@@ -40,8 +40,11 @@ class Redactor implements Readable<Profile | undefined> {
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
-    const data = await res.json();
+    let data = await res.json();
-    this.unredactedProfile = parseProfile(data.json);
+    const replaced = JSON.parse(
+      JSON.stringify(data).replaceAll("[PB]", env.POCKETBASE_URL),
+    );
+    this.unredactedProfile = parseProfile(replaced.json);
     this.notify(); // <-- tell Svelte to update
     return this.unredactedProfile;
   }