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

wensley · May 1, 2024 · d5cad71 · d5cad71
2 parents 26a535c + 6c03068
commit d5cad71
Show file tree

Hide file tree

Showing 12 changed files with 583 additions and 411 deletions.
diff --git a/lib/lang.js b/lib/lang.js
@@ -69,13 +69,22 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(lang, locale, changeLang, changeLocale) {
   if (isBrowser) {
-    // 用户请求的预研
-    const queryLang =
+    // 用户请求的语言
+    let queryLang =
       getQueryVariable('locale') ||
       getQueryVariable('lang') ||
       loadLangFromLocalStorage()
+
+    if (queryLang) {
+      // 用正则表达式匹配有效的语言标识符例如zh-CN（可选的 -CN 部分）
+      queryLang = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/)
+      if (queryLang) {
+        queryLang = queryLang[0]
+      }
+    }
+
     let currentLang = lang
-    if (queryLang && queryLang !== 'undefined' && queryLang !== lang) {
+    if (queryLang && queryLang !== lang) {
       currentLang = queryLang
     }
 

diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js
@@ -24,13 +24,15 @@ const mapImgUrl = (img, block, type = 'block', needCompress = true) => {
   }
 
   // Notion 图床转换为永久地址
-  const hasConverted = ret.indexOf('https://www.notion.so/image') === 0
+  const hasConverted =
+    ret.indexOf('https://www.notion.so/image') === 0 ||
+    ret.includes('notion.site/images/page-cover/')
   // 需要转化的URL ; 识别aws图床地址，或者bookmark类型的外链图片
   const needConvert =
     !hasConverted &&
-    (ret.indexOf('secure.notion-static.com') > 0 ||
-      ret.indexOf('prod-files-secure') > 0 ||
-      block.type === 'bookmark')
+    (block.type === 'bookmark' ||
+      ret.includes('secure.notion-static.com') ||
+      ret.includes('prod-files-secure'))
 
   // 使用Notion图传
   if (needConvert) {

diff --git a/pages/[prefix]/[slug]/index.js b/pages/[prefix]/[slug]/index.js
@@ -26,6 +26,7 @@ export async function getStaticPaths() {
 
   const from = 'slug-paths'
   const { allPages } = await getGlobalData({ from })
+  // 根据slug中的 / 分割成prefix和slug两个字段 ; 例如 article/test
   const paths = allPages
     ?.filter(row => checkSlug(row))
     .map(row => ({

diff --git a/themes/commerce/index.js b/themes/commerce/index.js
@@ -1,32 +1,32 @@
 import CONFIG from './config'
 
-import { useEffect, useRef } from 'react'
-import Footer from './components/Footer'
+import LazyImage from '@/components/LazyImage'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser, scanAndConvertToLinks } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useRef } from 'react'
+import { ArticleLock } from './components/ArticleLock'
+import BlogPostArchive from './components/BlogPostArchive'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import Hero from './components/Hero'
-import { useRouter } from 'next/router'
 import Card from './components/Card'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import Hero from './components/Hero'
+import PostHeader from './components/PostHeader'
+import ProductCategories from './components/ProductCategories'
+import ProductCenter from './components/ProductCenter'
 import RightFloatArea from './components/RightFloatArea'
 import SearchNav from './components/SearchNav'
-import BlogPostArchive from './components/BlogPostArchive'
-import { ArticleLock } from './components/ArticleLock'
-import PostHeader from './components/PostHeader'
-import TocDrawer from './components/TocDrawer'
-import NotionPage from '@/components/NotionPage'
-import TagItemMini from './components/TagItemMini'
-import Link from 'next/link'
 import SlotBar from './components/SlotBar'
-import { Transition } from '@headlessui/react'
+import TagItemMini from './components/TagItemMini'
+import TocDrawer from './components/TocDrawer'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import Header from './components/Header'
-import ProductCenter from './components/ProductCenter'
-import LazyImage from '@/components/LazyImage'
-import ProductCategories from './components/ProductCategories'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -35,17 +35,19 @@ import ProductCategories from './components/ProductCategories'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, post, floatSlot, slotTop, slotRight, meta, className } =
-    props
+  const { children, post, floatSlot, slotTop, className } = props
   const { onLoading } = useGlobal()
-
+  const router = useRouter()
   // 查找页面上的 链接，并便成为可点击
   useEffect(() => {
     scanAndConvertToLinks(document.getElementById('theme-commerce'))
-  })
+  }, [router])
+
+  const slotRight = router.route !== '/' && !post && (
+    <ProductCategories {...props} />
+  )
 
   let headerSlot = null
-  const router = useRouter()
   if (router.route === '/' && !post) {
     headerSlot = JSON.parse(siteConfig('COMMERCE_HOME_BANNER_ENABLE', true)) ? (
       <Hero {...props} />
@@ -146,18 +148,15 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const slotRight = <ProductCategories {...props} />
   return (
-    <LayoutBase {...props} slotRight={slotRight}>
-      <div className='bg-white border-[#D2232A] p-4'>
-        <SlotBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page' ? (
-          <BlogPostListPage {...props} />
-        ) : (
-          <BlogPostListScroll {...props} />
-        )}
-      </div>
-    </LayoutBase>
+    <div className='bg-white border-[#D2232A] p-4'>
+      <SlotBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </div>
   )
 }
 
@@ -241,7 +240,6 @@ const LayoutSlug = props => {
   const headerImage = post?.pageCover
     ? post.pageCover
     : siteConfig('HOME_BANNER_IMAGE')
-  const floatSlot = <></>
 
   return (
     <>
@@ -395,14 +393,14 @@ const LayoutTagIndex = props => {
 }
 
 export {
-  CONFIG as THEME_CONFIG,
+  Layout404,
+  LayoutArchive,
   LayoutBase,
+  LayoutCategoryIndex,
   LayoutIndex,
+  LayoutPostList,
   LayoutSearch,
-  LayoutArchive,
   LayoutSlug,
-  Layout404,
-  LayoutCategoryIndex,
-  LayoutPostList,
-  LayoutTagIndex
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
diff --git a/themes/gitbook/components/ArticleLock.js b/themes/gitbook/components/ArticleLock.js
@@ -11,6 +11,7 @@ import { useEffect, useRef } from 'react'
 export const ArticleLock = props => {
   const { validPassword } = props
   const { locale } = useGlobal()
+  console.log('locale', locale)
 
   const submitPassword = () => {
     const p = document.getElementById('password')
@@ -29,25 +30,33 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 '>
-    <div className='text-center space-y-3'>
-      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
-      <div className='flex mx-4'>
-        <input id="password" type='password'
-            onKeyDown={(e) => {
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
               if (e.key === 'Enter') {
                 submitPassword()
               }
             }}
             ref={passwordInputRef} // 绑定ref到passwordInputRef变量
-            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'>
-        </input>
-        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
-          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
         </div>
-      </div>
-      <div id='tips'>
+        <div id='tips'></div>
       </div>
     </div>
-  </div>
+  )
 }
diff --git a/themes/gitbook/components/BlogPostCard.js b/themes/gitbook/components/BlogPostCard.js
@@ -1,25 +1,36 @@
+import Badge from '@/components/Badge'
+import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
-import NotionIcon from '@/components/NotionIcon'
-import Badge from '@/components/Badge'
 import CONFIG from '../config'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
   const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
-  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+  const url = checkContainHttp(post.slug)
+    ? sliceUrlFromHttp(post.slug)
+    : `${siteConfig('SUB_PATH', '')}/${post.slug}`
   return (
-        <Link href={url} passHref>
-            <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
-                <div className="w-full select-none">
-                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />} {post.title}
-                </div>
-                {/* 最新文章加个红点 */}
-                {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}
-            </div>
-        </Link>
+    <Link href={url} passHref>
+      <div
+        key={post.id}
+        className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
+                    ${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
+        <div className='w-full select-none'>
+          {siteConfig('POST_TITLE_ICON') && (
+            <NotionIcon icon={post?.pageIcon} />
+          )}{' '}
+          {post.title}
+        </div>
+        {/* 最新文章加个红点 */}
+        {post?.isLatest &&
+          siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
+            <Badge />
+          )}
+      </div>
+    </Link>
   )
 }