update supabase image url (#2822)

* refactor(images): update Supabase storage URL to custom domain

* fix(changelog): rewrite image url transformation function

* style(tiptap): adjust CSS indentation and image styling

Author: ComputelessComputer

apps/desktop/src/components/main/body/changelog/index.tsx

@@ -47,8 +47,11 @@ function stripFrontmatter(content: string): string {
   return content.trim();
 }
 
-function stripImageLine(content: string): string {
-  return content.replace(/^!\[.*?\]\(.*?\)\s*\n*/m, "");
+function fixImageUrls(content: string): string {
+  return content.replace(
+    /!\[([^\]]*)\]\(\/api\/images\/([^)]+)\)/g,
+    "![$1](https://auth.hyprnote.com/storage/v1/object/public/public_images/$2)",
+  );
 }
 
 function addEmptyParagraphsBeforeHeaders(
@@ -188,7 +191,7 @@ function useChangelogContent(version: string) {
 
     changelogFiles[key]()
       .then((raw) => {
-        const markdown = stripImageLine(stripFrontmatter(raw as string));
+        const markdown = fixImageUrls(stripFrontmatter(raw as string));
         const json = md2json(markdown);
         setContent(addEmptyParagraphsBeforeHeaders(json));
         setLoading(false);

apps/web/src/routes/api/images.$.ts

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 const SUPABASE_STORAGE_URL =
-  "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images";
+  "https://auth.hyprnote.com/storage/v1/object/public/public_images";
 
 const SAFE_SEGMENT = /^[A-Za-z0-9._+-]+$/;
 

packages/tiptap/src/styles/base.css

@@ -32,8 +32,21 @@
     margin-bottom: 0.25rem;
   }
 
+  .tiptap-image-wrapper {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  > .tiptap-image-wrapper:first-child {
+    padding-top: 0;
+  }
+
+  > .tiptap-image-wrapper:last-child {
+    padding-bottom: 0;
+  }
+
   .tiptap-image {
-    max-width: 240px;
+    max-width: 100%;
     height: auto;
     display: block;
   }