From 8a91b0ad9d0c62d75f25babe77fdbd3894fa4c25 Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 15 Jul 2022 22:17:11 +0800 Subject: [PATCH] chore: add github badge --- web/public/github.webp | Bin 0 -> 2518 bytes web/src/components/AboutSiteDialog.tsx | 9 +++--- web/src/components/GitHubBadge.tsx | 31 ++++++++++++++++++++ web/src/helpers/api.ts | 11 +++++++ web/src/less/about-site-dialog.less | 8 ++++-- web/src/less/editor.less | 18 ------------ web/src/less/github-badge.less | 38 +++++++++++++++++++++++++ web/src/less/memo-editor.less | 23 +++++++++++++++ web/src/less/siderbar.less | 2 +- web/src/less/signin.less | 14 +++++---- web/src/pages/Signin.tsx | 10 +++++-- 11 files changed, 130 insertions(+), 34 deletions(-) create mode 100644 web/public/github.webp create mode 100644 web/src/components/GitHubBadge.tsx create mode 100644 web/src/less/github-badge.less diff --git a/web/public/github.webp b/web/public/github.webp new file mode 100644 index 0000000000000000000000000000000000000000..0c2939116be6b35cd99dd5145a64e187b439376d GIT binary patch literal 2518 zcmaJ>c|4R|8-8qA(wn6SZ<)rHZ8kH^OeQf#h8ct+lxBG_n8nOssL(<}iYbXmX_16V z2t}nNB_XO2lBA@KlI7(az18>qQQz}B&+|LyJok0o*LCjucRa~XPOZuS;6rlo*yw@v zRRI8CiS&*BKI|zT&QBEpK&HTnJ&kLMaY`je9oQejmQ=DO#nSHsR?1_t@hCkrf5GUf zC=**rbG-4<9d?8D^>fq2Pe`aSFqbc(Jdc?k*+f!LO}?A51iThE-Fl9#`uaF8reIID ztLzc?k9x(odJ{;Q7aDq(ysUVlZAjWZ?VruO*%IN2oxLYd6!{Ege!gmcZ7QZaiQMwh zuPn$)#aVJw2Ol|`P%&GO3cH?a+1^w0sc%^YN_lo$}pj#Of4#f@~b0fYJOiL+^* z%iVsXJVV3R;zwiRrvYULUj#-(j2bq9CS&);OGHimW>J0BGYpSh)VnNq7lM zach>9;BuS2|-n5wao=+^6EP8Dhv3+!@ zzw0ras%~7XeOTglT9$z^_NGRu!KIX0a>!w4n0uQ%&NfC?bKiuG=FA}C^qFlGKD?viImMN7=@4sTl)^G52iN=)nP1&x*c+PP zeOZ)3>--RNDMjQEr2J_KNtB-RO5WY@j^L(+eg3jfN%u7dUd-OH=qn!Iy(w;^=@4q) z>Q?UuL^icOU3A`nVn9XZm}&(1u`@B07vX1WseHKC*Ygw;DnIAVn~9Rasu@=p(kfrrfWMt zrq#{*XRg@Q?;=xE)b&ZPCNFBOV|{%cmuY|-J+oyhPUl>;XQQ50!RirN;+d6i2aI9rcQIUM zngd=JrqXiMNP7#v3eykfJ`|VTLt}TWOO6YZF$CS>GHD8ir5gqb*w*qr!|aB@oQ|Tl z_23Sj<_#{sI;}k4v@>$g?-X=AbnD&IIdQ03Ev*;csL}&uW__8wcY}u0KF4cs*$G>} zGDmK!%JQ*3T}{)s=E0@1k4pQWL!(p^US|MpLj#)envVjTN>>c*>bb5GE;Di20j*le zIy%uweEHX+gq>CC8Hdb1;L1&2ses$U+YQh_p~2+-h@AYxofN+%wcdB55IflFmfUt>&6S)M^8LhjOO@59_?e#PJT=TA z@l=OBtAfMKGrCr=HS|slr0h{sPwcB3yLU^wXJ#-%BlMIjU7_=sP9&tqQ#>4Agdbd7 z=}nkjwjk20HQUfe!OVofNu&U2OIx>81 z4?@i`m+?_T0b|Bp8Ia!jkZS3Dk5C2jWXwc>2w0P`CYNkf2t9$&P)aD*P-b!Z8=@!W zROJw|Lw=tnYMQ2%l$}?L=d_;cW(1uNk&kSDRn~(7MHy)7TM1V z7P6a$140}7K7O#VCM*nZeqV7ENYZ+Ry)h%qJvr`5*)Xv$A9$ zkVuHNH4KTySX(14ASeV91xHASwIvdb$5`W0Hjp0=RGN*?48nUlI{nBcT@j!mLLmXBKyB!#V%Z7_+JU9}Dn78yZkV^gkp=|cAXo1iZ{IA~M5(~Uzcp%&p z6mTQ?3{VkjwYxa>IX~qDKf<$Q6Wec@UzPHDnc)#$a*gH%z}Hs8l?e zBM{O!43O+dfJ!-FEEW?_!XRz1_Esny&R%-%BoxjbiE$tz5ol|BEDnKo{E2nsG9uX^ zNB9%Vlwwi#Xe8R+fhffye~X=O1~yNc*%9QkqCln-pUZ}PH;rfgSqtLNTK>f{f1~Ax o4{4$Q-~%od1D`ML|CIXYmb8E7r@tCky7<-lAV=Eod}(9<2f!FMd;kCd literal 0 HcmV?d00001 diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx index de0f0d07..a5d26bfd 100644 --- a/web/src/components/AboutSiteDialog.tsx +++ b/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 = ({ destroy }: Props) => { Memos is an open source, self-hosted knowledge base that works with a SQLite db file.


