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

.env.example

@@ -173,3 +173,4 @@
 # ENABLE_CACHE=
 # VERCEL_ENV=
 # NEXT_PUBLIC_VERSION=
+# NEXT_BUILD_STANDALONE=

Dockerfile

@@ -1,23 +1,42 @@
 ARG NOTION_PAGE_ID
 ARG NEXT_PUBLIC_THEME
 
-# Install dependencies only when needed
-FROM node:18-alpine3.18 AS deps
+FROM node:18-alpine3.18 AS base
+
+# 1. Install dependencies only when needed
+FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json ./
 RUN yarn install --frozen-lockfile
 
-# Rebuild the source code only when needed
-FROM node:18-alpine3.18 AS builder
+# 2. Rebuild the source code only when needed
+FROM base AS builder
 ARG NOTION_PAGE_ID
+ENV NEXT_BUILD_STANDALONE=true
+
 WORKDIR /app
+
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN yarn build
 
-ENV NODE_ENV production
+# 3. Production image, copy all the files and run next
+FROM base AS runner
+ENV NODE_ENV=production
+
+WORKDIR /app
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+# 个人仓库把将配置好的.env.local文件放到项目根目录，可自动使用环境变量
+# COPY --from=builder /app/.env.local ./
 
 EXPOSE 3000
 
@@ -26,4 +45,4 @@ EXPOSE 3000
 # Uncomment the following line in case you want to disable telemetry.
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["yarn", "start"]
+CMD ["node", "server.js"]

components/ExternalPlugins.js

@@ -8,6 +8,7 @@ import { GlobalStyle } from './GlobalStyle'
 import { initGoogleAdsense } from './GoogleAdsense'
 
 import Head from 'next/head'
+import ExternalScript from './ExternalScript'
 import WebWhiz from './Webwhiz'
 
 /**
@@ -258,10 +259,10 @@ const ExternalPlugin = props => {
             {/* 提前连接到广告服务器 */}
             <link rel='preconnect' href='https://cdn.wwads.cn' />
           </Head>
-          <script
+          <ExternalScript
             type='text/javascript'
             src='https://cdn.wwads.cn/js/makemoney.js'
-            async></script>
+          />
         </>
       )}
 

components/ExternalScript.js

@@ -7,7 +7,7 @@ import { isBrowser } from '@/lib/utils'
  * 传入参数将转为 <script>标签。
  * @returns
  */
-const ExternalScript = (props) => {
+const ExternalScript = props => {
   const { src } = props
   if (!isBrowser || !src) {
     return null
@@ -22,7 +22,7 @@ const ExternalScript = (props) => {
     script.setAttribute(key, value)
   })
   document.head.appendChild(script)
-  console.log('加载外部脚本', props, script)
+  // console.log('加载外部脚本', props, script)
   return null
 }
 

components/LazyImage.js

@@ -57,32 +57,35 @@ export default function LazyImage({
       } else {
         imageRef.current.src = defaultPlaceholderSrc
       }
-      imageRef.current.classList.remove('lazy-image-placeholder')
+      // 移除占位符类名
+      if (imageRef.current) {
+        imageRef.current.classList.remove('lazy-image-placeholder')
+      }
     }
   }
 
   useEffect(() => {
     const adjustedImageSrc =
       adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
-    // 加载原图
-    const img = new Image()
-    img.src = adjustedImageSrc
-    img.onload = () => {
-      setCurrentSrc(adjustedImageSrc)
-      handleImageLoaded(adjustedImageSrc)
-    }
-    img.onerror = handleImageError
+
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
-            const lazyImage = entry.target
-            lazyImage.src = adjustedImageSrc
-            observer.unobserve(lazyImage)
+            // 拉取图片
+            const img = new Image()
+            img.src = adjustedImageSrc
+            img.onload = () => {
+              setCurrentSrc(adjustedImageSrc)
+              handleImageLoaded(adjustedImageSrc)
+            }
+            img.onerror = handleImageError
+
+            observer.unobserve(entry.target)
           }
         })
       },
-      { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
+      { rootMargin: '50px 0px' } // 轻微提前加载
     )
     if (imageRef.current) {
       observer.observe(imageRef.current)
@@ -98,36 +101,19 @@ export default function LazyImage({
   const imgProps = {
     ref: imageRef,
     src: currentSrc,
-    'data-src': src,
-    alt: alt,
-    onLoad: handleThumbnailLoaded, // 缩略图加载完成
-    onError: handleImageError // 添加onError处理函数
-  }
-
-  if (id) {
-    imgProps.id = id
+    'data-src': src, // 存储原始图片地址
+    alt: alt || 'Lazy loaded image',
+    onLoad: handleThumbnailLoaded,
+    onError: handleImageError,
+    className: `${className || ''} lazy-image-placeholder`,
+    style,
+    width: width || 'auto',
+    height: height || 'auto',
+    onClick
   }
 
-  if (title) {
-    imgProps.title = title
-  }
-
-  if (width && width !== 'auto') {
-    imgProps.width = width
-  }
-
-  if (height && height !== 'auto') {
-    imgProps.height = height
-  }
-  if (className) {
-    imgProps.className = className + ' lazy-image-placeholder'
-  }
-  if (style) {
-    imgProps.style = style
-  }
-  if (onClick) {
-    imgProps.onClick = onClick
-  }
+  if (id) imgProps.id = id
+  if (title) imgProps.title = title
 
   if (!src) {
     return null

components/LoadingCover.js

@@ -14,8 +14,7 @@ export default function LoadingCover() {
     if (onLoading) {
       setIsVisible(true)
     } else {
-      const timeout = setTimeout(() => setIsVisible(false), 1800) // 等待淡出动画结束
-      return () => clearTimeout(timeout)
+      setIsVisible(false)
     }
   }, [onLoading])
 

components/NotionPage.js

@@ -149,9 +149,11 @@ const processGalleryImg = zoom => {
 const autoScrollToHash = () => {
   setTimeout(() => {
     // 跳转到指定标题
-    const needToJumpToTitle = window.location.hash
+    const hash = window?.location?.hash
+    const needToJumpToTitle = hash && hash > 0
     if (needToJumpToTitle) {
-      const tocNode = document.getElementById(window.location.hash.substring(1))
+      console.log('jump to hash', hash)
+      const tocNode = document.getElementById(hash.substring(1))
       if (tocNode && tocNode?.className?.indexOf('notion') > -1) {
         tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' })
       }

components/PoweredBy.js

@@ -7,7 +7,7 @@ import { siteConfig } from '@/lib/config'
 export default function PoweredBy(props) {
   return (
     <div
-      className={`gap-x-1 flex flex-wrap text-sm font-serif ${props.className}`}>
+      className={`gap-x-1 flex flex-wrap text-sm font-serif ${props.className || ''}`}>
       <span>Powered by</span>
       <a
         href='https://github.com/tangly1024/NotionNext'

components/SEO.js

@@ -18,6 +18,32 @@ const SEO = props => {
   let image
   const router = useRouter()
   const meta = getSEOMeta(props, router, useGlobal()?.locale)
+  const webFontUrl = siteConfig('FONT_URL')
+
+  useEffect(() => {
+    // 使用WebFontLoader字体加载
+    loadExternalResource(
+      'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
+      'js'
+    ).then(url => {
+      const WebFont = window?.WebFont
+      if (WebFont) {
+        // console.log('LoadWebFont', webFontUrl)
+        WebFont.load({
+          custom: {
+            // families: ['"LXGW WenKai"'],
+            urls: webFontUrl
+          }
+        })
+      }
+    })
+  }, [])
+
+  // SEO关键词
+  let keywords = meta?.tags || siteConfig('KEYWORDS')
+  if (post?.tags && post?.tags?.length > 0) {
+    keywords = post?.tags?.join(',')
+  }
   if (meta) {
     url = `${url}/${meta.slug}`
     image = meta.image || '/bg_image.jpg'
@@ -28,7 +54,6 @@ const SEO = props => {
   const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
   const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
   const favicon = siteConfig('BLOG_FAVICON')
-  const webFontUrl = siteConfig('FONT_URL')
   const BACKGROUND_DARK = siteConfig('BACKGROUND_DARK', '', NOTION_CONFIG)
 
   const SEO_BAIDU_SITE_VERIFICATION = siteConfig(
@@ -68,30 +93,6 @@ const SEO = props => {
   )
 
   const FACEBOOK_PAGE = siteConfig('FACEBOOK_PAGE', null, NOTION_CONFIG)
-  // SEO关键词
-  let keywords = meta?.tags || siteConfig('KEYWORDS')
-  if (post?.tags && post?.tags?.length > 0) {
-    keywords = post?.tags?.join(',')
-  }
-
-  useEffect(() => {
-    // 使用WebFontLoader字体加载
-    loadExternalResource(
-      'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
-      'js'
-    ).then(url => {
-      const WebFont = window?.WebFont
-      if (WebFont) {
-        console.log('LoadWebFont', webFontUrl)
-        WebFont.load({
-          custom: {
-            // families: ['"LXGW WenKai"'],
-            urls: webFontUrl
-          }
-        })
-      }
-    })
-  }, [])
 
   return (
     <Head>

components/WWAds.js

@@ -6,14 +6,23 @@ import { siteConfig } from '@/lib/config'
  * @param {boolean} sticky - 是否粘性定位
  * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
  */
-export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
+export default function WWAds({
+  orientation = 'vertical',
+  sticky = false,
+  className
+}) {
   const AD_WWADS_ID = siteConfig('AD_WWADS_ID')
 
   if (!AD_WWADS_ID) {
     return null
   }
 
-  return <div data-id={AD_WWADS_ID} className={`wwads-cn 
+  return (
+    <div
+      data-id={AD_WWADS_ID}
+      className={`wwads-cn 
             ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'}
-            ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`} />
+            ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`}
+    />
+  )
 }

lib/utils/index.js

@@ -169,11 +169,11 @@ export function loadExternalResource(url, type = 'js') {
     }
     if (tag) {
       tag.onload = () => {
-        console.log('Load Success', url)
+        // console.log('Load Success', url)
         resolve(url)
       }
       tag.onerror = () => {
-        console.log('Load Error', url)
+        console.warn('Load Error', url)
         reject(url)
       }
       document.head.appendChild(tag)
@@ -204,6 +204,9 @@ export function getQueryVariable(key) {
  * @returns {string|null}
  */
 export function getQueryParam(url, param) {
+  if (!url) {
+    return ''
+  }
   // 移除哈希部分
   const urlWithoutHash = url.split('#')[0]
   const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1])

next.config.js

@@ -84,7 +84,7 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  output: process.env.EXPORT ? 'export' : undefined,
+  output: process.env.EXPORT ? 'export' : process.env.NEXT_BUILD_STANDALONE === 'true' ? 'standalone' : undefined,
   staticPageGenerationTimeout: 120,
   // 多语言， 在export时禁用
   i18n: process.env.EXPORT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.7.10",
+  "version": "4.7.11",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

pages/404.js

@@ -2,17 +2,15 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 404
  * @param {*} props
  * @returns
  */
 const NoFound = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='Layout404' {...props} />
 }
 
 export async function getStaticProps(req) {

pages/[prefix]/index.js

@@ -87,7 +87,7 @@ const Slug = props => {
   return (
     <>
       {/* 文章布局 */}
-      <DynamicLayout theme={theme} router={router} {...props} />
+      <DynamicLayout theme={theme} layoutName='LayoutSlug' {...props} />
       {/* 解锁密码提示框 */}
       {post?.password && post?.password !== '' && !lock && <Notification />}
       {/* 导流工具 */}