feat: get image only when cors error (#721)

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>
             🎉

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
+      }
     }
   }
 

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 {

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;
-        }
-      }
     }
   }
 }

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;

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;
         }
       }
     }

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 {