文章加锁功能

themes/empty/LayoutSlug.js

@@ -14,6 +14,9 @@ import {
   NotionRenderer
 } from 'react-notion-x'
 import LayoutBase from './LayoutBase'
+import { useState, useRef, useEffect } from 'react'
+import { ArticleLock } from './components/ArticleLock'
+import mediumZoom from 'medium-zoom'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -27,18 +30,46 @@ export const LayoutSlug = props => {
     type: 'article',
     tags: post.tags
   }
+  // 文章加锁
+  const articleLock = post.password && post.password !== ''
+  const [lock, setLock] = useState(articleLock)
+  const validPassword = result => {
+    if (result) {
+      setLock(false)
+    }
+  }
 
-  if (post?.blockMap?.block) {
+  if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)
   }
 
+  const zoom =
+  typeof window !== 'undefined' &&
+  mediumZoom({
+    container: '.notion-viewport',
+    background: 'rgba(0, 0, 0, 0.2)',
+    margin: getMediumZoomMargin()
+  })
+  const zoomRef = useRef(zoom ? zoom.clone() : null)
+  useEffect(() => {
+    // 将所有container下的所有图片添加medium-zoom
+    const container = document.getElementById('notion-article')
+    const imgList = container?.getElementsByTagName('img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        zoomRef.current.attach(imgList[i])
+      }
+    }
+  })
   return (
     <LayoutBase {...props} meta={meta}>
       <div>
         <h2>{post?.title}</h2>
-        <p>
-          <section id="notion-article" className="px-1">
+
+        {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
+
+        {!lock && <section id="notion-article" className="px-1">
             {post.blockMap && (
               <NotionRenderer
                 recordMap={post.blockMap}
@@ -51,9 +82,27 @@ export const LayoutSlug = props => {
                 }}
               />
             )}
-          </section>
-        </p>
+          </section>}
+
       </div>
     </LayoutBase>
   )
 }
+
+function getMediumZoomMargin () {
+  const width = window.innerWidth
+
+  if (width < 500) {
+    return 8
+  } else if (width < 800) {
+    return 20
+  } else if (width < 1280) {
+    return 30
+  } else if (width < 1600) {
+    return 40
+  } else if (width < 1920) {
+    return 48
+  } else {
+    return 72
+  }
+}

themes/empty/components/ArticleLock.js

@@ -0,0 +1,37 @@
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { password, validPassword } = props
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (p && p.value && p.value === password) {
+      validPassword(true)
+    } else {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = '<div class=\'text-red-500 animate__shakeX animate__animated\'>密码输入错误</div>'
+      }
+    }
+  }
+
+  return <div className='w-full flex justify-center items-center h-96 font-sans'>
+    <div className='text-center space-y-3'>
+      <div className='font-bold'>文章已加锁，请输入访问密码:</div>
+      <div className='flex'>
+        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input>
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
+          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;提交</i>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+</div>
+}