feat: image proxy for avatar images

apps/renderer/src/components/feed-certification.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"
 import { useWhoami } from "~/atoms/user"
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "~/components/ui/tooltip"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { cn } from "~/lib/utils"
 import type { FeedOrListRespModel } from "~/models"
 import { usePresentUserProfileModal } from "~/modules/profile/hooks"
@@ -60,7 +61,7 @@ export const FeedCertification = ({
                     presentUserProfile(feed.owner!.id)
                   }}
                 >
-                  <AvatarImage src={feed.owner.image || undefined} />
+                  <AvatarImage src={replaceImgUrlIfNeed(feed.owner.image || undefined)} />
                   <AvatarFallback>{feed.owner.name?.slice(0, 2)}</AvatarFallback>
                 </Avatar>
               ) : (

apps/renderer/src/components/user-button.tsx

@@ -10,6 +10,7 @@ import { useAuthQuery } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
 import { nextFrame } from "~/lib/dom"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { cn } from "~/lib/utils"
 import { useAchievementModal } from "~/modules/achievement/hooks"
 import { LoginModalContent } from "~/modules/auth/LoginModalContent"
@@ -203,7 +204,7 @@ export function UserAvatar({
       >
         <AvatarImage
           className="duration-200 animate-in fade-in-0"
-          src={renderUserData?.image || undefined}
+          src={replaceImgUrlIfNeed(renderUserData?.image || undefined)}
         />
         <AvatarFallback>{renderUserData?.name?.slice(0, 2)}</AvatarFallback>
       </Avatar>

apps/renderer/src/lib/img-proxy.ts

@@ -1,4 +1,4 @@
-import { imageRefererMatches } from "@follow/shared/image"
+import { imageRefererMatches, webpCloudPublicServicesMatches } from "@follow/shared/image"
 
 import { getAbValue, isAbEnabled } from "~/hooks/biz/useAb"
 
@@ -19,7 +19,15 @@ export const getImageProxyUrl = ({
   }
 }
 
-export const replaceImgUrlIfNeed = (url: string) => {
+export const replaceImgUrlIfNeed = (url?: string) => {
+  if (!url) return url
+
+  for (const rule of webpCloudPublicServicesMatches) {
+    if (rule.url.test(url)) {
+      return url.replace(rule.url, rule.target)
+    }
+  }
+
   for (const rule of imageRefererMatches) {
     if (rule.url.test(url)) {
       return getImageProxyUrl({ url, width: 0, height: 0 })

apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx

@@ -15,6 +15,7 @@ import { ScrollArea } from "~/components/ui/scroll-area"
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "~/components/ui/tooltip"
 import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
 import { useAuthQuery } from "~/hooks/common"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { useAppLayoutGridContainerWidth } from "~/providers/app-grid-layout-container-provider"
 import { Queries } from "~/queries"
 import { useEntryReadHistory } from "~/store/entry"
@@ -121,7 +122,7 @@ const EntryUserRow: Component<{ userId: string }> = memo(({ userId }) => {
       className="relative flex min-w-0 max-w-[50ch] shrink-0 cursor-button items-center gap-2 truncate rounded-md p-1 px-2 hover:bg-muted"
     >
       <Avatar className="block aspect-square size-7 overflow-hidden rounded-full border border-border ring-1 ring-background">
-        <AvatarImage src={user?.image || undefined} />
+        <AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />
         <AvatarFallback>{user.name?.slice(0, 2)}</AvatarFallback>
       </Avatar>
 
@@ -161,7 +162,10 @@ const EntryUser: Component<{
           }}
         >
           <Avatar className="aspect-square size-7 border border-border ring-1 ring-background">
-            <AvatarImage src={user?.image || undefined} className="bg-theme-placeholder-image" />
+            <AvatarImage
+              src={replaceImgUrlIfNeed(user?.image || undefined)}
+              className="bg-theme-placeholder-image"
+            />
             <AvatarFallback>{user.name?.slice(0, 2)}</AvatarFallback>
           </Avatar>
         </m.button>

apps/renderer/src/modules/profile/user-profile-modal.tsx

@@ -20,6 +20,7 @@ import { useAuthQuery, useI18n } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
 import { nextFrame, stopPropagation } from "~/lib/dom"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { getStorageNS } from "~/lib/ns"
 import { cn } from "~/lib/utils"
 import type { SubscriptionModel } from "~/models"
@@ -246,7 +247,7 @@ export const UserProfileModalContent: FC<{
                   <AvatarImage
                     className="duration-200 animate-in fade-in-0"
                     asChild
-                    src={userInfo.avatar || undefined}
+                    src={replaceImgUrlIfNeed(userInfo.avatar || undefined)}
                   >
                     <m.img layout />
                   </AvatarImage>
@@ -291,7 +292,7 @@ export const UserProfileModalContent: FC<{
                   size="large"
                   icon={
                     <Avatar className="aspect-square size-4">
-                      <AvatarImage src={userInfo.avatar || undefined} />
+                      <AvatarImage src={replaceImgUrlIfNeed(userInfo.avatar || undefined)} />
                       <AvatarFallback>{userInfo.name?.slice(0, 2)}</AvatarFallback>
                     </Avatar>
                   }

apps/renderer/src/modules/settings/tabs/invitations.tsx

@@ -23,6 +23,7 @@ import { INVITATION_PRICE } from "~/constants"
 import { useAuthQuery } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { toastFetchError } from "~/lib/error-parser"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { usePresentUserProfileModal } from "~/modules/profile/hooks"
 import { Queries } from "~/queries"
 
@@ -122,7 +123,9 @@ export const SettingInvitations = () => {
                               }}
                             >
                               <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
-                                <AvatarImage src={row.users?.image || undefined} />
+                                <AvatarImage
+                                  src={replaceImgUrlIfNeed(row.users?.image || undefined)}
+                                />
                                 <AvatarFallback>{row.users?.name?.slice(0, 2)}</AvatarFallback>
                               </Avatar>
                             </button>

apps/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "~/components/ui/table"
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "~/components/ui/tooltip"
 import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { cn } from "~/lib/utils"
 import { usePresentUserProfileModal } from "~/modules/profile/hooks"
 import { SettingSectionTitle } from "~/modules/settings/section"
@@ -182,7 +183,7 @@ const UserRenderer = ({
         <Logo className="aspect-square size-4" />
       ) : (
         <Avatar className="aspect-square size-4 duration-200 animate-in fade-in-0">
-          <AvatarImage src={user?.image || undefined} />
+          <AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />
           <AvatarFallback>{name?.slice(0, 2)}</AvatarFallback>
         </Avatar>
       )}

apps/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx

@@ -12,6 +12,7 @@ import { usePresentFeedFormModal } from "~/hooks/biz/useFeedFormModal"
 import { useAuthQuery, useI18n, useTitle } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { cn, isBizId } from "~/lib/utils"
 import { useUserSubscriptionsQuery } from "~/modules/profile/hooks"
 
@@ -50,7 +51,7 @@ export function Component() {
           <Avatar className="aspect-square size-16">
             <AvatarImage
               className="duration-200 animate-in fade-in-0"
-              src={user.data?.image || undefined}
+              src={replaceImgUrlIfNeed(user.data?.image || undefined)}
             />
             <AvatarFallback>{user.data?.name?.slice(0, 2)}</AvatarFallback>
           </Avatar>

packages/shared/src/image.ts

@@ -20,3 +20,11 @@ export const imageRefererMatches = [
     referer: "https://sp1.piokok.com",
   },
 ]
+
+export const webpCloudPublicServicesMatches = [
+  // https://docs.webp.se/public-services/github-avatar/
+  {
+    url: /^https:\/\/avatars\.githubusercontent\.com\/u\//,
+    target: "https://avatars-githubusercontent.webp.se/u/",
+  },
+]