feat: add wikipedia icon

src/components/icons/platform/WikipediaIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react'
+
+export function WikipediaIcon(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="m14.97 18.95l-2.56-6.03c-1.02 1.99-2.14 4.08-3.1 6.03c-.01.01-.47 0-.47 0C7.37 15.5 5.85 12.1 4.37 8.68C4.03 7.84 2.83 6.5 2 6.5v-.45h5.06v.45c-.6 0-1.62.4-1.36 1.05c.72 1.54 3.24 7.51 3.93 9.03c.47-.94 1.8-3.42 2.37-4.47c-.45-.88-1.87-4.18-2.29-5c-.32-.54-1.13-.61-1.75-.61c0-.15.01-.25 0-.44l4.46.01v.4c-.61.03-1.18.24-.92.82c.6 1.24.95 2.13 1.5 3.28c.17-.34 1.07-2.19 1.5-3.16c.26-.65-.13-.91-1.21-.91c.01-.12.01-.33.01-.43c1.39-.01 3.48-.01 3.85-.02v.42c-.71.03-1.44.41-1.82.99L13.5 11.3c.18.51 1.96 4.46 2.15 4.9l3.85-8.83c-.3-.72-1.16-.87-1.5-.87v-.45l4 .03v.42c-.88 0-1.43.5-1.75 1.25c-.8 1.79-3.25 7.49-4.85 11.2h-.43Z"
+ />
+ </svg>
+ )
+}

src/components/ui/link/MLink.tsx

@@ -75,6 +75,7 @@ export const MLink: FC<{
  case isZhihuProfileUrl(url): {
  parsedType = 'ZH'
  parsedName = parseZhihuProfileUrl(url).id
+ break
  }
  }
  } catch {

src/components/ui/markdown/renderers/LinkRenderer.tsx

@@ -33,111 +33,110 @@ export const LinkRenderer = ({ href }: { href: string }) => {
  }
  }, [href])
 
