chore: update logo (#1442)

* chore: update logo * chore: update

chore: update logo (#1442)
* chore: update logo * chore: update
1ea65c0b · boojack · GitHub · c7a57191 · 1ea65c0b · 1ea65c0b
Unverified Commit 1ea65c0b authored Apr 02, 2023 by boojack Committed by GitHub Apr 02, 2023
15 changed files
--- a/README.md
+++ b/README.md
-<p align="center"><a href="https://usememos.com"><img height="64px" src="https://usememos.com/logo-full.png" alt="✍️ memos" /></a></p>
+# memos
-<p align="center">
+<img height="72px" src="https://usememos.com/logo.webp" alt="✍️ memos" align="right" />
+A lightweight, self-hosted memo hub. Open Source and Free forever.
+<a href="https://demo.usememos.com/">Live Demo</a> •
+Discuss in <a href="https://t.me/+-_tNF1k70UU4ZTc9">Telegram</a> / <a href="https://discord.gg/tfPJa4UmAv">Discord</a>
+<p>
  <a href="https://github.com/usememos/memos/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/usememos/memos" /></a>
  <a href="https://hub.docker.com/r/neosmemo/memos"><img alt="Docker pull" src="https://img.shields.io/docker/pulls/neosmemo/memos.svg" /></a>
  <a href="https://discord.gg/tfPJa4UmAv"><img alt="Discord" src="https://img.shields.io/badge/discord-chat-5865f2?logo=discord&logoColor=f5f5f5" /></a>
 </p>
-<p align="center">
-  <a href="https://demo.usememos.com/">Live Demo</a> •
-  Discuss in <a href="https://t.me/+-_tNF1k70UU4ZTc9">Telegram</a> / <a href="https://discord.gg/tfPJa4UmAv">Discord</a>
-</p>
 ![demo](https://usememos.com/demo.webp)
 ## Key points
@@ -39,7 +41,7 @@ Contributions are what make the open-source community such an amazing place to l
  <img src="https://contrib.rocks/image?repo=usememos/memos" />
 </a>
-Here are some products made by our community:
+---
 - [Moe Memos](https://memos.moe/) - Third party client for iOS and Android
 - [lmm214/memos-bber](https://github.com/lmm214/memos-bber) - Chrome extension

--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/logo.png" type="image/*" />
+    <link rel="icon" href="/logo.webp" type="image/*" />
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f4f4f5" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

--- a/web/public/logo.png
+++ b/web/public/logo.png
--- a/web/public/logo.webp
+++ b/web/public/logo.webp
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@@ -4,8 +4,8 @@
  "description": "usememos/memos",
  "icons": [
    {
-      "src": "/logo.png",
+      "src": "/logo.webp",
-      "type": "image/png",
+      "type": "image/webp",
      "sizes": "520x520"
    }
  ],

--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -53,7 +53,7 @@ const App = () => {
    // dynamic update metadata with customized profile.
    document.title = systemStatus.customizedProfile.name;
    const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
-    link.href = systemStatus.customizedProfile.logoUrl || "/logo.png";
+    link.href = systemStatus.customizedProfile.logoUrl || "/logo.webp";
  }, [systemStatus]);
  useEffect(() => {

--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -31,8 +31,8 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
        <div className="mt-4 w-full flex flex-row text-sm justify-start items-center">
          <div className="flex flex-row justify-start items-center mr-2">
            Powered by
-            <a href="https://usememos.com" target="_blank" className="flex flex-row justify-start items-center mr-1 hover:underline">
+            <a href="https://usememos.com" target="_blank" className="flex flex-row justify-start items-center mx-1 hover:underline">
-              <img className="w-6 h-auto" src="/logo.png" alt="" />
+              <img className="w-6 h-auto rounded-full mr-1" src="/logo.webp" alt="" />
              memos
            </a>
            <span>v{profile.version}</span>

--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -474,7 +474,7 @@ const MemoEditor = () => {
            disabled={!(allowSave || editorState.resourceList.length > 0) || state.isUploadingResource || state.isRequesting}
            onClick={handleSaveBtnClick}
          >
-            <img className="w-5 -ml-0.5 mr-0.5 h-auto" src="/logo.png" />
+            <img className="w-5 -ml-0.5 mr-0.5 h-auto" src="/logo.webp" />
            {t("editor.save")}
          </button>
        </div>

--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@@ -131,7 +131,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
          </div>
          <div className="watermark-container">
            <div className="logo-container">
-              <img className="logo-img" src={`${systemStatus.customizedProfile.logoUrl || "/logo.png"}`} alt="" />
+              <img className="logo-img" src={`${systemStatus.customizedProfile.logoUrl || "/logo.webp"}`} alt="" />
            </div>
            <div className="userinfo-container">
              <span className="name-text">{user.nickname || user.username}</span>

--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -67,7 +67,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
  const handleRestoreButtonClick = () => {
    setState({
      name: "memos",
-      logoUrl: "/logo.png",
+      logoUrl: "/logo.webp",
      description: "",
      locale: "en",
      appearance: "system",

--- a/web/src/components/UserAvatar.tsx
+++ b/web/src/components/UserAvatar.tsx
@@ -6,8 +6,8 @@ interface Props {
 const UserAvatar = (props: Props) => {
  const { avatarUrl, className } = props;
  return (
-    <div className={`${className ?? ""} w-8 h-8 overflow-clip bg-gray-100 dark:bg-zinc-800`}>
+    <div className={`${className ?? ""} w-8 h-8 overflow-clip`}>
-      <img className="w-full h-auto rounded-full min-w-full min-h-full object-cover" src={avatarUrl || "/logo.png"} alt="" />
+      <img className="w-full h-auto rounded-full min-w-full min-h-full object-cover" src={avatarUrl || "/logo.webp"} alt="" />
    </div>
  );
 };

--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -113,7 +113,7 @@ const Auth = () => {
        <div className="auth-form-wrapper">
          <div className="page-header-container">
            <div className="title-container">
-              <img className="logo-img" src={systemStatus.customizedProfile.logoUrl} alt="" />
+              <img className="h-12 w-auto rounded-lg mr-1" src={systemStatus.customizedProfile.logoUrl} alt="" />
              <p className="logo-text">{systemStatus.customizedProfile.name}</p>
            </div>
            <p className="slogan-text">{systemStatus.customizedProfile.description || t("slogan")}</p>

--- a/web/src/pages/ResourcesDashboard.tsx
+++ b/web/src/pages/ResourcesDashboard.tsx
@@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import useLoading from "@/hooks/useLoading";
 import { useResourceStore } from "@/store/module";
 import { getResourceUrl } from "@/utils/resource";
@@ -16,7 +17,6 @@ import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import showChangeResourceFilenameDialog from "@/components/ChangeResourceFilenameDialog";
 import showPreviewImageDialog from "@/components/PreviewImageDialog";
 import showCreateResourceDialog from "@/components/CreateResourceDialog";
-import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 const ResourcesDashboard = () => {
  const { t } = useTranslation();
@@ -52,9 +52,35 @@ const ResourcesDashboard = () => {
    setSelectedList(selectedList.filter((resId) => resId !== resourceId));
  };
+  const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
+    setListStyle(listStyle);
+    setSelectedList([]);
+  };
+  const handleRenameBtnClick = (resource: Resource) => {
+    showChangeResourceFilenameDialog(resource.id, resource.filename);
+  };
+  const handleDeleteResourceBtnClick = (resource: Resource) => {
+    let warningText = t("resources.warning-text");
+    if (resource.linkedMemoAmount > 0) {
+      warningText = warningText + `\n${t("resources.linked-amount")}: ${resource.linkedMemoAmount}`;
+    }
+    showCommonDialog({
+      title: t("resources.delete-resource"),
+      content: warningText,
+      style: "warning",
+      dialogName: "delete-resource-dialog",
+      onConfirm: async () => {
+        await resourceStore.deleteResourceById(resource.id);
+      },
+    });
+  };
  const handleDeleteUnusedResourcesBtnClick = async () => {
    let warningText = t("resources.warning-text-unused");
-    await loadAllResources((allResources: Resource[]) => {
+    const allResources = await fetchAllResources();
    const unusedResources = allResources.filter((resource) => {
      if (resource.linkedMemoAmount === 0) {
        warningText = warningText + `\n- ${resource.filename}`;
@@ -66,6 +92,7 @@ const ResourcesDashboard = () => {
      toast.success(t("resources.no-unused-resources"));
      return;
    }
    showCommonDialog({
      title: t("resources.delete-resource"),
      content: warningText,
@@ -77,7 +104,6 @@ const ResourcesDashboard = () => {
        }
      },
    });
-    });
  };
  const handleDeleteSelectedBtnClick = () => {
@@ -99,32 +125,6 @@ const ResourcesDashboard = () => {
    }
  };
-  const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
-    setListStyle(listStyle);
-    setSelectedList([]);
-  };
-  const handleRenameBtnClick = (resource: Resource) => {
-    showChangeResourceFilenameDialog(resource.id, resource.filename);
-  };
-  const handleDeleteResourceBtnClick = (resource: Resource) => {
-    let warningText = t("resources.warning-text");
-    if (resource.linkedMemoAmount > 0) {
-      warningText = warningText + `\n${t("resources.linked-amount")}: ${resource.linkedMemoAmount}`;
-    }
-    showCommonDialog({
-      title: t("resources.delete-resource"),
-      content: warningText,
-      style: "warning",
-      dialogName: "delete-resource-dialog",
-      onConfirm: async () => {
-        await resourceStore.deleteResourceById(resource.id);
-      },
-    });
-  };
  const handlePreviewBtnClick = (resource: Resource) => {
    const resourceUrl = getResourceUrl(resource);
    if (resource.type.startsWith("image")) {
@@ -157,30 +157,30 @@ const ResourcesDashboard = () => {
    }
  };
-  const loadAllResources = async (resolve: (allResources: Resource[]) => void) => {
+  const fetchAllResources = async () => {
-    if (!isComplete) {
+    if (isComplete) {
+      return resources;
+    }
    loadingState.setLoading();
    try {
      const allResources = await resourceStore.fetchResourceList();
      loadingState.setFinish();
      setIsComplete(true);
-        resolve(allResources);
+      return allResources;
    } catch (error: any) {
      console.error(error);
      toast.error(error.response.data.message);
-      }
+      return resources;
-    } else {
-      resolve(resources);
    }
  };
  const handleSearchResourceInputChange = async (query: string) => {
    // to prevent first tiger when page is loaded
    if (query === queryText) return;
-    await loadAllResources(() => {
+    await fetchAllResources();
    setQueryText(query);
    setSelectedList([]);
-    });
  };
  const resourceList = useMemo(

--- a/web/src/store/module/global.ts
+++ b/web/src/store/module/global.ts
@@ -16,7 +16,7 @@ export const initialGlobalState = async () => {
      additionalScript: "",
      customizedProfile: {
        name: "memos",
-        logoUrl: "/logo.png",
+        logoUrl: "/logo.webp",
        description: "",
        locale: "en",
        appearance: "system",
@@ -41,7 +41,7 @@ export const initialGlobalState = async () => {
        ...data,
        customizedProfile: {
          name: customizedProfile.name || "memos",
-          logoUrl: customizedProfile.logoUrl || "/logo.png",
+          logoUrl: customizedProfile.logoUrl || "/logo.webp",
          description: customizedProfile.description,
          locale: customizedProfile.locale || "en",
          appearance: customizedProfile.appearance || "system",

--- a/web/src/store/reducer/global.ts
+++ b/web/src/store/reducer/global.ts
@@ -24,7 +24,7 @@ const globalSlice = createSlice({
      additionalScript: "",
      customizedProfile: {
        name: "memos",
-        logoUrl: "/logo.png",
+        logoUrl: "/logo.webp",
        description: "",
        locale: "en",
        appearance: "system",