Add GitBook theme structure with Traditional Chinese docs

2025-09-17 13:06:47 +08:00
parent 6f6671a024
commit 49dab41935
44 changed files with 2675 additions and 0 deletions
--- a/gitbook/components/Catalog.js
+++ b/gitbook/components/Catalog.js
@@ -0,0 +1,104 @@
+import { isBrowser } from '@/lib/utils'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * 目錄導覽元件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ post }) => {
+  const toc = post?.toc
+  // 同步選取目錄事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 監聽捲動事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [post])
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = null
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const tocIds = post?.toc?.map(t => uuidToId(t.id)) || []
+      const index = tocIds.indexOf(currentSectionId) || 0
+      if (isBrowser && tocIds?.length > 0) {
+        for (const tocWrapper of document?.getElementsByClassName(
+          'toc-wrapper'
+        )) {
+          tocWrapper?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+        }
+      }
+    }, throttleMs)
+  )
+
+  // 無目錄則直接返回空
+  if (!toc || toc?.length < 1) {
+    return <></>
+  }
+
+  return (
+    <>
+      {/* <div className='w-full hidden md:block'>
+        <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
+        </div> */}
+
+      <div
+        id='toc-wrapper'
+        className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
+        <nav className='h-full text-black'>
+          {toc?.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                //  notion-table-of-contents-item
+                className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </>
+  )
+}
+
+export default Catalog