feat: add arxiv card (#33)

src/components/ui/link-card/LinkCard.tsx

@@ -93,6 +93,7 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
         [LinkCardSource.GHRepo]: fetchGitHubRepoData,
         [LinkCardSource.GHCommit]: fetchGitHubCommitData,
         [LinkCardSource.GHPr]: fetchGitHubPRData,
+        [LinkCardSource.Arxiv]: fetchArxivData,
         [LinkCardSource.Self]: fetchMxSpaceData,
         [LinkCardSource.LEETCODE]: fetchLeetCodeQuestionData,
       } as Record<LinkCardSource, FetchObject>
@@ -301,6 +302,53 @@ const fetchGitHubRepoData: FetchObject = {
   },
 }
 
+const fetchArxivData: FetchObject = {
+  isValid: (id) => {
+    // /\d{4}\.\d+(?:v\d+)?/
+    return /^\d{4}\.\d+(?:v\d+)?$/.test(id)
+  },
+  fetch: async (id, setCardInfo, setFullUrl) => {
+    try {
+      const response = await fetch(
+        `https://export.arxiv.org/api/query?id_list=${id}`,
+      )
+      const text = await response.text()
+      const parser = new DOMParser()
+      const xmlDoc = parser.parseFromString(text, 'application/xml')
+
+      const entry = xmlDoc.getElementsByTagName('entry')[0]
+      const title = entry.getElementsByTagName('title')[0].textContent
+      const authors = entry.getElementsByTagName('author')
+      const authorNames = Array.from(authors).map(
+        (author) => author.getElementsByTagName('name')[0].textContent,
+      )
+      // const category = entry
+      //   .getElementsByTagName('category')[0]
+      //   .getAttribute('term')
+
+      setCardInfo({
+        title: (
+          <span className="flex items-center gap-2">
+            <span className="flex-1">{title}</span>
+            <span className="shrink-0 self-end justify-self-end">
+              <span className="inline-flex shrink-0 items-center gap-1 self-center text-sm text-orange-400 dark:text-yellow-500">
+                <span className="font-sans font-medium">{id}</span>
+              </span>
+            </span>
+          </span>
+        ),
+        desc:
+          authorNames.length > 1 ? `${authorNames[0]} et al.` : authorNames[0],
+      })
+
+      setFullUrl(entry.getElementsByTagName('id')[0].textContent!)
+    } catch (err) {
+      console.error('Error fetching ArXiv data:', err)
+      throw err
+    }
+  },
+}
+
 const fetchGitHubCommitData: FetchObject = {
   isValid: (id) => {
     // 假设 'gh-commit' 类型的 id 应该是 'username/repo/commit/commitId' 的形式

src/components/ui/link-card/enums.tsx

@@ -8,4 +8,5 @@ export enum LinkCardSource {
   GHPr = 'gh-pr',
   TMDB = 'tmdb',
   LEETCODE = 'leetcode',
+  Arxiv = 'arxiv',
 }

src/components/ui/link-card/index.demo.tsx

@@ -49,3 +49,12 @@ LinkCardDemo5.meta = {
   description: 'Show Github Commit LinkCard',
   title: 'LinkCard - GitHub Commit',
 }
+
+export const LinkCardDemo6: DocumentComponent = () => (
+  <LinkCard id="2309.16889" source={LinkCardSource.Arxiv} />
+)
+
+LinkCardDemo6.meta = {
+  description: 'Show Arxiv LinkCard',
+  title: 'LinkCard - Arxiv',
+}

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

@@ -10,6 +10,7 @@ import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import { BlockLoading } from '~/components/modules/shared/BlockLoading'
 import {
   getTweetId,
+  isArxivUrl,
   isBilibiliVideoUrl,
   isCodesandboxUrl,
   isGistUrl,
@@ -80,6 +81,16 @@ export const BlockLinkRenderer = ({
         />
       )
     }
+    case isArxivUrl(url): {
+      return (
+        <LinkCard
+          fallbackUrl={url.toString()}
+          source={LinkCardSource.Arxiv}
+          id={url.pathname.slice(5).toLowerCase()}
+        />
+      )
+    }
+
     case isTweetUrl(url): {
       const id = getTweetId(url)
 

src/lib/link-parser.ts

@@ -13,6 +13,13 @@ export const isGithubRepoUrl = (url: URL) =>
   url.pathname.startsWith('/') &&
   url.pathname.split('/').length === 3
 
+const ARXIV_HOST = 'arxiv.org'
+
+export const isArxivUrl = (url: URL) =>
+  url.hostname === ARXIV_HOST &&
+  url.pathname.startsWith('/') &&
+  /(abs|pdf)\/\d{4}\.\d+(?:v\d+)?/i.test(url.pathname)
+
 export const isGithubPrUrl = (url: URL) =>
   url.hostname === GITHUB_HOST && url.pathname.includes('/pull/')