feat: self favicon in MLink

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/link/MLink.tsx

@@ -1,75 +1,80 @@
 'use client'
 
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import type { FC, ReactNode } from 'react'
 
+import { isServerSide } from '~/lib/env'
+import { useAppConfigSelector } from '~/providers/root/aggregation-data-provider'
+
 import { FloatPopover } from '../float-popover'
 import { Favicon } from '../rich-link/Favicon'
 
 export const MLink: FC<{
   href: string
   title?: string
   children?: ReactNode
-  text?: string
-}> = memo(({ href, children, title, text }) => {
+}> = memo(({ href, children, title }) => {
   const router = useRouter()
+  const isSelfUrl = useMemo(() => {
+    if (isServerSide) return false
+    const locateUrl = new URL(location.href)
+
+    const toUrlParser = new URL(href)
+    return (
+      toUrlParser.host === locateUrl.host ||
+      (process.env.NODE_ENV === 'development' &&
+        toUrlParser.host === 'innei.in')
+    )
+  }, [href])
+
   const handleRedirect = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      const locateUrl = new URL(location.href)
-
       const toUrlParser = new URL(href)
+      if (!isSelfUrl) {
+        return
+      }
+      e.preventDefault()
+      const pathArr = toUrlParser.pathname.split('/').filter(Boolean)
+      const headPath = pathArr[0]
 
-      if (
-        toUrlParser.host === locateUrl.host ||
-        (process.env.NODE_ENV === 'development' &&
-          toUrlParser.host === 'innei.in')
-      ) {
-        e.preventDefault()
-        const pathArr = toUrlParser.pathname.split('/').filter(Boolean)
-        const headPath = pathArr[0]
-
-        switch (headPath) {
-          case 'posts':
-          case 'notes':
-          case 'category': {
-            router.push(toUrlParser.pathname)
-            break
-          }
-          default: {
-            window.open(toUrlParser.pathname)
-          }
+      switch (headPath) {
+        case 'posts':
+        case 'notes':
+        case 'category': {
+          router.push(toUrlParser.pathname)
+          break
+        }
+        default: {
+          window.open(toUrlParser.pathname)
         }
       }
     },
-    [href, router],
+    [href, isSelfUrl, router],
   )
 
   return (
     <FloatPopover
       as="span"
       wrapperClassName="!inline"
       type="tooltip"
-      TriggerComponent={useCallback(
-        () => (
-          <span className="inline items-center font-sans">
-            <Favicon href={href} />
-            <a
-              className="shiro-link--underline"
-              href={href}
-              target="_blank"
-              onClick={handleRedirect}
-              title={title}
-              rel="noreferrer"
-            >
-              {children}
-            </a>
+      triggerElement={
+        <span className="inline-flex items-center font-sans">
+          {isSelfUrl ? <BizSelfFavicon /> : <Favicon href={href} />}
+          <a
+            className="shiro-link--underline"
+            href={href}
+            target="_blank"
+            onClick={handleRedirect}
+            title={title}
+            rel="noreferrer"
+          >
+            {children}
+          </a>
 
-            <i className="icon-[mingcute--arrow-right-up-line] translate-y-[2px] opacity-70" />
-          </span>
-        ),
-        [handleRedirect, children, href, title],
-      )}
+          <i className="icon-[mingcute--arrow-right-up-line] translate-y-[2px] opacity-70" />
+        </span>
+      }
     >
       <a href={href} target="_blank" rel="noreferrer">
         <span>{href}</span>
@@ -78,3 +83,20 @@ export const MLink: FC<{
   )
 })
 MLink.displayName = 'MLink'
+
+const BizSelfFavicon = () => {
+  const { favicon, faviconDark } = useAppConfigSelector((a) => a.site) || {}
+  if (!favicon && !faviconDark) return null
+  return (
+    <span className="mr-1 inline-flex size-4 center">
+      <img
+        className="inline size-4 dark:hidden"
+        src={favicon ? favicon : faviconDark ? faviconDark : ''}
+      />
+      <img
+        className="hidden size-4 dark:inline"
+        src={faviconDark ? faviconDark : favicon ? favicon : ''}
+      />
+    </span>
+  )
+}