From 66418d42106689e31a8e07d972db9d58db5e8dd5 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Sat, 10 Dec 2022 13:20:48 +0800
Subject: [PATCH] feat: get image only when cors error (#721)

---
 web/src/components/AboutSiteDialog.tsx        | 25 +++++++++++++------
 .../labs/html2image/getCloneStyledElement.ts  | 15 ++++++++---
 web/src/labs/marked/parser/Image.ts           |  3 +--
 web/src/less/about-site-dialog.less           | 20 +--------------
 web/src/less/base-dialog.less                 |  4 +--
 web/src/less/memo-editor.less                 |  2 +-
 web/src/less/share-memo-dialog.less           |  4 +--
 7 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index 8c159ddd..dd809835 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -18,23 +18,32 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
   return (
     <>
       <div className="dialog-header-container">
-        <p className="title-text">{t("common.about")}</p>
+        <p className="title-text flex items-center">
+          <img className="w-7 h-auto mr-1" src="/logo.webp" alt="" />
+          {t("common.about")} memos
+        </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />
         </button>
       </div>
       <div className="dialog-content-container">
-        <p className="flex justify-start items-center">
-          <img className="logo-img w-16 h-auto" src="/logo.webp" alt="" />
-          <span className=" font-mono text-4xl">memos</span>
-        </p>
         <p>{t("slogan")}</p>
-        <br />
-        <div className="addition-info-container">
+        <div className="border-t mt-1 pt-2 flex flex-row justify-start items-center">
+          <span className=" text-gray-500 mr-2">Other projects:</span>
+          <a href="https://github.com/boojack/sticky-notes" className="flex items-center underline text-blue-600 hover:opacity-80">
+            <img
+              className="w-5 h-auto mr-1"
+              src="https://raw.githubusercontent.com/boojack/sticky-notes/main/public/sticky-notes.ico"
+              alt=""
+            />
+            <span>Sticky notes</span>
+          </a>
+        </div>
+        <div className="mt-4 flex flex-row text-sm justify-start items-center">
           <GitHubBadge />
           <span className="ml-2">
             {t("common.version")}:
-            <span className="pre-text">
+            <span className="font-mono">
               {profile.version}-{profile.mode}
             </span>
             🎉
diff --git a/web/src/labs/html2image/getCloneStyledElement.ts b/web/src/labs/html2image/getCloneStyledElement.ts
index 35de3b79..6a84ae6b 100644
--- a/web/src/labs/html2image/getCloneStyledElement.ts
+++ b/web/src/labs/html2image/getCloneStyledElement.ts
@@ -6,11 +6,20 @@ const applyStyles = async (sourceElement: HTMLElement, clonedElement: HTMLElemen
   }
 
   if (sourceElement.tagName === "IMG") {
+    const url = sourceElement.getAttribute("src") ?? "";
+    let covertFailed = false;
     try {
-      const url = await convertResourceToDataURL(sourceElement.getAttribute("src") ?? "");
-      (clonedElement as HTMLImageElement).src = url;
+      (clonedElement as HTMLImageElement).src = await convertResourceToDataURL(url);
     } catch (error) {
-      // do nth
+      covertFailed = true;
+    }
+    // NOTE: Get image blob from backend to avoid CORS error.
+    if (covertFailed) {
+      try {
+        (clonedElement as HTMLImageElement).src = await convertResourceToDataURL(`/o/get/image?url=${url}`);
+      } catch (error) {
+        // do nth
+      }
     }
   }
 
diff --git a/web/src/labs/marked/parser/Image.ts b/web/src/labs/marked/parser/Image.ts
index c8d2de35..ee9bea04 100644
--- a/web/src/labs/marked/parser/Image.ts
+++ b/web/src/labs/marked/parser/Image.ts
@@ -10,8 +10,7 @@ const renderer = (rawStr: string): string => {
   }
 
   const imageUrl = absolutifyLink(escape(matchResult[1]));
-  // NOTE: Get image blob from backend to avoid CORS.
-  return `<img class='img' src='/o/get/image?url=${imageUrl}' />`;
+  return `<img class='img' src='${imageUrl}' />`;
 };
 
 export default {
diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less
index 6dad5cfe..efa36ecc 100644
--- a/web/src/less/about-site-dialog.less
+++ b/web/src/less/about-site-dialog.less
@@ -1,31 +1,13 @@
 .about-site-dialog {
-  @apply px-4;
-
   > .dialog-container {
     @apply w-112 max-w-full;
 
     > .dialog-content-container {
-      @apply flex flex-col justify-start items-start leading-relaxed;
-
-      > .logo-img {
-        @apply h-16;
-      }
+      @apply flex flex-col justify-start items-start;
 
       > p {
         @apply my-1;
       }
-
-      .pre-text {
-        @apply font-mono mx-1;
-      }
-
-      > .addition-info-container {
-        @apply flex flex-row text-sm justify-start items-center;
-
-        > .github-badge-container {
-          @apply mr-4;
-        }
-      }
     }
   }
 }
diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less
index abae2eee..40b39154 100644
--- a/web/src/less/base-dialog.less
+++ b/web/src/less/base-dialog.less
@@ -1,5 +1,5 @@
 .dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
 
   &.showup {
     background-color: rgba(0, 0, 0, 0.6);
@@ -10,7 +10,7 @@
   }
 
   > .dialog-container {
-    @apply flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
+    @apply max-w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
 
     > .dialog-header-container {
       @apply flex flex-row justify-between items-center w-full mb-4;
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 99bff063..d0adb9cc 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -88,7 +88,7 @@
         }
 
         > .tip-text {
-          @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
+          @apply hidden ml-1 text-xs leading-5 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-zinc-500 rounded-xl px-2;
         }
       }
     }
diff --git a/web/src/less/share-memo-dialog.less b/web/src/less/share-memo-dialog.less
index 112a3ddf..c4561b2a 100644
--- a/web/src/less/share-memo-dialog.less
+++ b/web/src/less/share-memo-dialog.less
@@ -1,9 +1,9 @@
 .share-memo-dialog {
   > .dialog-container {
-    @apply w-96 p-0 bg-white dark:bg-zinc-800;
+    @apply w-96 max-w-full p-0 bg-white dark:bg-zinc-800;
 
     > .dialog-header-container {
-      @apply py-2 pt-4 px-4 pl-6 mb-0 rounded-t-lg;
+      @apply py-3 px-4 pl-6 mb-0 rounded-t-lg border-b dark:border-b-zinc-600;
     }
 
     > .dialog-content-container {