feat: add bilibili link parser

Innei · Aug 1, 2023 · e8ec06c · e8ec06c · vercel · Aug 1, 2023
1 parent ea103c0
commit e8ec06c
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 74 deletions.
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
@@ -2,7 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query'
 
-import { CodiconGithubInverted } from '~/components/icons/menu-collection'
+import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import { Loading } from '~/components/ui/loading'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { ProjectList } from '~/components/widgets/project/ProjectList'
@@ -43,7 +43,7 @@ export default function Page() {
               aria-label="view on GitHub"
               rel="noopener noreferrer"
             >
-              <CodiconGithubInverted />
+              <GitHubBrandIcon />
             </a>
           )}
         </h1>

diff --git a/src/components/icons/menu-collection.tsx b/src/components/icons/menu-collection.tsx
@@ -132,16 +132,6 @@ export function MdiFlask(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
-export function MdiTwitter(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
-      />
-    </svg>
-  )
-}
 
 export function IcTwotoneSignpost(props: SVGProps<SVGSVGElement>) {
   return (
@@ -232,27 +222,3 @@ export function AkarIconsMention(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
-
-export function CodiconGithubInverted(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="1em" height="1em" viewBox="0 0 16 16" {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584c.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076c-.343-.93-.881-1.175-.881-1.175c-.734-.489.048-.489.048-.489c.783.049 1.224.832 1.224.832c.734 1.223 1.859.88 2.3.685c.048-.538.293-.88.489-1.076c-1.762-.196-3.621-.881-3.621-3.964c0-.88.293-1.566.832-2.153c-.05-.147-.343-.978.098-2.055c0 0 .685-.196 2.201.832c.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832c.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915c.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.984 7.984 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0z"
-        clipRule="evenodd"
-      />
-    </svg>
-  )
-}
-
-export function IcBaselineTelegram(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19c-.14.75-.42 1-.68 1.03c-.58.05-1.02-.38-1.58-.75c-.88-.58-1.38-.94-2.23-1.5c-.99-.65-.35-1.01.22-1.59c.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02c-.09.02-1.49.95-4.22 2.79c-.4.27-.76.41-1.08.4c-.36-.01-1.04-.2-1.55-.37c-.63-.2-1.12-.31-1.08-.66c.02-.18.27-.36.74-.55c2.92-1.27 4.86-2.11 5.83-2.51c2.78-1.16 3.35-1.36 3.73-1.36c.08 0 .27.02.39.12c.1.08.13.19.14.27c-.01.06.01.24 0 .38z"
-      />
-    </svg>
-  )
-}
diff --git a/src/components/icons/platform/BilibiliIcon.tsx b/src/components/icons/platform/BilibiliIcon.tsx
@@ -1,9 +1,12 @@
-export const BilibiliIcon = () => (
+import type { SVGProps } from 'react'
+
+export const BilibiliIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
     height="1em"
     viewBox="0 0 24 24"
+    {...props}
   >
     <path
       fill="currentColor"

diff --git a/src/components/icons/platform/Telegram.tsx b/src/components/icons/platform/Telegram.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function IcBaselineTelegram(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19c-.14.75-.42 1-.68 1.03c-.58.05-1.02-.38-1.58-.75c-.88-.58-1.38-.94-2.23-1.5c-.99-.65-.35-1.01.22-1.59c.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02c-.09.02-1.49.95-4.22 2.79c-.4.27-.76.41-1.08.4c-.36-.01-1.04-.2-1.55-.37c-.63-.2-1.12-.31-1.08-.66c.02-.18.27-.36.74-.55c2.92-1.27 4.86-2.11 5.83-2.51c2.78-1.16 3.35-1.36 3.73-1.36c.08 0 .27.02.39.12c.1.08.13.19.14.27c-.01.06.01.24 0 .38z"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/icons/platform/Twitter.tsx b/src/components/icons/platform/Twitter.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function TwitterIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/ui/markdown/customize.md b/src/components/ui/markdown/customize.md
@@ -22,12 +22,11 @@ _here be dragons_
 _here be dragons_
 :::
 
-
 ::: gallery
 https://loremflickr.com/640/480/city?1
 https://loremflickr.com/640/480/city?2
 https://loremflickr.com/640/480/city?3
-![](https://loremflickr.com/640/480/city?4 "Image")
+![](https://loremflickr.com/640/480/city?4 'Image')
 :::
 
 ## Rich Link
@@ -62,7 +61,6 @@ https://github.com/vuejs/vitepress/commit/71eb11f72e60706a546b756dc3fd72d06e2ae4
 
 https://github.com/vuejs/vitepress/commit/71eb11f72e60706a546b756dc3fd72d06e2ae4e2
 
-
 ```
 https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96
 ```
@@ -89,7 +87,6 @@ https://github.com/toeverything/AFFiNE/blob/himself65/0710/remove-effect/apps/we
 
 <LinkCard source="gh" id="mx-space/kami">
 
-
 ```
 <LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">
 ```
@@ -110,7 +107,6 @@ Inline [pseudoyu](https://twitter.com/pseudo_yu)
 
 Inline [pseudoyu](https://twitter.com/pseudo_yu)
 
-
 ```
 Inline <https://github.com/Innei>
 ```
@@ -123,11 +119,10 @@ Inline https://github.com/Innei
 
 Inline https://github.com/Innei
 
-
 ## Mention
 
 ```
 [Innei]{GH@Innei}
 ```
 
-[Innei 太菜了]{GH@Innei}
+[Innei 太菜了]{GH@Innei}
diff --git a/src/components/ui/markdown/test-text.md b/src/components/ui/markdown/test-text.md
@@ -2,7 +2,6 @@
 
 ↑ 引用
 
-
 https://twitter.com/strrlthedev/status/1671044378289393664
 
 https://github.com/ast-grep/ast-grep
@@ -13,7 +12,6 @@ https://gist.github.com/Innei/cb67fc579a460d6b863b3ca3c1bd6e1b
 
 https://github.com/Innei/Shiro/commit/e1b0b57aaea0eec1b695c4f1961297b42b935044
 
-
 # Test 文本
 
 > 影响大众想象力的，并不是事实本身，而是它扩散和传播的方式。

diff --git a/src/components/ui/rich-link/Favicon.tsx b/src/components/ui/rich-link/Favicon.tsx
@@ -1,15 +1,20 @@
-import {
-  CodiconGithubInverted,
-  IcBaselineTelegram,
-  MdiTwitter,
-} from '~/components/icons/menu-collection'
+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 { clsxm } from '~/lib/helper'
-import { isGithubUrl, isTelegramUrl, isTwitterUrl } from '~/lib/link-parser'
+import {
+  isBilibiliUrl,
+  isGithubUrl,
+  isTelegramUrl,
+  isTwitterUrl,
+} from '~/lib/link-parser'
 
 const prefixToIconMap = {
-  GH: <CodiconGithubInverted className="text-[#1D2127] dark:text-[#FFFFFF]" />,
-  TW: <MdiTwitter className="text-[#1DA1F2]" />,
+  GH: <GitHubBrandIcon className="text-[#1D2127] dark:text-[#FFFFFF]" />,
+  TW: <TwitterIcon className="text-[#1DA1F2]" />,
   TG: <IcBaselineTelegram className="text-[#2AABEE]" />,
+  BL: <BilibiliIcon className="text-[#469ECF]" />,
 } as any
 
 type FaviconProps =
@@ -41,6 +46,10 @@ export const Favicon: Component<FaviconProps> = (props) => {
           nextSource = 'TG'
           break
         }
+
+        case isBilibiliUrl(url): {
+          nextSource = 'BL'
+        }
       }
     }
   } catch {}

diff --git a/src/components/ui/rich-link/index.demo.tsx b/src/components/ui/rich-link/index.demo.tsx
@@ -0,0 +1,47 @@
+import type { DocumentComponent } from 'storybook/typings'
+
+import { Favicon } from './Favicon'
+import { RichLink } from './RichLink'
+
+export const RichLinkDemo: DocumentComponent = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <RichLink source="GH" name="Innei" />
+      <RichLink source="TW" name="__oQuery" />
+    </div>
+  )
+}
+
+RichLinkDemo.meta = {
+  title: 'Rich Link',
+}
+
+export const FaviconsDemo: DocumentComponent = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Favicon source="GH" />
+      <Favicon source="TW" />
+      <Favicon source="TG" />
+      <Favicon source="BL" />
+    </div>
+  )
+}
+
+FaviconsDemo.meta = {
+  title: 'Favicons with source',
+}
+
+export const FaviconsDemo2: DocumentComponent = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Favicon href="https://t.me/" />
+      <Favicon href="https://x.com" />
+      <Favicon href="https://twitter.com" />
+      <Favicon href="https://bilibili.com" />
+    </div>
+  )
+}
+
+FaviconsDemo2.meta = {
+  title: 'Favicons with link',
+}
diff --git a/src/components/widgets/project/ProjectIcon.tsx b/src/components/widgets/project/ProjectIcon.tsx
@@ -9,11 +9,11 @@ export const ProjectIcon: Component<{ avatar?: string; name?: string }> = (
   return (
     <div
       className={clsxm(
-        'project-icon flex flex-shrink-0 flex-grow items-center justify-center rounded-xl',
+        'project-icon flex flex-shrink-0 flex-grow items-center justify-center',
         avatar
           ? 'ring-2 ring-slate-200 dark:ring-neutral-800'
           : 'bg-slate-300 text-white dark:bg-neutral-800',
-        'aspect-square rounded-md transition-all duration-300',
+        'mask mask-squircle aspect-square transition-all duration-300',
         className,
       )}
     >

diff --git a/src/components/widgets/project/ProjectList.tsx b/src/components/widgets/project/ProjectList.tsx
@@ -12,12 +12,10 @@ export type Project = {
   description?: string
 }
 export const ProjectList: FC<{ projects: Project[] }> = (props) => {
-  const projects = props.projects
-
   return (
     <section key="list" className="text-center">
       <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {projects.map((project) => {
+        {props.projects.map((project) => {
           return (
             <Link
               href={routeBuilder(Routes.Project, { id: project.id })}

diff --git a/src/components/widgets/shared/ShareModal.tsx b/src/components/widgets/shared/ShareModal.tsx
@@ -1,10 +1,8 @@
 import dynamic from 'next/dynamic'
 import type { FC } from 'react'
 
-import {
-  IcBaselineTelegram,
-  MdiTwitter,
-} from '~/components/icons/menu-collection'
+import { IcBaselineTelegram } from '~/components/icons/platform/Telegram'
+import { TwitterIcon } from '~/components/icons/platform/Twitter'
 import { toast } from '~/lib/toast'
 import { getAggregationData } from '~/providers/root/aggregation-data-provider'
 
@@ -16,7 +14,7 @@ const QRCodeSVG = dynamic(
 const shareList = [
   {
     name: 'Twitter',
-    icon: <MdiTwitter className="text-[#1DA1F2]" />,
+    icon: <TwitterIcon className="text-[#1DA1F2]" />,
     onClick: (data: ShareData) => {
       window.open(
         `https://twitter.com/intent/tweet?url=${data.url}&text=${

diff --git a/src/lib/link-parser.ts b/src/lib/link-parser.ts
@@ -1,9 +1,5 @@
 import { isClientSide, isDev } from './env'
 
-export const isTweetUrl = (url: URL) => {
-  return url.hostname === 'twitter.com' && url.pathname.startsWith('/')
-}
-
 export const getTweetId = (url: URL) => {
   return url.pathname.split('/').pop()!
 }
@@ -25,7 +21,7 @@ export const isGistUrl = (url: URL) => {
 }
 
 export const isGithubCommitUrl = (url: URL) => {
-  const [_, owner, repo, type, ...rest] = url.pathname.split('/')
+  const [_, , , type] = url.pathname.split('/')
   return url.hostname === 'github.com' && type === 'commit'
 }
 
@@ -35,20 +31,24 @@ export const isGithubProfileUrl = (url: URL) => {
 
 export const isGithubFilePreviewUrl = (url: URL) => {
   // https://github.com/Innei/sprightly/blob/14234594f44956e6f56f1f92952ce82db37ef4df/src/socket/handler.ts
-  const [_, owner, repo, type, ...rest] = url.pathname.split('/')
+  const [_, , , type] = url.pathname.split('/')
   return url.hostname === 'github.com' && type === 'blob'
 }
 
+export const isTweetUrl = (url: URL) => {
+  return isTwitterUrl(url) && url.pathname.startsWith('/')
+}
+
 export const isTwitterProfileUrl = (url: URL) => {
-  return url.hostname === 'twitter.com' && url.pathname.split('/').length === 2
+  return isTwitterUrl(url) && url.pathname.split('/').length === 2
 }
 
 export const isGithubUrl = (url: URL) => {
   return url.hostname === 'github.com'
 }
 
 export const isTwitterUrl = (url: URL) => {
-  return url.hostname === 'twitter.com'
+  return url.hostname === 'twitter.com' || url.hostname === 'x.com'
 }
 
 export const isTelegramUrl = (url: URL) => {
@@ -62,6 +62,10 @@ export const isCodesandboxUrl = (url: URL) => {
   )
 }
 
+export const isBilibiliUrl = (url: URL) => {
+  return url.hostname.includes('bilibili.com')
+}
+
 export const isSelfArticleUrl = (url: URL) => {
   if (!isClientSide) return false
   if (isDev && url.hostname === 'innei.in') return true

diff --git a/storybook/src/glob.tsx b/storybook/src/glob.tsx
@@ -61,8 +61,8 @@ export const laziedComponents: FC<any>[] = Object.values(
 
         const { meta = {} } = DocumentComponent
         const { description, title } = meta
-        components.push(
-          <section className="space-y-4">
+        components.unshift(
+          <section className="space-y-4 mt-8">
             <h2 className="text-lg font-medium">{title || key}</h2>
             {!!description && <Markdown value={description} />}
             <DocumentComponent />