feat: support hash in github link (#513)

Innei · Dec 17, 2024 · 7cffc4a · 7cffc4a
1 parent f25e34b
commit 7cffc4a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 11 deletions.
diff --git a/src/components/modules/shared/EmbedGithubFile.tsx b/src/components/modules/shared/EmbedGithubFile.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import React, { memo } from 'react'
+import * as React from 'react'
+import { memo } from 'react'
 
 import { HighLighterPrismCdn } from '../../ui/code-highlighter'
 import { Loading } from '../../ui/loading'
@@ -61,11 +62,15 @@ export const EmbedGithubFile = memo(
     owner,
     path,
     repo,
+    startLineNumber,
+    endLineNumber,
     refType,
   }: {
     owner: string
     repo: string
     path: string
+    startLineNumber: number
+    endLineNumber?: number
     refType?: string
   }) => {
     const ext = path.slice(path.lastIndexOf('.'))
@@ -94,7 +99,7 @@ export const EmbedGithubFile = memo(
 
     if (isError) {
       return (
-        <pre className="flex h-[50vh] flex-wrap rounded-md border border-uk-orange-light center">
+        <pre className="center flex h-[50vh] flex-wrap rounded-md border border-uk-orange-light">
           <code>Loading GitHub File Preview Failed:</code>
           <br />
           <code>
@@ -106,11 +111,33 @@ export const EmbedGithubFile = memo(
 
     if (!data) return null
 
-    return (
-      <div className="h-[50vh] w-full overflow-auto">
-        <HighLighterPrismCdn content={data} lang={fileType} />
-      </div>
-    )
+    const splitData = data.split('\n')
+    if (!endLineNumber) {
+      endLineNumber = splitData.length
+    }
+    const newData = splitData.slice(startLineNumber, endLineNumber).join('\n')
+
+    if (endLineNumber - startLineNumber > 20) {
+      return (
+        <div className="h-[50vh] w-full overflow-auto">
+          <HighLighterPrismCdn
+            content={newData}
+            lang={fileType}
+            startLineNumber={startLineNumber + 1}
+          />
+        </div>
+      )
+    } else {
+      return (
+        <div className="w-full overflow-auto">
+          <HighLighterPrismCdn
+            content={newData}
+            lang={fileType}
+            startLineNumber={startLineNumber + 1}
+          />
+        </div>
+      )
+    }
   },
 )
 EmbedGithubFile.displayName = 'EmbedGithubFile'
diff --git a/src/components/ui/code-highlighter/CodeHighlighter.tsx b/src/components/ui/code-highlighter/CodeHighlighter.tsx
@@ -1,4 +1,4 @@
-import type React from 'react'
+import type * as React from 'react'
 import type { FC } from 'react'
 import {
   use,
@@ -29,10 +29,11 @@ declare global {
 interface Props {
   lang: string | undefined
   content: string
+  startLineNumber?: number
 }
 
 export const HighLighterPrismCdn: FC<Props> = (props) => {
-  const { lang: language, content: value } = props
+  const { lang: language, content: value, startLineNumber = 1 } = props
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(value)
@@ -47,7 +48,10 @@ export const HighLighterPrismCdn: FC<Props> = (props) => {
         {language?.toUpperCase()}
       </span>
 
-      <pre className="line-numbers !bg-transparent" data-start="1">
+      <pre
+        className="line-numbers !bg-transparent"
+        data-start={startLineNumber}
+      >
         <code
           className={`language-${language ?? 'markup'} !bg-transparent`}
           ref={ref}

diff --git a/src/components/ui/markdown/renderers/LinkRenderer.tsx b/src/components/ui/markdown/renderers/LinkRenderer.tsx
@@ -1,5 +1,6 @@
+
 import dynamic from 'next/dynamic'
-import type React from 'react'
+import type * as React from 'react'
 import type { FC, PropsWithChildren, ReactNode } from 'react'
 import { Suspense, useMemo } from 'react'
 
@@ -291,12 +292,27 @@ const GithubUrlRenderL: FC<{
       const splitString = afterTypeString.split('/')
       const ref = splitString[0]
       const path = ref ? splitString.slice(1).join('/') : afterTypeString
+      const matchResult = url.hash.match(/L\d+/g)
+      let startLineNumber = 0
+      let endLineNumber
+      if (!matchResult) {
+        startLineNumber = 0
+        endLineNumber = undefined
+      } else if (matchResult.length === 1) {
+        startLineNumber = Number.parseInt(matchResult[0].slice(1)) - 1
+        endLineNumber = startLineNumber + 1
+      } else {
+        startLineNumber = Number.parseInt(matchResult[0].slice(1)) - 1
+        endLineNumber = Number.parseInt(matchResult[1].slice(1))
+      }
       return (
         <div className="flex w-full flex-col items-center">
           <EmbedGithubFile
             owner={owner}
             repo={repo}
             path={path}
+            startLineNumber={startLineNumber}
+            endLineNumber={endLineNumber}
             refType={ref}
           />
           <div className="mt-4">