feat: new platform icons

Signed-off-by: Innei <i@innei.in>

package.json

@@ -150,6 +150,7 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@hono/node-server": "1.12.2",
     "@iconify-json/mingcute": "1.1.20",
+    "@iconify-json/simple-icons": "^1.2.1",
     "@pengx17/electron-forge-maker-appimage": "1.2.1",
     "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.15",

src/renderer/src/components/feed-icon.tsx

@@ -7,6 +7,8 @@ import type { CombinedEntryModel, FeedModel } from "@renderer/models"
 import type { ReactNode } from "react"
 import { useMemo } from "react"
 
+import { PlatformIcon } from "./ui/platform-icon"
+
 export function FeedIcon({
   feed,
   entry,
@@ -32,20 +34,22 @@ export function FeedIcon({
   switch (true) {
     case !!image: {
       ImageElement = (
-        <Media
-          src={image}
-          type="photo"
-          loading="lazy"
-          className={cn("mr-2 shrink-0 rounded-sm", className)}
-          style={{
-            width: size,
-            height: size,
-          }}
-          proxy={{
-            width: size * 2,
-            height: size * 2,
-          }}
-        />
+        <PlatformIcon className="mr-2 shrink-0 rounded-sm" url={image}>
+          <Media
+            src={feed.siteUrl || image}
+            type="photo"
+            loading="lazy"
+            className={cn("rounded-sm", className)}
+            style={{
+              width: size,
+              height: size,
+            }}
+            proxy={{
+              width: size * 2,
+              height: size * 2,
+            }}
+          />
+        </PlatformIcon>
       )
       break
     }

src/renderer/src/components/ui/platform-icon/index.tsx

@@ -36,4 +36,7 @@ const IconMap = {
   twitter: tw`i-mgc-twitter-cute-fi text-[#55acee]`,
   x: tw`i-mgc-social-x-cute-li`,
   youtube: tw`i-mgc-youtube-cute-fi text-[#ff0000]`,
+  gcore: tw`i-simple-icons-gcore text-[#f83055]`,
+  v2ex: tw`i-simple-icons-v2ex text-foreground`,
+  pixiv: tw`i-simple-icons-pixiv text-[#0096fa]`,
 }

src/renderer/src/components/ui/platform-icon/utils.tsx

@@ -1,6 +1,9 @@
 import {
+  isGCoreUrl,
   isGithubUrl,
+  isPixivUrl,
   isTwitterUrl,
+  isV2exUrl,
   isXUrl,
   isYoutubeUrl,
 } from "@renderer/lib/link-parser"
@@ -24,6 +27,15 @@ export const getSupportedPlatformIconName = (url: string) => {
     case isYoutubeUrl(safeUrl): {
       return "youtube"
     }
+    case isGCoreUrl(safeUrl): {
+      return "gcore"
+    }
+    case isV2exUrl(safeUrl): {
+      return "v2ex"
+    }
+    case isPixivUrl(safeUrl): {
+      return "pixiv"
+    }
   }
 
   return false

src/renderer/src/lib/link-parser.ts

@@ -7,3 +7,7 @@ export const isGithubUrl = (url: URL) => url.hostname === GITHUB_HOST
 
 export const isTwitterUrl = (url: URL) => url.hostname === "twitter.com"
 export const isXUrl = (url: URL) => url.hostname === "x.com"
+
+export const isGCoreUrl = (url: URL) => url.hostname.includes("gcores.com")
+export const isV2exUrl = (url: URL) => url.hostname.includes("v2ex.com")
+export const isPixivUrl = (url: URL) => url.hostname.includes("pixiv.net")

tailwind.config.ts

@@ -125,7 +125,7 @@ export default resolveConfig({
   plugins: [
     iconsPlugin({
       collections: {
-        ...getIconCollections(["mingcute"]),
+        ...getIconCollections(["mingcute", "simple-icons"]),
         mgc: getCollections(path.resolve(__dirname, "./icons/mgc")),
       },
     }),