Merge pull request #45 from tangly1024/theme-medium

feature: 增加目录组件

themes/Medium/LayoutBase.js

@@ -13,10 +13,10 @@ import CONFIG_MEDIUM from './config_medium'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true } = props
+  const { children, meta, showInfoCard = true, slotRight } = props
 
   return (
-    <div className='bg-white w-full h-full min-h-screen justify-center'>
+    <div id="container" className='bg-white w-full h-full min-h-screen justify-center'>
       <CommonHead meta={meta}/>
       <main id="wrapper" className='max-w-7xl w-full h-full mx-auto'>
         <LogoBar/>
@@ -28,6 +28,7 @@ const LayoutBase = props => {
         </div>
         <div className='w-72 px-8 py-6 fixed right-12 top-24 hidden lg:block'>
           { CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps/>}
+          { slotRight }
         </div>
       </main>
       <Footer/>

themes/Medium/LayoutSlug.js

@@ -16,6 +16,7 @@ import Link from 'next/link'
 import mediumZoom from 'medium-zoom'
 import { useEffect, useRef } from 'react'
 import ArticleAround from './components/ArticleAround'
+import Catalog from './components/Catalog'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -55,7 +56,7 @@ export const LayoutSlug = (props) => {
     }
   })
 
-  return <LayoutBase {...props} meta={meta} showInfoCard={false}>
+  return <LayoutBase {...props} meta={meta} showInfoCard={false} slotRight={<Catalog toc={post.toc}/>}>
     <h1 className='text-4xl mt-12 font-sans'>{post?.title}</h1>
     <Link href='/about' passHref>
       <div className='flex py-3 items-center font-sans cursor-pointer'>
@@ -86,6 +87,7 @@ export const LayoutSlug = (props) => {
         />
       )}
     </section>
+
     <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
       {/* 文章内嵌广告 */}
       <ins className="adsbygoogle"

themes/Medium/components/Catalog.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faStream } from '@fortawesome/free-solid-svg-icons'
+// import { cs } from 'react-notion-x'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+  const throttleMs = 100
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    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)
+  }, throttleMs))
+
+  return <div className='px-3'>
+    <div className='w-full'><FontAwesomeIcon className='mr-1' icon={faStream}/> 目录</div>
+    <div className='w-full py-1'>
+      <Progress/>
+    </div>
+    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
+      {toc.map((tocItem) => {
+        const id = uuidToId(tocItem.id)
+        return (
+          <a
+            key={id}
+            href={`#${id}`}
+            className={`notion-table-of-contents-item duration-300 transform font-light
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+          >
+                      <span
+                        style={{
+                          display: 'inline-block',
+                          marginLeft: tocItem.indentLevel * 16
+                        }}
+                        className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
+                      >
+                        {tocItem.text}
+                      </span>
+          </a>
+        )
+      })}
+    </nav>
+  </div>
+}
+
+export default Catalog

themes/Medium/components/Progress.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || document.getElementById('container')
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [percent])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+      <div
+        className="h-4 bg-gray-600 duration-200"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress