From f24e166ceea41ceb601dbe2d0c893101f39b053e Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Wed, 3 Jul 2024 02:52:43 +0800
Subject: [PATCH] chore: change avatar to webp format for speeding.

---
 README.md                                          |  3 +++
 options.ts                                         |  2 +-
 package-lock.json                                  | 14 +++++++-------
 src/components/comment/CommentItem.astro           |  2 +-
 src/pages/avatar/{[hash].png.ts => [hash].webp.ts} |  4 ++--
 5 files changed, 14 insertions(+), 11 deletions(-)
 rename src/pages/avatar/{[hash].png.ts => [hash].webp.ts} (92%)

diff --git a/README.md b/README.md
index 3d2df94..306a38d 100644
--- a/README.md
+++ b/README.md
@@ -182,6 +182,9 @@ You should host it on your own machine.
 
 ## Short-Term TODO Checklist
 
+- [ ] Add clickable toc support for post.
+- [ ] Add last modified time component for post.
+- [ ] Add light box for images.
 - [ ] Move comments into the new Astro content layer.
 - [ ] Check article grammar errors by using ChatGPT. Remain **42** posts.
 - [ ] Add music to the articles. Remain **42** posts.
diff --git a/options.ts b/options.ts
index 83721fb..da1346c 100644
--- a/options.ts
+++ b/options.ts
@@ -187,7 +187,7 @@ const options: z.input<typeof Options> = {
       size: 10,
       avatar: {
         mirror: 'https://weavatar.com/avatar',
-        size: 80,
+        size: 120,
       },
     },
   },
diff --git a/package-lock.json b/package-lock.json
index f85fd71..a86245d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3227,9 +3227,9 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-BZcr6FCmPfP6TXaekvujZcnkFmJHZ/Yglu97r/9VjzVndQA56/F4WjUKtJRQUnK59Wi7p/UTAOekMfCJv7jnYg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.1.tgz",
+      "integrity": "sha512-qdiJS5a/QGCff7VUFIqd0hDdWly9rDp8lhVmXVrS11aazX8LOTRLHAXkkEeONNsS43EcCd7gax9LLoOz4vlFQA==",
       "license": "MIT"
     },
     "node_modules/@smithy/abort-controller": {
@@ -9381,12 +9381,12 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.0.tgz",
-      "integrity": "sha512-YD2sXQ+TMD/F9BimV9Jn0wj35pqOvywvOG/3PB6hGHyGKlM7TJ9tyJ02jOb2kF8F0HfJwKNYrh3sW7jEcuRlXA==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.1.tgz",
+      "integrity": "sha512-uafV7WCgN4YYrccH6yxpnps6k38sSTlFRrwc4jycWmhWxJIm9dPrk+XkY1hZ2t0I7jmacMNb15Lf2fspa/Y3lg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "1.10.0"
+        "@shikijs/core": "1.10.1"
       }
     },
     "node_modules/signal-exit": {
diff --git a/src/components/comment/CommentItem.astro b/src/components/comment/CommentItem.astro
index ef74668..5612bb9 100644
--- a/src/components/comment/CommentItem.astro
+++ b/src/components/comment/CommentItem.astro
@@ -18,7 +18,7 @@ const { comment, depth, pending } = Astro.props;
     <div class="comment-avatar flex-avatar">
       <img
         alt={comment.nick}
-        src={urlJoin(import.meta.env.SITE, 'avatar', `${comment.user_id}.png`)}
+        src={urlJoin(import.meta.env.SITE, 'avatar', `${comment.user_id}.webp`)}
         class="avatar avatar-40 photo"
         height="40"
         width="40"
diff --git a/src/pages/avatar/[hash].png.ts b/src/pages/avatar/[hash].webp.ts
similarity index 92%
rename from src/pages/avatar/[hash].png.ts
rename to src/pages/avatar/[hash].webp.ts
index 3aff4e5..b1e5653 100644
--- a/src/pages/avatar/[hash].png.ts
+++ b/src/pages/avatar/[hash].webp.ts
@@ -18,7 +18,7 @@ const avatarImage = async (
   const defaultAvatarLink = defaultAvatar();
   const link = urlJoin(
     options.settings.comments.avatar.mirror,
-    `${hash}.png?s=${options.settings.comments.avatar.size}&d=${defaultAvatarLink}`,
+    `${hash}?s=${options.settings.comments.avatar.size}&d=${defaultAvatarLink}`,
   );
 
   const resp = await fetch(link, { redirect: 'manual', headers: { Referer: options.website } });
@@ -28,7 +28,7 @@ const avatarImage = async (
 
   return new Response(Buffer.from(await resp.arrayBuffer()), {
     headers: {
-      'Content-Type': 'image/png',
+      'Content-Type': 'image/webp',
       'Cache-control': 'max-age=604800',
     },
   });