chore: update readme

README.md

@@ -40,6 +40,10 @@ Making sure that you are in charge of your data and more customizations.
 
 The default user account is `guest` with password `secret`.
 
+## 🌟 Star history
+
+[![Star History Chart](https://api.star-history.com/svg?repos=justmemos/memos&type=Date)](https://star-history.com/#justmemos/memos&Date)
+
 ---
 
 Just enjoy it.

web/src/components/AboutSiteDialog.tsx

 import { useEffect, useState } from "react";
 import utils from "../helpers/utils";
 import { showDialog } from "./Dialog";
-import showStarHistoryDialog from "./StarHistoryDialog";
 import "../less/about-site-dialog.less";
 
 interface Props extends DialogProps {}
@@ -45,9 +44,6 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           <a href="https://github.com/justmemos/memos/issues">issues</a>.
         </p>
         <br />
-        <span className="btn" onClick={showStarHistoryDialog}>
-          Star History
-        </span>
         <p className="updated-time-text">
           Last updated on <span className="pre-text">{lastUpdatedAt}</span> 🎉
         </p>

web/src/components/StarHistoryDialog.tsx

-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/star-history-dialog.less

-@import "./mixin.less";
-
-.star-history-dialog {
-  > .dialog-container {
-    @apply w-auto;
-
-    > .dialog-content-container {
-      @apply overflow-x-scroll;
-    }
-  }
-}