-

- - 🏗 Source code - +

+ <> version: @@ -57,7 +56,7 @@ const AboutSiteDialog: React.FC = ({ destroy }: Props) => { 🎉 -

+
); diff --git a/web/src/components/GitHubBadge.tsx b/web/src/components/GitHubBadge.tsx new file mode 100644 index 00000000..bcd1fbac --- /dev/null +++ b/web/src/components/GitHubBadge.tsx @@ -0,0 +1,31 @@ +import { useEffect, useState } from "react"; +import * as api from "../helpers/api"; +import "../less/github-badge.less"; + +interface Props {} + +const GitHubBadge: React.FC = () => { + const [starCount, setStarCount] = useState(0); + + useEffect(() => { + api.getRepoStarCount().then((data) => { + setStarCount(data); + }); + }, []); + + const handleClick = () => { + window.location.href = "https://github.com/usememos/memos"; + }; + + return ( +
+
+ + Star +
+ {starCount || "🌟"} +
+ ); +}; + +export default GitHubBadge; diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts index 8317da08..afaa6778 100644 --- a/web/src/helpers/api.ts +++ b/web/src/helpers/api.ts @@ -118,3 +118,14 @@ export function getTagList(tagFind?: TagFind) { } return axios.get>(`/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; +} diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less index 96f3326c..cfade21c 100644 --- a/web/src/less/about-site-dialog.less +++ b/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; + } } } } diff --git a/web/src/less/editor.less b/web/src/less/editor.less index 02fa74c3..496c2971 100644 --- a/web/src/less/editor.less +++ b/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; - } - } - } } } diff --git a/web/src/less/github-badge.less b/web/src/less/github-badge.less new file mode 100644 index 00000000..a9e204e7 --- /dev/null +++ b/web/src/less/github-badge.less @@ -0,0 +1,38 @@ +.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; + } + } + } +} diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index 47ae374e..8278356d 100644 --- a/web/src/less/memo-editor.less +++ b/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; + } + } + } } } diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less index 0e490ddb..4c345baa 100644 --- a/web/src/less/siderbar.less +++ b/web/src/less/siderbar.less @@ -1,7 +1,7 @@ @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 { diff --git a/web/src/less/signin.less b/web/src/less/signin.less index f5762d1d..e255731d 100644 --- a/web/src/less/signin.less +++ b/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-text { - @apply text-2xl; + > .title-container { + @apply w-full flex flex-row justify-between items-center; - > .icon-text { - @apply text-4xl; + > .title-text { + @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; } } diff --git a/web/src/pages/Signin.tsx b/web/src/pages/Signin.tsx index c4d6806e..70399a29 100644 --- a/web/src/pages/Signin.tsx +++ b/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 = () => {
-

- ✍️ Memos -

+
+

+ ✍️ Memos +

+ +

An open source, self-hosted knowledge base that works with a SQLite db file.