feat: new platform icons

Signed-off-by: Innei <i@innei.in>
2024-09-01 17:24:43 +08:00 · 2024-09-01 17:24:43 +08:00 · 7513130c17
parent 8de7078d10
commit 7513130c17
7 changed files with 63 additions and 32 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -193,7 +193,7 @@ importers:
        version: 0.2.37(react@18.3.1)
      framer-motion:
        specifier: 11.0.10
-        version: 11.3.31(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      franc-min:
        specifier: 6.2.0
        version: 6.2.0
@ -375,6 +375,9 @@ importers:
      '@iconify-json/mingcute':
        specifier: 1.1.20
        version: 1.1.20
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.1
+        version: 1.2.1
      '@pengx17/electron-forge-maker-appimage':
        specifier: 1.2.1
        version: 1.2.1(dmg-builder@25.0.0-alpha.10(electron-builder-squirrel-windows@25.0.0-alpha.10))(electron-builder-squirrel-windows@25.0.0-alpha.10(dmg-builder@25.0.0-alpha.10))
@ -1318,11 +1321,11 @@ packages:
    engines: {node: '>=14.14'}
    hasBin: true

-  '@emotion/is-prop-valid@1.3.0':
-    resolution: {integrity: sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==}
+  '@emotion/is-prop-valid@0.8.8':
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}

-  '@emotion/memoize@0.9.0':
-    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+  '@emotion/memoize@0.7.4':
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}

  '@es-joy/jsdoccomment@0.43.1':
    resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
@ -1742,6 +1745,9 @@ packages:
  '@iconify-json/mingcute@1.1.20':
    resolution: {integrity: sha512-cLrKrnb9gsi+G6bRtqoFB0KcZnuD/f+p1mwmCTOJdfT8XUFOeZ/ObyBDcAsD2alwL1JmwvqRF08RDW0pfWZAnA==}

+  '@iconify-json/simple-icons@1.2.1':
+    resolution: {integrity: sha512-eBXREU+jazfOBTl944Uq/ZpOJnbx1/IBw1MpLw0VmmNk0HSvmnvhdcz+3obja7uAp25yNtVcKo3I04ppnuv3NQ==}
+
  '@iconify/tools@4.0.5':
    resolution: {integrity: sha512-l8KoA1lxlN/FFjlMd3vjfD7BtcX/QnFWtlBapILMlJSBgM5zhDYak/ldw/LkKG3258q/0YmXa48sO/QpxX7ptg==}

@ -5034,15 +5040,12 @@ packages:
      react:
        optional: true

-  framer-motion@11.3.31:
-    resolution: {integrity: sha512-Xmxs08WBXnc2tNzNZbFSpquI33lvleJg4Y+hmZ+vFkn+laN9ZnR3gbZnNGKDtuz7c/x3u8dLg05OU3EhLobCsg==}
+  framer-motion@11.0.10:
+    resolution: {integrity: sha512-aaImib9FQlfno2yiZAdkvN6zLXLr8a9uGsGFlQO64hSm8NoCeiUng2//5ok7RHCW2ufzT74uuPsmWzUsrHPYDQ==}
    peerDependencies:
-      '@emotion/is-prop-valid': '*'
      react: ^18.0.0
      react-dom: ^18.0.0
    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
      react:
        optional: true
      react-dom:
@ -9426,12 +9429,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@emotion/is-prop-valid@1.3.0':
+  '@emotion/is-prop-valid@0.8.8':
    dependencies:
-      '@emotion/memoize': 0.9.0
+      '@emotion/memoize': 0.7.4
    optional: true

-  '@emotion/memoize@0.9.0':
+  '@emotion/memoize@0.7.4':
    optional: true

  '@es-joy/jsdoccomment@0.43.1':
@ -9797,6 +9800,10 @@ snapshots:
    dependencies:
      '@iconify/types': 2.0.0

+  '@iconify-json/simple-icons@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@iconify/tools@4.0.5':
    dependencies:
      '@iconify/types': 2.0.0
@ -11526,7 +11533,7 @@ snapshots:

  '@types/pg@8.11.8':
    dependencies:
-      '@types/node': 20.16.2
+      '@types/node': 22.5.1
      pg-protocol: 1.6.1
      pg-types: 4.0.2
    optional: true
@ -11539,7 +11546,7 @@ snapshots:

  '@types/plist@3.0.5':
    dependencies:
-      '@types/node': 20.16.2
+      '@types/node': 22.5.1
      xmlbuilder: 15.1.1
    optional: true

@ -13805,11 +13812,11 @@ snapshots:
    optionalDependencies:
      react: 18.3.1

-  framer-motion@11.3.31(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  framer-motion@11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
    dependencies:
      tslib: 2.6.3
    optionalDependencies:
-      '@emotion/is-prop-valid': 1.3.0
+      '@emotion/is-prop-valid': 0.8.8
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

--- a/src/renderer/src/components/feed-icon.tsx
+++ b/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
    }
--- a/src/renderer/src/components/ui/platform-icon/index.tsx
+++ b/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]`,
 }
--- a/src/renderer/src/components/ui/platform-icon/utils.tsx
+++ b/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
--- a/src/renderer/src/lib/link-parser.ts
+++ b/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")
--- a/tailwind.config.ts
+++ b/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")),
      },
    }),