Merge branch 'main' of https://github.com/tangly1024/NotionNext

wensley · May 15, 2024 · f5210d5 · f5210d5
2 parents d500e5a + 70e5364
commit f5210d5
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 27 deletions.
diff --git a/components/LazyImage.js b/components/LazyImage.js
@@ -1,7 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import Head from 'next/head'
-import React, { useEffect, useRef, useState } from 'react'
-
+import { useEffect, useRef, useState } from 'react'
 /**
  * 图片懒加载
  * @param {*} param0
@@ -20,26 +19,35 @@ export default function LazyImage({
   onLoad,
   style
 }) {
+  const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
   const imageRef = useRef(null)
-  const [imageLoaded, setImageLoaded] = useState(false)
+  const [adjustedSrc, setAdjustedSrc] = useState(
+    placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  )
+
   if (!placeholderSrc) {
     placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
   }
 
+  /**
+   * 图片加载成功回调
+   */
   const handleImageLoad = () => {
-    setImageLoaded(true)
     if (typeof onLoad === 'function') {
       onLoad() // 触发传递的onLoad回调函数
     }
   }
 
   useEffect(() => {
+    const adjustedImageSrc = adjustImgSize(src, maxWidth)
+    setAdjustedSrc(adjustedImageSrc)
+
     const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
+      entries => {
+        entries.forEach(entry => {
           if (entry.isIntersecting) {
             const lazyImage = entry.target
-            lazyImage.src = src
+            lazyImage.src = adjustedImageSrc
             observer.unobserve(lazyImage)
           }
         })
@@ -56,12 +64,12 @@ export default function LazyImage({
         observer.unobserve(imageRef.current)
       }
     }
-  }, [src])
+  }, [src, maxWidth])
 
   // 动态添加width、height和className属性，仅在它们为有效值时添加
   const imgProps = {
     ref: imageRef,
-    src: imageLoaded ? src : placeholderSrc,
+    src: priority ? adjustedSrc : placeholderSrc,
     alt: alt,
     onLoad: handleImageLoad
   }
@@ -87,12 +95,44 @@ export default function LazyImage({
   if (style) {
     imgProps.style = style
   }
-  return (<>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img {...imgProps} />
-        {/* 预加载 */}
-        {priority && <Head>
-            <link rel='preload' as='image' src={src} />
-        </Head>}
-    </>)
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img {...imgProps} />
+      {/* 预加载 */}
+      {priority && (
+        <Head>
+          <link rel='preload' as='image' href={adjustedSrc} />
+        </Head>
+      )}
+    </>
+  )
+}
+/**
+ * 根据窗口尺寸决定压缩图片宽度
+ * @param {*} src
+ * @param {*} maxWidth
+ * @returns
+ */
+
+const adjustImgSize = (src, maxWidth) => {
+  if (!src) {
+    return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  }
+  const screenWidth = window.screen.width
+
+  // 屏幕尺寸大于默认图片尺寸，没必要再压缩
+  if (screenWidth > maxWidth) {
+    return src
+  }
+
+  // 正则表达式，用于匹配 URL 中的 width 参数
+  const widthRegex = /width=\d+/
+  // 正则表达式，用于匹配 URL 中的 w 参数
+  const wRegex = /w=\d+/
+
+  // 使用正则表达式替换 width/w 参数
+  return src
+    .replace(widthRegex, `width=${screenWidth}`)
+    .replace(wRegex, `w=${screenWidth}`)
 }
diff --git a/components/NotionPage.js b/components/NotionPage.js
@@ -211,13 +211,16 @@ const Equation = dynamic(
   { ssr: false }
 )
 
-// 文档
-const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
-  {
-    ssr: false
-  }
-)
+// 原版文档
+// const Pdf = dynamic(
+//   () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
+//   {
+//     ssr: false
+//   }
+// )
+const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
+  ssr: false
+})
 
 // 美化代码 from: https://github.com/txs
 const PrismMac = dynamic(() => import('@/components/PrismMac'), {

diff --git a/components/Pdf.js b/components/Pdf.js
@@ -0,0 +1,14 @@
+/**
+ * 渲染pdf
+ * 直接用googledocs预览pdf
+ * @param {*} file
+ * @returns
+ */
+export function Pdf({ file }) {
+  const src =
+    'https://docs.google.com/viewer?embedded=true&url=' +
+    encodeURIComponent(file)
+  return (
+    <embed src={src} type='application/pdf' width='100%' height='100%'></embed>
+  )
+}
diff --git a/styles/notion.css b/styles/notion.css
@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
   /* color: var(--notion-gray); */
 }
 
-.notion-asset-wrapper-pdf > div {
+/* .notion-asset-wrapper-pdf > div {
   width: unset !important;
-}
+} */
 
 /* pdf预览适配页面 */
 .react-pdf__Page__canvas,

diff --git a/themes/commerce/components/Footer.js b/themes/commerce/components/Footer.js
@@ -167,7 +167,7 @@ const Footer = props => {
                       dangerouslySetInnerHTML={{
                         __html: siteConfig(
                           'COMMERCE_FOOTER_RIGHT_TEXT',
-                          null,
+                          '',
                           CONFIG
                         )
                       }}></div>