refactor: link parser and add more svg icon

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

package.json

@@ -149,6 +149,7 @@
     "@electron-forge/publisher-github": "7.4.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@hono/node-server": "1.12.2",
+    "@iconify-json/logos": "1.2.0",
     "@iconify-json/mingcute": "1.1.20",
     "@iconify-json/simple-icons": "^1.2.1",
     "@pengx17/electron-forge-maker-appimage": "1.2.1",

pnpm-lock.yaml

@@ -372,6 +372,9 @@ importers:
       '@hono/node-server':
         specifier: 1.12.2
         version: 1.12.2(hono@4.5.10(patch_hash=iej2g43ojhll5opwbnvyorjq4e))
+      '@iconify-json/logos':
+        specifier: 1.2.0
+        version: 1.2.0
       '@iconify-json/mingcute':
         specifier: 1.1.20
         version: 1.1.20
@@ -1742,6 +1745,9 @@ packages:
     resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==}
     engines: {node: '>=10.13.0'}
 
+  '@iconify-json/logos@1.2.0':
+    resolution: {integrity: sha512-VkU9QSqeZR2guWbecdqkcoZEAJfgJJTUm6QAsypuZQ7Cve6zy39wOXDjp2H31I8QyQy4O3Cz96+pNji6UQFg4w==}
+
   '@iconify-json/mingcute@1.1.20':
     resolution: {integrity: sha512-cLrKrnb9gsi+G6bRtqoFB0KcZnuD/f+p1mwmCTOJdfT8XUFOeZ/ObyBDcAsD2alwL1JmwvqRF08RDW0pfWZAnA==}
 
@@ -9796,6 +9802,10 @@ snapshots:
 
   '@hutson/parse-repository-url@5.0.0': {}
 
+  '@iconify-json/logos@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/mingcute@1.1.20':
     dependencies:
       '@iconify/types': 2.0.0

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

@@ -1,9 +1,15 @@
 import { Slot } from "@radix-ui/react-slot"
+import * as LinkParsers from "@renderer/lib/link-parser"
 import { cn } from "@renderer/lib/utils"
 import type { FC } from "react"
 
 import { getSupportedPlatformIconName } from "./utils"
 
+const IconMap = Object.values(LinkParsers).reduce((acc, parser) => {
+  acc[parser.parserName] = parser.icon
+  return acc
+}, {} as Record<string, string>)
+
 export const PlatformIcon: FC<{
   url: string
   children: React.JSX.Element
@@ -12,7 +18,7 @@ export const PlatformIcon: FC<{
 }> = ({ className, url, children, style, ...rest }) => {
   const iconName = getSupportedPlatformIconName(url)
 
-  if (!iconName) {
+  if (!iconName || !IconMap[iconName]) {
     return (
       <Slot className={className} style={style} {...rest}>
         {children}
@@ -30,13 +36,3 @@ export const PlatformIcon: FC<{
     />
   )
 }
-
-const IconMap = {
-  github: tw`i-mgc-github-2-cute-fi text-black dark:text-white`,
-  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,12 +1,4 @@
-import {
-  isGCoreUrl,
-  isGithubUrl,
-  isPixivUrl,
-  isTwitterUrl,
-  isV2exUrl,
-  isXUrl,
-  isYoutubeUrl,
-} from "@renderer/lib/link-parser"
+import * as validator from "@renderer/lib/link-parser"
 
 export const getSupportedPlatformIconName = (url: string) => {
   const safeUrl = parseSafeUrl(url)
@@ -14,31 +6,17 @@ export const getSupportedPlatformIconName = (url: string) => {
   if (!safeUrl) {
     return false
   }
-  switch (true) {
-    case isGithubUrl(safeUrl): {
-      return "github"
-    }
-    case isTwitterUrl(safeUrl): {
-      return "twitter"
-    }
-    case isXUrl(safeUrl): {
-      return "x"
-    }
-    case isYoutubeUrl(safeUrl): {
-      return "youtube"
-    }
-    case isGCoreUrl(safeUrl): {
-      return "gcore"
-    }
-    case isV2exUrl(safeUrl): {
-      return "v2ex"
-    }
-    case isPixivUrl(safeUrl): {
-      return "pixiv"
-    }
-  }
 
-  return false
+  return (
+    Object.values(validator).find((parser) => {
+      const res = parser(safeUrl)
+
+      if (res.validate) {
+        return true
+      }
+      return false
+    })?.parserName || false
+  )
 }
 
 const parseSafeUrl = (url: string) => {

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

@@ -1,13 +1,120 @@
 const GITHUB_HOST = "github.com"
 
-export const isYoutubeUrl = (url: URL) =>
-  url.hostname === "www.youtube.com" && url.pathname.startsWith("/watch")
+export type LinkParserOptions = {
+  name: string
+  validator: (url: URL) => boolean
+  icon: string
+}
 
-export const isGithubUrl = (url: URL) => url.hostname === GITHUB_HOST || url.hostname === "github.blog"
+const parseSafeUrl = (url: string) => {
+  try {
+    return new URL(url)
+  } catch {
+    return null
+  }
+}
+const defineLinkParser = (options: LinkParserOptions) => {
+  const define = (url: URL | string) => {
+    const safeUrl = typeof url === "string" ? parseSafeUrl(url) : url
+    const validate = safeUrl ? options.validator(safeUrl) : false
 
-export const isTwitterUrl = (url: URL) => url.hostname === "twitter.com"
-export const isXUrl = (url: URL) => url.hostname === "x.com"
+    return {
+      validate,
+    }
+  }
 
-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")
+  define.parserName = options.name
+  define.icon = options.icon
+  return define
+}
+export const isYoutubeUrl = defineLinkParser({
+  name: "youtube",
+  validator: (url) =>
+    url.hostname.includes("youtube.com"),
+  icon: "i-logos-youtube-icon",
+})
+
+export const isGithubUrl = defineLinkParser({
+  name: "github",
+  validator: (url) =>
+    url.hostname === GITHUB_HOST || url.hostname === "github.blog",
+  icon: "i-mgc-github-2-cute-fi text-black dark:text-white",
+})
+
+export const isTwitterUrl = defineLinkParser({
+  name: "twitter",
+  validator: (url) => url.hostname === "twitter.com",
+  icon: "i-mgc-twitter-cute-fi text-[#55acee]",
+})
+
+export const isXUrl = defineLinkParser({
+  name: "x",
+  validator: (url) => url.hostname === "x.com",
+  icon: "i-mgc-social-x-cute-li",
+})
+
+export const isGCoreUrl = defineLinkParser({
+  name: "gcore",
+  validator: (url) => url.hostname.includes("gcores.com"),
+  icon: "i-simple-icons-gcore text-[#f83055]",
+})
+
+export const isV2exUrl = defineLinkParser({
+  name: "v2ex",
+  validator: (url) => url.hostname.includes("v2ex.com"),
+  icon: "i-simple-icons-v2ex text-foreground",
+})
+
+export const isPixivUrl = defineLinkParser({
+  name: "pixiv",
+  validator: (url) => url.hostname.includes("pixiv.net"),
+  icon: "i-simple-icons-pixiv text-[#0096fa]",
+})
+
+export const isDockerHubUrl = defineLinkParser({
+  name: "dockerhub",
+  validator: (url) => url.hostname.includes("hub.docker.com"),
+  icon: "i-simple-icons-docker text-[#0db7ed]",
+})
+
+export const isAppleSiteUrl = defineLinkParser({
+  name: "apple",
+  validator: (url) => url.hostname.includes("apple.com"),
+  icon: "i-simple-icons-apple text-[#000] dark:text-[#fff] scale-75",
+})
+
+export const isGoogleSiteUrl = defineLinkParser({
+  name: "google",
+  validator: (url) => url.hostname.includes("google.com"),
+  icon: "i-logos-google-icon",
+})
+
+export const isTelegramUrl = defineLinkParser({
+  name: "telegram",
+  validator: (url) => url.hostname.includes("t.me"),
+  icon: "i-logos-telegram",
+})
+
+export const isSpotifyUrl = defineLinkParser({
+  name: "spotify",
+  validator: (url) => url.hostname.includes("open.spotify.com"),
+  icon: "i-logos-spotify-icon",
+})
+
+export const isWeiboUrl = defineLinkParser({
+  name: "weibo",
+  validator: (url) => url.hostname.includes("weibo.com"),
+  icon: "i-simple-icons-sinaweibo text-[#e6162d]",
+})
+
+export const isBilibiliUrl = defineLinkParser({
+  name: "bilibili",
+  validator: (url) => url.hostname.includes("bilibili.com"),
+  icon: "i-simple-icons-bilibili text-[#00a1d6]",
+})
+
+export const isDoubanUrl = defineLinkParser({
+  name: "douban",
+  validator: (url) => url.hostname.includes("douban.com"),
+  icon: "i-simple-icons-douban text-[#007722]",
+})

tailwind.config.ts

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