- if (url) {
- switch (true) {
- case isTweetUrl(url): {
- const id = getTweetId(url)
+ if (!url) {
+ return (
+ <p>
+ <MLink href={href}>
+ <span>{href}</span>
+ </MLink>
+ </p>
+ )
+ }
+ switch (true) {
+ case isTweetUrl(url): {
+ const id = getTweetId(url)
 
-  return <Tweet id={id} />
-  }
+ return <Tweet id={id} />
+ }
 
-  case isGithubRepoUrl(url): {
-  const { owner, repo } = parseGithubRepoUrl(url)
-  return <LinkCard id={`${owner}/${repo}`} source="gh" />
-  }
+ case isGithubRepoUrl(url): {
+ const { owner, repo } = parseGithubRepoUrl(url)
+ return <LinkCard id={`${owner}/${repo}`} source="gh" />
+ }
 
-  case isYoutubeUrl(url): {
-  const id = url.searchParams.get('v')!
-  return (
-  <FixedRatioContainer>
-  <iframe
-  src={`https://www.youtube.com/embed/${id}`}
-  className="absolute inset-0 h-full w-full border-0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-  title="YouTube video player"
-  />
-  </FixedRatioContainer>
-  )
-  }
-  case isGistUrl(url): {
-  const { owner, id } = parseGithubGistUrl(url)
-  return (
-  <>
-  <iframe
-  src={`https://gist.github.com/${owner}/${id}.pibb`}
-  className="h-[300px] w-full overflow-auto border-0"
-  />
+ case isYoutubeUrl(url): {
+ const id = url.searchParams.get('v')!
+ return (
+ <FixedRatioContainer>
+ <iframe
+ src={`https://www.youtube.com/embed/${id}`}
+ className="absolute inset-0 h-full w-full border-0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ title="YouTube video player"
+ />
+ </FixedRatioContainer>
+ )
+ }
+ case isGistUrl(url): {
+ const { owner, id } = parseGithubGistUrl(url)
+ return (
+ <>
+ <iframe
+ src={`https://gist.github.com/${owner}/${id}.pibb`}
+ className="h-[300px] w-full overflow-auto border-0"
+ />
 
-  <a
-  className="mt-2 flex space-x-2 center"
-  href={href}
-  target="_blank"
-  rel="noreferrer"
-  >
-  <GitHubBrandIcon />
-  <span>{href}</span>
-  </a>
-  </>
-  )
-  }
+ <a
+ className="mt-2 flex space-x-2 center"
+ href={href}
+ target="_blank"
+ rel="noreferrer"
+ >
+ <GitHubBrandIcon />
+ <span>{href}</span>
+ </a>
+ </>
+ )
+ }
 
- case isGithubCommitUrl(url): {
- const { owner, repo, id } = parseGithubTypedUrl(url)
- return (
- <>
- <p>
- <MLink href={href}>{href}</MLink>
- </p>
- <LinkCard id={`${owner}/${repo}/commit/${id}`} source="gh-commit" />
- </>
- )
- }
- case isGithubFilePreviewUrl(url): {
- const { owner, repo, afterTypeString } = parseGithubTypedUrl(url)
- const splitString = afterTypeString.split('/')
- const ref = splitString[0]
- const path = ref ? splitString.slice(1).join('/') : afterTypeString
- return (
- <>
+ case isGithubCommitUrl(url): {
+ const { owner, repo, id } = parseGithubTypedUrl(url)
+ return (
+ <>
+ <p>
  <MLink href={href}>{href}</MLink>
- <EmbedGithubFile
- owner={owner}
- repo={repo}
- path={path}
- refType={ref}
- />
- </>
- )
- }
- case isCodesandboxUrl(url): {
- // https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96
- // to
- // https://codesandbox.io/embed/framer-motion-layoutroot-prop-forked-p39g96?fontsize=14&hidenavigation=1&theme=dark
- return (
- <FixedRatioContainer>
- <iframe
- className="absolute inset-0 h-full w-full rounded-md border-0"
- src={`https://codesandbox.io/embed/${url.pathname.slice(
- 2,
- )}?fontsize=14&hidenavigation=1&theme=dark${url.search}`}
- />
- </FixedRatioContainer>
- )
- }
- case isSelfArticleUrl(url): {
- return <LinkCard source="self" id={url.pathname.slice(1)} />
- }
+ </p>
+ <LinkCard id={`${owner}/${repo}/commit/${id}`} source="gh-commit" />
+ </>
+ )
+ }
+ case isGithubFilePreviewUrl(url): {
+ const { owner, repo, afterTypeString } = parseGithubTypedUrl(url)
+ const splitString = afterTypeString.split('/')
+ const ref = splitString[0]
+ const path = ref ? splitString.slice(1).join('/') : afterTypeString
+ return (
+ <>
+ <MLink href={href}>{href}</MLink>
+ <EmbedGithubFile
+ owner={owner}
+ repo={repo}
+ path={path}
+ refType={ref}
+ />
+ </>
+ )
+ }
+ case isCodesandboxUrl(url): {
+ // https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96
+ // to
+ // https://codesandbox.io/embed/framer-motion-layoutroot-prop-forked-p39g96?fontsize=14&hidenavigation=1&theme=dark
+ return (
+ <FixedRatioContainer>
+ <iframe
+ className="absolute inset-0 h-full w-full rounded-md border-0"
+ src={`https://codesandbox.io/embed/${url.pathname.slice(
+ 2,
+ )}?fontsize=14&hidenavigation=1&theme=dark${url.search}`}
+ />
+ </FixedRatioContainer>
+ )
+ }
+ case isSelfArticleUrl(url): {
+ return <LinkCard source="self" id={url.pathname.slice(1)} />
  }
  }
- // fallback to default renderer
- return (
- <p>
- <MLink href={href}>
- <span>{href}</span>
- </MLink>
- </p>
- )
 }
 
 const FixedRatioContainer = ({

src/components/ui/rich-link/Favicon.tsx

@@ -2,13 +2,15 @@ import { BilibiliIcon } from '~/components/icons/platform/BilibiliIcon'
 import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import { IcBaselineTelegram } from '~/components/icons/platform/Telegram'
 import { TwitterIcon } from '~/components/icons/platform/Twitter'
+import { WikipediaIcon } from '~/components/icons/platform/WikipediaIcon'
 import { SimpleIconsZhihu } from '~/components/icons/platform/ZhihuIcon'
 import { clsxm } from '~/lib/helper'
 import {
  isBilibiliUrl,
  isGithubUrl,
  isTelegramUrl,
  isTwitterUrl,
+ isWikipediaUrl,
  isZhihuUrl,
 } from '~/lib/link-parser'
 
@@ -18,7 +20,8 @@ const prefixToIconMap = {
  TG: <IcBaselineTelegram className="text-[#2AABEE]" />,
  BL: <BilibiliIcon className="text-[#469ECF]" />,
  ZH: <SimpleIconsZhihu className="text-[#0084FF]" />,
-} as any
+ WI: <WikipediaIcon className="text-current" />,
+}
 
 const getUrlSource = (url: URL) => {
  const map = [
@@ -42,6 +45,10 @@ const getUrlSource = (url: URL) => {
  type: 'ZH',
  test: isZhihuUrl,
  },
+ {
+ type: 'WI',
+ test: isWikipediaUrl,
+ },
  ]
 
  return map.find((item) => item.test(url))?.type
@@ -57,7 +64,7 @@ type FaviconProps =
 export const Favicon: Component<FaviconProps> = (props) => {
  // @ts-expect-error
  const { source, href, className } = props
- let nextSource = source
+ let nextSource = source as keyof typeof prefixToIconMap
 
  try {
  if (href) {

src/components/ui/rich-link/RichLink.tsx

@@ -7,6 +7,7 @@ const prefixToUrlMap = {
  TW: 'https://twitter.com/',
  TG: 'https://t.me/',
  ZH: 'https://www.zhihu.com/people/',
+ WI: 'https://zh.wikipedia.org/wiki/',
 }
 
 export const RichLink: FC<{

src/lib/link-parser.ts

@@ -83,6 +83,10 @@ export const isZhihuProfileUrl = (url: URL) => {
  return isZhihuUrl(url) && url.pathname.startsWith('/people/')
 }
 
+export const isWikipediaUrl = (url: URL) => {
+ return url.hostname.includes('wikipedia.org')
+}
+
 export const parseSelfArticleUrl = (url: URL) => {
  const [_, type, ...rest] = url.pathname.split('/')
  switch (type) {