feat: add star-history embed iframe;

web/src/components/AboutSiteDialog.tsx

@@ -1,4 +1,5 @@
 import { showDialog } from "./Dialog";
+import showStarHistoryDialog from "./StarHistoryDialog";
 import "../less/about-site-dialog.less";
 
 interface Props extends DialogProps {}
@@ -28,6 +29,10 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           🏗 This project is working in progress, <br /> and very pleasure to welcome your{" "}
           <a href="https://github.com/justmemos/memos/issues">issues</a> and <a href="https://github.com/justmemos/memos/pulls">PR</a>.
         </p>
+        <br />
+        <span className="btn" onClick={showStarHistoryDialog}>
+          Star History
+        </span>
         <hr />
         <p className="normal-text">
           Last updated on <span className="pre-text">2021/12/12 14:38:15</span> 🎉

web/src/components/StarHistoryDialog.tsx

@@ -0,0 +1,40 @@
+import { showDialog } from "./Dialog";
+import "../less/star-history-dialog.less";
+
+interface Props extends DialogProps {}
+
+const StarHistoryDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">
+          <span className="icon-text">⭐️</span>
+          <b>Star History</b>
+        </p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <iframe
+          style={{ width: "100%", height: "auto", minWidth: "600px", minHeight: "400px" }}
+          src="https://star-history.com/embed?secret=Z2hwX2Mxa1ZENmMwOXNyc3p3VlpGNm5ibWgxN3NyNUxkazNXTGlTMQ==#justmemos/memos&Date"
+          frameBorder="0"
+        ></iframe>
+      </div>
+    </>
+  );
+};
+
+export default function showStarHistoryDialog(): void {
+  showDialog(
+    {
+      className: "star-history-dialog",
+    },
+    StarHistoryDialog
+  );
+}

web/src/less/about-site-dialog.less

@@ -30,6 +30,17 @@
       .pre-text {
         .mono-font-family();
       }
+
+      > .btn {
+        padding: 2px 8px;
+        background-color: @text-green;
+        color: white;
+        border-radius: 4px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
     }
   }
 }

web/src/less/star-history-dialog.less

@@ -0,0 +1,18 @@
+@import "./mixin.less";
+
+.star-history-dialog {
+  > .dialog-container {
+    width: auto;
+
+    > .dialog-content-container {
+      overflow-x: scroll;
+    }
+  }
+}
+
+@media only screen and (max-width: 875px) {
+  .dialog-wrapper.star-history-dialog {
+    padding: 24px 16px;
+    padding-top: 64px;
+  }
+}