perf(ui): optimize avatar rendering by replacing <img> with next/image in testimonials

.github/workflows/lighthouse_comment.yml

@@ -1,19 +1,19 @@
-name: Lighthouse – Comment
+name: Lighthouse CI
 
 on:
-  workflow_run:
-    workflows: ["Lighthouse – Run"]
-    types:
-      - completed
+  pull_request:
+    branches:
+      - main
 
 permissions:
   issues: write
-  pull-requests: write
 
 jobs:
   comment:
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: read
+      pull-requests: write
     steps:
       - name: Download Lighthouse comment artifact
         uses: actions/download-artifact@v4
@@ -29,4 +29,4 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           body-path: lighthouse-comment.md
-          edit-mode: replace
+          edit-mode: replace

components/testimonials.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { Marquee } from "./Marquee";
 import Tweets from "../services/Tweets";
+import { useRouter } from "next/router";
 const firstRow = Tweets.slice(0, Tweets.length / 2);
 const secondRow = Tweets.slice(Tweets.length / 2);
-
+import Image from "next/image";
 const ReviewCard = ({
   avatar,
   name,
@@ -17,31 +18,29 @@ const ReviewCard = ({
   id: string;
   content: string;
 }) => {
-  const fallbackAvatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&size=64`;
-  const localPlaceholder = "/blog/avatars/avatar-placeholder.svg";
+  const { basePath } = useRouter();
+  const isExternal = /^(?:https?:)?\/\//i.test(avatar);
+  const proxiedAvatar = isExternal
+    ? `${basePath}/api/proxy-image?url=${encodeURIComponent(avatar)}`
+    : avatar;
+
   return (
     <a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2">
-      <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border  p-4  border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]">
+      <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]">
         <div className="flex flex-row items-center gap-2">
-          <img
+          <Image
             className="rounded-full"
-            width="32"
-            height="32"
-            alt={`${name}'s avatar`}
-            src={avatar}
-            onError={(e) => {
-              const img = e.target as HTMLImageElement;
-              if (img.src !== localPlaceholder) {
-                img.onerror = () => { img.src = localPlaceholder; };
-                img.src = fallbackAvatar;
-              }
-            }}
+            width={32}
+            height={32}
+            alt={`${name}'s profile picture`}
+            src={proxiedAvatar}
           />
           <div className="flex flex-col">
             <figcaption className="text-sm font-bold">{name}</figcaption>
-            <p className="text-xs font-medium ">{id}</p>
+            <p className="text-xs font-medium">{id}</p>
           </div>
         </div>
+
         <blockquote className="mt-2 text-sm">{content}</blockquote>
       </figure>
     </a>
@@ -54,22 +53,26 @@ const TwitterTestimonials = () => {
       <h3 className="text-center lg:text-left bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-6 text-3xl lg:text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight mt-16">
         What our community thinks
       </h3>
+
       <div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent marquee-mask">
 
         <Marquee pauseOnHover repeat={2} className="[--duration:17s]">
           {firstRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
+
         <Marquee reverse pauseOnHover repeat={2} className="[--duration:17s]">
           {secondRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
 
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-neutral-100 dark:from-background" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-neutral-100 dark:from-background" />
       </div>
     </div>
   );
 };
 
-export default TwitterTestimonials;
+export default TwitterTestimonials;