chore: change avatar to webp format for speeding.

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.

options.ts

@@ -187,7 +187,7 @@ const options: z.input<typeof Options> = {
       size: 10,
       avatar: {
         mirror: 'https://weavatar.com/avatar',
-        size: 80,
+        size: 120,
       },
     },
   },

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"

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',
     },
   });