chore: add github badge

web/src/components/AboutSiteDialog.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import * as api from "../helpers/api";
 import Only from "./common/OnlyWhen";
 import { showDialog } from "./Dialog";
+import GitHubBadge from "./GitHubBadge";
 import "../less/about-site-dialog.less";
 
 interface Props extends DialogProps {}
@@ -44,10 +45,8 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           Memos is an <i>open source</i>, <i>self-hosted</i> knowledge base that works with a SQLite db file.
         </p>
         <br />
-        <p>
-          <a className="mr-2" href="https://github.com/usememos/memos">
-            🏗 Source code
-          </a>
+        <div className="addtion-info-container">
+          <GitHubBadge />
           <Only when={profile !== undefined}>
             <>
               version:
@@ -57,7 +56,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
               🎉
             </>
           </Only>
-        </p>
+        </div>
       </div>
     </>
   );

web/src/components/GitHubBadge.tsx

+import { useEffect, useState } from "react";
+import * as api from "../helpers/api";
+import "../less/github-badge.less";
+
+interface Props {}
+
+const GitHubBadge: React.FC<Props> = () => {
+  const [starCount, setStarCount] = useState(0);
+
+  useEffect(() => {
+    api.getRepoStarCount().then((data) => {
+      setStarCount(data);
+    });
+  }, []);
+
+  const handleClick = () => {
+    window.location.href = "https://github.com/usememos/memos";
+  };
+
+  return (
+    <div className="github-badge-container" onClick={handleClick}>
+      <div className="github-icon">
+        <img className="icon-img" src="/github.webp" alt="" />
+        Star
+      </div>
+      <span className={`count-text ${starCount || "pulse"}`}>{starCount || "🌟"}</span>
+    </div>
+  );
+};
+
+export default GitHubBadge;

web/src/helpers/api.ts

@@ -118,3 +118,14 @@ export function getTagList(tagFind?: TagFind) {
   }
   return axios.get<ResponseObject<string[]>>(`/api/tag?${queryList.join("&")}`);
 }
+
+export async function getRepoStarCount() {
+  const data = (
+    await axios.get("https://api.github.com/repos/usememos/memos", {
+      headers: {
+        accept: "application/vnd.github+json",
+      },
+    })
+  ).data;
+  return data.stargazers_count as number;
+}

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

@@ -17,8 +17,12 @@
         @apply font-mono mx-1;
       }
 
-      a {
-        @apply cursor-pointer underline-offset-2 underline text-blue-600;
+      > .addtion-info-container {
+        @apply flex flex-row justify-start items-center;
+
+        > .github-badge-container {
+          @apply mr-2;
+        }
       }
     }
   }

web/src/less/editor.less

@@ -37,24 +37,6 @@
         > .tip-text {
           @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
         }
-
-        &.tag-action {
-          @apply relative;
-
-          &:hover {
-            > .tag-list {
-              @apply flex;
-            }
-          }
-
-          > .tag-list {
-            @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black;
-
-            > span {
-              @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;
-            }
-          }
-        }
       }
     }
 

web/src/less/github-badge.less

+.github-badge-container {
+  @apply h-7 flex flex-row justify-start items-center border rounded cursor-pointer hover:opacity-80;
+
+  > .github-icon {
+    @apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs font-bold text-gray-800 bg-gray-100;
+
+    > .icon-img {
+      @apply w-4 h-auto mr-1;
+    }
+  }
+
+  > .count-text {
+    @apply px-3 text-xs font-bold text-gray-800;
+
+    &.pulse {
+      @apply text-sm;
+      animation: 1s linear 0s infinite pulse;
+    }
+
+    @keyframes pulse {
+      0% {
+        margin-bottom: 0px;
+      }
+      30% {
+        margin-bottom: 2px;
+      }
+      60% {
+        margin-bottom: 6px;
+      }
+      70% {
+        margin-bottom: 3px;
+      }
+      100% {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}

web/src/less/memo-editor.less

@@ -13,6 +13,11 @@
       > .common-editor-inputer {
         @apply flex-grow w-full !h-full max-h-full;
       }
+
+      .tag-action > .tag-list {
+        @apply bottom-7;
+        top: unset;
+      }
     }
   }
 
@@ -26,5 +31,23 @@
 
   > .memo-editor {
     @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
+
+    .tag-action {
+      @apply relative;
+
+      &:hover {
+        > .tag-list {
+          @apply flex;
+        }
+      }
+
+      > .tag-list {
+        @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black;
+
+        > span {
+          @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;
+        }
+      }
+    }
   }
 }

web/src/less/siderbar.less

 @import "./mixin.less";
 
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
+  @apply fixed sm:sticky top-0 left-0 z-20 sm:z-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
   .hide-scroll-bar();
 
   > .close-container {

web/src/less/signin.less

@@ -9,16 +9,20 @@
     > .page-header-container {
       @apply flex flex-col justify-start items-start w-full mb-4;
 
+      > .title-container {
+        @apply w-full flex flex-row justify-between items-center;
+
         > .title-text {
-        @apply text-2xl;
+          @apply text-2xl mb-2;
 
           > .icon-text {
             @apply text-4xl;
           }
         }
+      }
 
       > .slogan-text {
-        @apply mt-2 text-sm text-gray-700;
+        @apply text-sm text-gray-700;
       }
     }
 

web/src/pages/Signin.tsx

@@ -4,6 +4,7 @@ import { validate, ValidatorConfig } from "../helpers/validator";
 import useLoading from "../hooks/useLoading";
 import { locationService, userService } from "../services";
 import toastHelper from "../components/Toast";
+import GitHubBadge from "../components/GitHubBadge";
 import "../less/signin.less";
 
 interface Props {}
@@ -114,9 +115,12 @@ const Signin: React.FC<Props> = () => {
     <div className="page-wrapper signin">
       <div className="page-container">
         <div className="page-header-container">
+          <div className="title-container">
             <p className="title-text">
               <span className="icon-text">✍️</span> Memos
             </p>
+            <GitHubBadge />
+          </div>
           <p className="slogan-text">
             An <i>open source</i>, <i>self-hosted</i> knowledge base that works with a SQLite db file.
           </p>