Merge branch 'main' into pr/lxw15337674/2176

Author: tangly1024

.eslintrc.js

@@ -4,22 +4,15 @@ module.exports = {
     es2021: true,
     node: true
   },
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@next/next/recommended',
-    'standard'
-  ],
+  extends: ['plugin:react/recommended', 'plugin:@next/next/recommended', 'standard', 'prettier'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true
     },
     ecmaVersion: 12,
     sourceType: 'module'
   },
-  plugins: [
-    'react',
-    'react-hooks'
-  ],
+  plugins: ['react', 'react-hooks', 'prettier'],
   settings: {
     react: {
       version: 'detect'

.prettierrc.json

@@ -1,6 +1,10 @@
 {
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none",
-  "arrowParens": "avoid"
-}
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid",
+    "printWidth": 120,
+    "bracketSpacing": true,
+    "jsxSingleQuote": true,
+    "jsxBracketSameLine": true
+}

components/AlgoliaSearchModal.js

@@ -1,4 +1,4 @@
-import { useState, useImperativeHandle, useRef, useEffect } from 'react'
+import { useState, useImperativeHandle, useRef, useEffect, Fragment } from 'react'
 import algoliasearch from 'algoliasearch'
 import replaceSearchResult from '@/components/Mark'
 import Link from 'next/link'
@@ -7,6 +7,22 @@ import throttle from 'lodash/throttle'
 import { siteConfig } from '@/lib/config'
 import { useHotkeys } from 'react-hotkeys-hook';
 
+const ShortCutActions = [
+  {
+    key: '↑ ↓',
+    action: '选择'
+  },
+  {
+    key: 'Enter',
+    action: '跳转'
+  },
+  {
+    key: 'Esc',
+    action: '关闭'
+  }
+
+]
+
 /**
  * 结合 Algolia 实现的弹出式搜索框
  * 打开方式 cRef.current.openSearch()
@@ -234,6 +250,15 @@ export default function AlgoliaSearchModal({ cRef }) {
         </ul>
         <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
         <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
+          {totalHit === 0 && (<div className='flex items-center'>
+            {
+              ShortCutActions.map((action, index) => {
+                return <Fragment key={index}><div className='border-gray-300 dark:text-gray-300 text-gray-600 px-2 rounded border inline-block'>{action.key}</div>
+                  <span className='ml-2 mr-4  text-gray-600 dark:text-gray-300'>{action.action}</span></Fragment>
+              })
+            }
+          </div>)
+          }
           <div>
             {totalHit > 0 && (
               <p>

components/WalineComponent.js

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react'
+import  { createRef, useEffect } from 'react'
 import { init } from '@waline/client'
 import { useRouter } from 'next/router'
 import '@waline/client/dist/waline.css'
@@ -21,7 +21,7 @@ const WalineComponent = (props) => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!waline) {
       waline = init({
         ...props,

lib/db/getSiteData.js

@@ -25,10 +25,7 @@ export { getPost } from '../notion/getNotionPost'
  * @returns
  *
  */
-export async function getGlobalData({
-  pageId = BLOG.NOTION_PAGE_ID,
-  from
-}) {
+export async function getGlobalData({ pageId = BLOG.NOTION_PAGE_ID, from }) {
   // 从notion获取
   const data = await getNotionPageData({ pageId, from })
   const db = deepClone(data)
@@ -89,7 +86,9 @@ function cleanBlock(post) {
  * @returns
  */
 function getLatestPosts({ allPages, from, latestPostCount }) {
-  const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
+  const allPosts = allPages?.filter(
+    page => page.type === 'Post' && page.status === 'Published'
+  )
 
   const latestPosts = Object.create(allPosts).sort((a, b) => {
     const dateA = new Date(a?.lastEditedDate || a?.publishDate)
@@ -140,7 +139,13 @@ function getCustomNav({ allPages }) {
           p.to = '/' + p.slug
         }
       }
-      customNav.push({ icon: p.icon || null, name: p.title, to: p.slug, target: '_blank', show: true })
+      customNav.push({
+        icon: p.icon || null,
+        name: p.title,
+        to: p.slug,
+        target: '_blank',
+        show: true
+      })
     })
   }
   return customNav
@@ -152,7 +157,12 @@ function getCustomNav({ allPages }) {
  * @returns
  */
 function getCustomMenu({ collectionData }) {
-  const menuPages = collectionData.filter(post => post.status === 'Published' && (post?.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post?.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu))
+  const menuPages = collectionData.filter(
+    post =>
+      post.status === 'Published' &&
+      (post?.type === BLOG.NOTION_PROPERTY_NAME.type_menu ||
+        post?.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu)
+  )
   const menus = []
   if (menuPages && menuPages.length > 0) {
     menuPages.forEach(e => {
@@ -190,7 +200,9 @@ function getCustomMenu({ collectionData }) {
  */
 function getTagOptions(schema) {
   if (!schema) return {}
-  const tagSchema = Object.values(schema).find(e => e.name === BLOG.NOTION_PROPERTY_NAME.tags)
+  const tagSchema = Object.values(schema).find(
+    e => e.name === BLOG.NOTION_PROPERTY_NAME.tags
+  )
   return tagSchema?.options || []
 }
 
@@ -201,7 +213,9 @@ function getTagOptions(schema) {
  */
 function getCategoryOptions(schema) {
   if (!schema) return {}
-  const categorySchema = Object.values(schema).find(e => e.name === BLOG.NOTION_PROPERTY_NAME.category)
+  const categorySchema = Object.values(schema).find(
+    e => e.name === BLOG.NOTION_PROPERTY_NAME.category
+  )
   return categorySchema?.options || []
 }
 
@@ -213,9 +227,15 @@ function getCategoryOptions(schema) {
  */
 function getSiteInfo({ collection, block }) {
   const title = collection?.name?.[0][0] || BLOG.TITLE
-  const description = collection?.description ? Object.assign(collection).description[0][0] : BLOG.DESCRIPTION
-  const pageCover = collection?.cover ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value) : BLOG.HOME_BANNER_IMAGE
-  let icon = collection?.icon ? mapImgUrl(collection?.icon, collection, 'collection') : BLOG.AVATAR
+  const description = collection?.description
+    ? Object.assign(collection).description[0][0]
+    : BLOG.DESCRIPTION
+  const pageCover = collection?.cover
+    ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value)
+    : BLOG.HOME_BANNER_IMAGE
+  let icon = collection?.icon
+    ? mapImgUrl(collection?.icon, collection, 'collection')
+    : BLOG.AVATAR
 
   // 用户头像压缩一下
   icon = compressImage(icon)
@@ -236,7 +256,13 @@ function getSiteInfo({ collection, block }) {
  */
 export function getNavPages({ allPages }) {
   const allNavPages = allPages?.filter(post => {
-    return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
+    return (
+      post &&
+      post?.slug &&
+      !post?.slug?.startsWith('http') &&
+      post?.type === 'Post' &&
+      post?.status === 'Published'
+    )
   })
 
   return allNavPages.map(item => ({
@@ -248,7 +274,8 @@ export function getNavPages({ allPages }) {
     summary: item.summary || null,
     slug: item.slug,
     pageIcon: item.pageIcon || '',
-    lastEditedDate: item.lastEditedDate
+    lastEditedDate: item.lastEditedDate,
+    publishDate: item.publishDate
   }))
 }
 
@@ -265,19 +292,26 @@ async function getNotice(post) {
 }
 
 // 没有数据时返回
-const EmptyData = (pageId) => {
+const EmptyData = pageId => {
   const empty = {
     notice: null,
     siteInfo: getSiteInfo({}),
-    allPages: [{
-      id: 1,
-      title: `无法获取Notion数据，请检查Notion_ID： \n 当前 ${pageId}`,
-      summary: '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next',
-      status: 'Published',
-      type: 'Post',
-      slug: '13a171332816461db29d50e9f575b00d',
-      date: { start_date: '2023-04-24', lastEditedDay: '2023-04-24', tagItems: [] }
-    }],
+    allPages: [
+      {
+        id: 1,
+        title: `无法获取Notion数据，请检查Notion_ID： \n 当前 ${pageId}`,
+        summary:
+          '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next',
+        status: 'Published',
+        type: 'Post',
+        slug: '13a171332816461db29d50e9f575b00d',
+        date: {
+          start_date: '2023-04-24',
+          lastEditedDay: '2023-04-24',
+          tagItems: []
+        }
+      }
+    ],
     allNavPages: [],
     collection: [],
     collectionQuery: {},
@@ -313,7 +347,8 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const rawMetadata = block[pageId]?.value
   // Check Type Page-Database和Inline-Database
   if (
-    rawMetadata?.type !== 'collection_view_page' && rawMetadata?.type !== 'collection_view'
+    rawMetadata?.type !== 'collection_view_page' &&
+    rawMetadata?.type !== 'collection_view'
   ) {
     console.error(`pageId "${pageId}" is not a database`)
     return EmptyData(pageId)
@@ -328,9 +363,21 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const viewIds = rawMetadata?.view_ids
   const collectionData = []
 
-  const pageIds = getAllPageIds(collectionQuery, collectionId, collectionView, viewIds)
+  const pageIds = getAllPageIds(
+    collectionQuery,
+    collectionId,
+    collectionView,
+    viewIds
+  )
   if (pageIds?.length === 0) {
-    console.error('获取到的文章列表为空，请检查notion模板', collectionQuery, collection, collectionView, viewIds, pageRecordMap)
+    console.error(
+      '获取到的文章列表为空，请检查notion模板',
+      collectionQuery,
+      collection,
+      collectionView,
+      viewIds,
+      pageRecordMap
+    )
   } else {
     // console.log('有效Page数量', pageIds?.length)
   }
@@ -343,15 +390,29 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
       // 如果找不到文章对应的block，说明发生了溢出，使用pageID再去请求
       const pageBlock = await getSingleBlock(id, from)
       if (pageBlock.block[id].value) {
-        const properties = (await getPageProperties(id, pageBlock.block[id].value, schema, null, getTagOptions(schema))) || null
+        const properties =
+          (await getPageProperties(
+            id,
+            pageBlock.block[id].value,
+            schema,
+            null,
+            getTagOptions(schema)
+          )) || null
         if (properties) {
           collectionData.push(properties)
         }
       }
       continue
     }
 
-    const properties = (await getPageProperties(id, value, schema, null, getTagOptions(schema))) || null
+    const properties =
+      (await getPageProperties(
+        id,
+        value,
+        schema,
+        null,
+        getTagOptions(schema)
+      )) || null
     if (properties) {
       collectionData.push(properties)
     }
@@ -365,13 +426,16 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     if (post?.type === 'Post' && post.status === 'Published') {
       postCount++
     }
-    return post && post?.slug &&
-      (!post?.slug?.startsWith('http')) &&
+    return (
+      post &&
+      post?.slug &&
+      !post?.slug?.startsWith('http') &&
       (post?.status === 'Invisible' || post?.status === 'Published')
+    )
   })
 
   // 站点配置优先读取配置表格，否则读取blog.config.js 文件
-  const NOTION_CONFIG = await getConfigMapFromConfigPage(collectionData) || {}
+  const NOTION_CONFIG = (await getConfigMapFromConfigPage(collectionData)) || {}
 
   // Sort by date
   if (BLOG.POSTS_SORT_BY === 'date') {
@@ -380,13 +444,27 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     })
   }
 
-  const notice = await getNotice(collectionData.filter(post => {
-    return post && post?.type && post?.type === 'Notice' && post.status === 'Published'
-  })?.[0])
-  const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema) })
+  const notice = await getNotice(
+    collectionData.filter(post => {
+      return (
+        post &&
+        post?.type &&
+        post?.type === 'Notice' &&
+        post.status === 'Published'
+      )
+    })?.[0]
+  )
+  const categoryOptions = getAllCategories({
+    allPages,
+    categoryOptions: getCategoryOptions(schema)
+  })
   const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
   // 旧的菜单
-  const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
+  const customNav = getCustomNav({
+    allPages: collectionData.filter(
+      post => post?.type === 'Page' && post.status === 'Published'
+    )
+  })
   // 新的菜单
   const customMenu = await getCustomMenu({ collectionData })
   const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })

lib/global.js

@@ -16,7 +16,8 @@ export function GlobalContextProvider(props) {
   const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
   const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
-  const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark') // 默认深色模式
+  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE  || APPEARANCE 
+  const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const router = useRouter()
 
@@ -57,7 +58,7 @@ export function GlobalContextProvider(props) {
   }
 
   useEffect(() => {
-    initDarkMode(updateDarkMode)
+    initDarkMode(updateDarkMode,defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
   }, [])