fix: ui improve

Author: Innei

public/404.svg

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react'
+
+export function SimpleIconsZhihu(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M5.721 0C2.251 0 0 2.25 0 5.719V18.28C0 21.751 2.252 24 5.721 24h12.56C21.751 24 24 21.75 24 18.281V5.72C24 2.249 21.75 0 18.281 0zm1.964 4.078c-.271.73-.5 1.434-.68 2.11h4.587c.545-.006.445 1.168.445 1.171H9.384a58.104 58.104 0 0 1-.112 3.797h2.712c.388.023.393 1.251.393 1.266H9.183a9.223 9.223 0 0 1-.408 2.102l.757-.604c.452.456 1.512 1.712 1.906 2.177c.473.681.063 2.081.063 2.081l-2.794-3.382c-.653 2.518-1.845 3.607-1.845 3.607c-.523.468-1.58.82-2.64.516c2.218-1.73 3.44-3.917 3.667-6.497H4.491c0-.015.197-1.243.806-1.266h2.71c.024-.32.086-3.254.086-3.797H6.598c-.136.406-.158.447-.268.753c-.594 1.095-1.603 1.122-1.907 1.155c.906-1.821 1.416-3.6 1.591-4.064c.425-1.124 1.671-1.125 1.671-1.125zM13.078 6h6.377v11.33h-2.573l-2.184 1.373l-.401-1.373h-1.219zm1.313 1.219v8.86h.623l.263.937l1.455-.938h1.456v-8.86z"
+      />
+    </svg>
+  )
+}

src/components/icons/platform/ZhihuIcon.tsx

@@ -6,17 +6,20 @@ import {
   isGithubProfileUrl,
   isTelegramUrl,
   isTwitterProfileUrl,
+  isZhihuProfileUrl,
+  parseZhihuProfileUrl,
 } from '~/lib/link-parser'
 
-import { FloatPopover } from '../../float-popover'
-import { Favicon } from '../../rich-link/Favicon'
-import { RichLink } from '../../rich-link/RichLink'
+import { FloatPopover } from '../float-popover'
+import { Favicon } from '../rich-link/Favicon'
+import { RichLink } from '../rich-link/RichLink'
 
 export const MLink: FC<{
   href: string
   title?: string
   children?: ReactNode
-}> = memo(({ href, children, title }) => {
+  text?: string
+}> = memo(({ href, children, title, text }) => {
   const router = useRouter()
   const handleRedirect = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -46,7 +49,7 @@ export const MLink: FC<{
         }
       }
     },
-    [href],
+    [href, router],
   )
 
   let parsedType = ''
@@ -69,8 +72,14 @@ export const MLink: FC<{
         parsedName = url.pathname.split('/')[1]
         break
       }
+      case isZhihuProfileUrl(url): {
+        parsedType = 'ZH'
+        parsedName = parseZhihuProfileUrl(url).id
+      }
     }
-  } catch {}
+  } catch {
+    /* empty */
+  }
 
   const showRichLink = !!parsedType && !!parsedName
 
@@ -84,7 +93,11 @@ export const MLink: FC<{
           <span className="inline items-center">
             {!showRichLink && <Favicon href={href} />}
             {showRichLink ? (
-              <RichLink name={parsedName} source={parsedType} />
+              <RichLink
+                name={text || parsedName}
+                source={parsedType}
+                href={href}
+              />
             ) : (
               <a
                 className="shiro-link--underline"
@@ -109,6 +122,7 @@ export const MLink: FC<{
           showRichLink,
           parsedName,
           parsedType,
+          text,
         ],
       )}
     >

src/components/ui/markdown/renderers/link.tsx renamed to src/components/ui/link/MLink.tsx

@@ -0,0 +1 @@
+export * from './MLink'

src/components/ui/link/index.ts

@@ -12,11 +12,10 @@ import type { FC, PropsWithChildren } from 'react'
 import { MAIN_MARKDOWN_ID } from '~/constants/dom-id'
 import { isDev } from '~/lib/env'
 import { springScrollToElement } from '~/lib/scroller'
-import { useWrappedElementSize } from '~/providers/shared/WrappedElementProvider'
 
 import { Gallery } from '../gallery'
-import { FixedZoomedImage } from '../image'
 import { LinkCard } from '../link-card'
+import { MLink } from '../link/MLink'
 import styles from './markdown.module.css'
 import { ContainerRule } from './parsers/container'
 import { InsertRule } from './parsers/ins'
@@ -34,7 +33,7 @@ import {
 import { MDetails } from './renderers/collapse'
 import { MFootNote } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
-import { MLink } from './renderers/link'
+import { MarkdownImage } from './renderers/image'
 
 const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))
 
@@ -124,11 +123,17 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           link: {
             react(node, output, state) {
               const { target, title } = node
+              const realText =
+                node.content[0]?.content === node.target
+                  ? void 0
+                  : node.content[0]?.content
+
               return (
                 <MLink
                   href={sanitizeUrl(target)!}
                   title={title}
                   key={state?.key}
+                  text={realText}
                 >
                   {output(node.content, state!)}
                 </MLink>
@@ -233,6 +238,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
     }, [
       value,
       props.children,
+      allowsScript,
       overrides,
       extendsRules,
       renderers,
@@ -259,17 +265,3 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
     )
   })
 Markdown.displayName = 'Markdown'
-
-const MarkdownImage = (props: any) => {
-  const nextProps = {
-    ...props,
-  }
-  nextProps.alt = props.alt?.replace(/^[¡!]/, '')
-  const { w } = useWrappedElementSize()
-
-  if (props.src.endsWith('.mp4')) {
-    return <video src={props.src} controls playsInline autoPlay />
-  }
-
-  return <FixedZoomedImage {...nextProps} containerWidth={w} />
-}