chore: use webp compression on logo (#2756)

- Logo size reduced from 310 KB to 36 KB. - Point metadata image URL to local logo instead of remote

chore: use webp compression on logo (#2756)
- Logo size reduced from 310 KB to 36 KB. - Point metadata image URL to local logo instead of remote
089e04bc · Lincoln Nogueira · GitHub · 98762be1 · 089e04bc · 089e04bc
Unverified Commit 089e04bc authored Jan 14, 2024 by Lincoln Nogueira Committed by GitHub Jan 14, 2024
9 changed files
--- a/server/frontend/frontend.go
+++ b/server/frontend/frontend.go
@@ -157,7 +157,7 @@ func getDefaultMetadata() *Metadata {
 	return &Metadata{
 		Title:       "Memos",
 		Description: "A privacy-first, lightweight note-taking service. Easily capture and share your great thoughts.",
-		ImageURL:    "https://www.usememos.com/logo.png",
+		ImageURL:    "/logo.webp",
 	}
 }


--- 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="#18181b" />
    <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/src/App.tsx
+++ b/web/src/App.tsx
@@ -78,7 +78,7 @@ const App = () => {
  useEffect(() => {
    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.customizedProfile]);

  useEffect(() => {

--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -63,7 +63,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
  const handleRestoreButtonClick = () => {
    setPartialState({
      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
@@ -11,7 +11,7 @@ const UserAvatar = (props: Props) => {
    <div className={classNames(`w-8 h-8 overflow-clip rounded-full`, className)}>
      <img
        className="w-full h-auto rounded-full shadow min-w-full min-h-full object-cover dark:opacity-80"
-        src={avatarUrl || "/logo.png"}
+        src={avatarUrl || "/logo.webp"}
        decoding="async"
        loading="lazy"
        alt=""

--- a/web/src/store/module/global.ts
+++ b/web/src/store/module/global.ts
@@ -21,7 +21,7 @@ export const initialGlobalState = async () => {
      memoDisplayWithUpdatedTs: false,
      customizedProfile: {
        name: "Memos",
-        logoUrl: "/logo.png",
+        logoUrl: "/logo.webp",
        description: "",
        locale: "en",
        appearance: "system",
@@ -37,7 +37,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
@@ -26,7 +26,7 @@ const globalSlice = createSlice({
      memoDisplayWithUpdatedTs: false,
      customizedProfile: {
        name: "Memos",
-        logoUrl: "/logo.png",
+        logoUrl: "/logo.webp",
        description: "",
        locale: "en",
        appearance: "system",