feat: source of gh-commit

Signed-off-by: Innei <i@innei.in>

.env.template

@@ -14,6 +14,3 @@ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
-
-UPSTASH_URL=
-UPSTASH_TOKEN=

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

@@ -1,10 +1,10 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 import axios from 'axios'
 import clsx from 'clsx'
 import Link from 'next/link'
 import RemoveMarkdown from 'remove-markdown'
-import type { FC, SyntheticEvent } from 'react'
+import type { FC, ReactNode, SyntheticEvent } from 'react'
 
 import { simpleCamelcaseKeys as camelcaseKeys } from '@mx-space/api-client'
 
@@ -16,7 +16,7 @@ import { apiClient } from '~/lib/request'
 
 import styles from './LinkCard.module.css'
 
-export type LinkCardSource = 'gh' | 'self' | 'mx-space'
+export type LinkCardSource = 'gh' | 'self' | 'mx-space' | 'gh-commit'
 export interface LinkCardProps {
   id: string
   source?: LinkCardSource
@@ -43,8 +43,8 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
 
   const [fullUrl, setFullUrl] = useState('about:blank')
   const [cardInfo, setCardInfo] = useState<{
-    title: string
-    desc?: string
+    title: ReactNode
+    desc?: ReactNode
     image?: string
   }>()
 
@@ -139,6 +139,54 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
 
         return !rest.length
       }
+      case 'gh-commit': {
+        // e.g. mx-space/kami/commit/1234567890
+        const [namespace, repo, variant, commitId] = id.split('/')
+
+        if (!namespace || !repo || !commitId) {
+          return false
+        }
+        if (variant !== 'commit') {
+          return false
+        }
+
+        fetchFnRef.current = async () => {
+          const data = await axios
+            .get<any>(
+              `https://api.github.com/repos/${namespace}/${repo}/commits/${commitId}`,
+            )
+            .then((data) => camelcaseKeys(data.data))
+
+          setCardInfo({
+            image: data.author.avatarUrl,
+            title: (
+              <span className="space-x-2">
+                <span>
+                  {namespace}/{repo}
+                </span>
+                <span className="font-normal">
+                  {data.commit.message.replace(/Signed-off-by:.+/, '')}
+                </span>
+              </span>
+            ),
+            desc: (
+              <span className="space-x-5 font-mono">
+                <span className="text-uk-green-light">
+                  +{data.stats.additions}
+                </span>
+                <span className="text-uk-red-light">
+                  -{data.stats.deletions}
+                </span>
+
+                <span className="text-sm">{data.sha.slice(0, 7)}</span>
+              </span>
+            ),
+          })
+          setFullUrl(data.htmlUrl)
+        }
+
+        return true
+      }
     }
   }, [source, id])
   const fetchInfo = useCallback(async () => {

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

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react'
 import dynamic from 'next/dynamic'
 
+import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
+
 import { LinkCard } from '../../link-card'
 import { MLink } from './link'
 
@@ -32,15 +34,50 @@ export const LinkRenderer = ({ href }: { href: string }) => {
       case isYoutubeUrl(url): {
         const id = url.searchParams.get('v')!
         return (
-          <div className="relative h-0 w-full pb-[56%]">
+          <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"
             />
-          </div>
+          </FixedRatioContainer>
+        )
+      }
+      case isGistUrl(url): {
+        const [_, owner, id] = url.pathname.split('/')
+        return (
+          <>
+            <FixedRatioContainer>
+              <iframe
+                src={`https://gist.github.com/${owner}/${id}.pibb`}
+                className="absolute inset-0 h-full w-full border-0"
+              />
+            </FixedRatioContainer>
+
+            <a
+              className="-mt-4 mb-4 flex space-x-2 center"
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <GitHubBrandIcon />
+              <span>{href}</span>
+            </a>
+          </>
+        )
+      }
+
+      case isGithubCommitUrl(url): {
+        const [_, owner, repo, type, id] = url.pathname.split('/')
+        return (
+          <>
+            <p>
+              <MLink href={href}>{href}</MLink>
+            </p>
+            <LinkCard id={`${owner}/${repo}/commit/${id}`} source="gh-commit" />
+          </>
         )
       }
     }
@@ -54,6 +91,26 @@ export const LinkRenderer = ({ href }: { href: string }) => {
     </p>
   )
 }
+
+const FixedRatioContainer = ({
+  children,
+  ratio = 58,
+}: {
+  ratio?: number
+  children: React.ReactNode
+}) => {
+  return (
+    <div
+      className="relative my-8 h-0 w-full"
+      style={{
+        paddingBottom: `${ratio}%`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
 const isTweetUrl = (url: URL) => {
   return url.hostname === 'twitter.com' && url.pathname.startsWith('/')
 }
@@ -72,3 +129,12 @@ const isGithubRepoUrl = (url: URL) => {
 const isYoutubeUrl = (url: URL) => {
   return url.hostname === 'www.youtube.com' && url.pathname.startsWith('/watch')
 }
+
+const isGistUrl = (url: URL) => {
+  return url.hostname === 'gist.github.com'
+}
+
+const isGithubCommitUrl = (url: URL) => {
+  const [_, owner, repo, type, ...rest] = url.pathname.split('/')
+  return url.hostname === 'github.com' && type === 'commit'
+}

src/components/ui/markdown/test-text.md

@@ -7,6 +7,12 @@ https://twitter.com/strrlthedev/status/1671044378289393664
 
 https://github.com/ast-grep/ast-grep
 
+https://www.youtube.com/watch?v=ZRv0Z-M7NqM
+
+https://gist.github.com/Innei/cb67fc579a460d6b863b3ca3c1bd6e1b
+
+https://github.com/Innei/Shiro/commit/e1b0b57aaea0eec1b695c4f1961297b42b935044
+
 
 # Test 文本