Merge pull request #84 from tangly1024/preview

Preview
2026-05-14 07:26:52 +00:00 · 2022-03-17 10:00:46 +08:00
parent c2075dde1c 005fb33a8f
commit 202cc91c8e
12 changed files with 158 additions and 61 deletions
--- a/lib/rss.js
+++ b/lib/rss.js
@@ -1,7 +1,31 @@
 import { Feed } from 'feed'
 import BLOG from '@/blog.config'
+import ReactDOMServer from 'react-dom/server'
+import { NotionRenderer, Equation, Code, Collection, CollectionRow } from 'react-notion-x'
+import { getPostBlocks } from './notion'

-export function generateRss (posts) {
+const mapPageUrl = id => 'https://www.notion.so/' + id.replace(/-/g, '')
+
+const createFeedContent = async post => {
+  const blockMap = await getPostBlocks(post.id, 'rss-content')
+  if (blockMap) {
+    const content = ReactDOMServer.renderToString(<NotionRenderer
+      recordMap={blockMap}
+      components={{
+        equation: Equation,
+        code: Code,
+        collection: Collection,
+        collectionRow: CollectionRow
+      }}
+      mapPageUrl={mapPageUrl}
+    />)
+    const regexExp = /<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
+    return content.replace(regexExp, '')
+  }
+  return post.summary
+}
+
+export async function generateRss (posts) {
  const year = new Date().getFullYear()
  const feed = new Feed({
    title: BLOG.TITLE,
@@ -17,14 +41,15 @@ export function generateRss (posts) {
      link: BLOG.LINK
    }
  })
-  posts.forEach(post => {
+  for (const post of posts) {
    feed.addItem({
      title: post.title,
      id: `${BLOG.LINK}/article/${post.slug}`,
      link: `${BLOG.LINK}/article/${post.slug}`,
      description: post.summary,
+      content: await createFeedContent(post),
      date: new Date(post?.date?.start_date || post.createdTime)
    })
-  })
-  return feed.rss2()
+  }
+  return feed.atom1()
 }
--- a/pages/feed.js
+++ b/pages/feed.js
@@ -4,7 +4,7 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 export async function getServerSideProps ({ res }) {
  res.setHeader('Content-Type', 'text/xml')
  const globalNotionData = await getGlobalNotionData({ from: 'rss' })
-  const xmlFeed = generateRss(globalNotionData?.allPosts?.slice(0, 10) || [])
+  const xmlFeed = await generateRss(globalNotionData?.allPosts?.slice(0, 10) || [])
  res.write(xmlFeed)
  res.end()
  return {
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -17,7 +17,7 @@ import FloatDarkModeButton from './components/FloatDarkModeButton'
 const LayoutBase = (props) => {
  const { children, headerSlot, floatSlot, meta } = props
  const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  // const [percent, changePercent] = useState(0) // 页面阅读百分比

  const scrollListener = () => {
    const targetRef = document.getElementById('wrapper')
@@ -31,7 +31,7 @@ const LayoutBase = (props) => {
    if (shouldShow !== show) {
      switchShow(shouldShow)
    }
-    changePercent(per)
+    // changePercent(per)
  }
  useEffect(() => {
    smoothscroll.polyfill()
@@ -55,11 +55,11 @@ const LayoutBase = (props) => {
    </main>

     {/* 右下角悬浮 */}
-     <div className='bottom-12 right-0 fixed justify-end z-20 font-sans'>
-        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp  justify-center duration-500  animate__faster flex flex-col items-center cursor-pointer '}>
+     <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-blue-400 rounded'>
+        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-500  animate__faster flex flex-col items-center cursor-pointer '}>
          <FloatDarkModeButton/>
          {floatSlot}
-          <JumpToTopButton percent={percent}/>
+          <JumpToTopButton/>
        </div>
      </div>

--- a/themes/hexo/LayoutSearch.js
+++ b/themes/hexo/LayoutSearch.js
@@ -1,34 +1,89 @@
-
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import SearchInput from './components/SearchInput'
-export const LayoutSearch = (props) => {
-  const { keyword } = props
+import { useGlobal } from '@/lib/global'
+import TagItemMini from './components/TagItemMini'
+import Card from './components/Card'
+import Link from 'next/link'
+
+export const LayoutSearch = props => {
+  const { keyword, tags, categories } = props
+  const { locale } = useGlobal()
  const router = useRouter()
  const currentSearch = keyword || router?.query?.s
  let handleTextColor = false
+  const cRef = useRef(null)

  useEffect(() => {
    setTimeout(() => {
+      // 自动聚焦到搜索框
+      cRef.current.focus()
      if (currentSearch && !handleTextColor) {
        const container = document.getElementById('container')
        if (container && container.innerHTML) {
          const re = new RegExp(`${currentSearch}`, 'gim')
-          container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+          container.innerHTML = container.innerHTML.replace(
+            re,
+            `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
+          )
          handleTextColor = true
        }
      }
-    },
-    100)
+    }, 100)
  })
-  return <LayoutBase {...props} currentSearch={currentSearch}>
-    <div className='m-3'>
-      <SearchInput {...props}/>
-    </div>
-    <div id='container'>
-      <BlogPostListPage {...props}/>
-    </div>
-  </LayoutBase>
+  return (
+    <LayoutBase {...props} currentSearch={currentSearch}>
+      <div className="my-6 px-2">
+        <SearchInput cRef={cRef} {...props} />
+        {/* 分类 */}
+        <Card className="w-full mt-4">
+          <div className="dark:text-gray-200 mb-5 mx-3">
+            <i className="mr-4 fas fa-th" />
+            {locale.COMMON.CATEGORY}:
+          </div>
+          <div id="category-list" className="duration-200 flex flex-wrap mx-8">
+            {categories.map(category => {
+              return (
+                <Link
+                  key={category.name}
+                  href={`/category/${category.name}`}
+                  passHref
+                >
+                  <div
+                    className={
+                      ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-400 hover:text-white'
+                    }
+                  >
+                    <i className="mr-4 fas fa-folder" />
+                    {category.name}({category.count})
+                  </div>
+                </Link>
+              )
+            })}
+          </div>
+        </Card>
+        {/* 标签 */}
+        <Card className="w-full mt-4">
+          <div className="dark:text-gray-200 mb-5 ml-4">
+            <i className="mr-4 fas fa-tag" />
+            {locale.COMMON.TAGS}:
+          </div>
+          <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+            {tags.map(tag => {
+              return (
+                <div key={tag.name} className="p-2">
+                  <TagItemMini key={tag.name} tag={tag} />
+                </div>
+              )
+            })}
+          </div>
+        </Card>
+      </div>
+      <div id="container">
+        <BlogPostListPage {...props} />
+      </div>
+    </LayoutBase>
+  )
 }
--- a/themes/hexo/LayoutTagIndex.js
+++ b/themes/hexo/LayoutTagIndex.js
@@ -22,7 +22,7 @@ export const LayoutTagIndex = props => {
        <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
          {tags.map(tag => {
            return (
-              <div key={tag.name} className="px-2">
+              <div key={tag.name} className="p-2">
                <TagItemMini key={tag.name} tag={tag} />
              </div>
            )
--- a/themes/hexo/components/FloatDarkModeButton.js
+++ b/themes/hexo/components/FloatDarkModeButton.js
@@ -21,7 +21,7 @@ export default function FloatDarkModeButton () {
  return (
    <div
      onClick={handleChangeDarkMode}
-      className={'justify-center items-center text-white bg-gray-400 w-7 h-7 text-center transform hover:scale-105 duration-200'
+      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
      }
    >
      <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
--- a/themes/hexo/components/JumpToCommentButton.js
+++ b/themes/hexo/components/JumpToCommentButton.js
@@ -17,7 +17,7 @@ const JumpToCommentButton = () => {
    }
  }

-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-7 text-center' onClick={navToComment} >
+  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
          <i className='fas fa-comment text-xs' />
    </div>)
 }
--- a/themes/hexo/components/JumpToTopButton.js
+++ b/themes/hexo/components/JumpToTopButton.js
@@ -15,7 +15,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
    return <></>
  }
  const { locale } = useGlobal()
-  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 text-white bg-gray-400 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
        <div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
        {showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
    </div>)
--- a/themes/hexo/components/PaginationNumber.js
+++ b/themes/hexo/components/PaginationNumber.js
@@ -37,7 +37,7 @@ const PaginationNumber = ({ page, totalPage }) => {
      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
        <div
          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-t-2 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-blue-300 dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
        >
          <i className='fas fa-angle-right'/>
        </div>
@@ -48,7 +48,7 @@ const PaginationNumber = ({ page, totalPage }) => {

 function getPageElement (page, currentPage) {
  return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-t-2 duration-500 border-white hover:border-blue-400 ') +
+      <a className={(page + '' === currentPage + '' ? 'font-bold bg-blue-400 dark:bg-blue-500 text-white ' : 'border-b duration-500 border-blue-300 hover:border-blue-400 ') +
      ' border-white dark:border-blue-700 dark:hover:border-blue-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
      {page}
      </a>
--- a/themes/hexo/components/SearchInput.js
+++ b/themes/hexo/components/SearchInput.js
@@ -1,12 +1,14 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 let lock = false

-const SearchInput = (props) => {
+const SearchInput = props => {
  const { currentSearch, cRef, className } = props
  const [onLoading, setLoadingState] = useState(false)
  const router = useRouter()
  const searchInputRef = useRef()
+  const { locale } = useGlobal()
  useImperativeHandle(cRef, () => {
    return {
      focus: () => {
@@ -21,14 +23,15 @@ const SearchInput = (props) => {
      setLoadingState(true)
      location.href = '/search/' + key
    } else {
-      router.push({ pathname: '/' }).then(r => {
-      })
+      router.push({ pathname: '/' }).then(r => {})
    }
  }
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 13) { // 回车
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
      handleSearch(searchInputRef.current.value)
-    } else if (e.keyCode === 27) { // ESC
+    } else if (e.keyCode === 27) {
+      // ESC
      cleanSearch()
    }
  }
@@ -37,7 +40,7 @@ const SearchInput = (props) => {
  }

  const [showClean, setShowClean] = useState(false)
-  const updateSearchKey = (val) => {
+  const updateSearchKey = val => {
    if (lock) {
      return
    }
@@ -57,30 +60,44 @@ const SearchInput = (props) => {
    lock = false
  }

-  return <div className={'flex w-full bg-gray-100 ' + className}>
-     <input
-      ref={searchInputRef}
-      type='text'
-      className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'}
-      onKeyUp={handleKeyUp}
-      onCompositionStart={lockSearchInput}
-      onCompositionUpdate={lockSearchInput}
-      onCompositionEnd={unLockSearchInput}
-      onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
-    />
+  return (
+    <div className={'flex w-full rounded-lg ' + className}>
+      <input
+        ref={searchInputRef}
+        type="text"
+        className={
+          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+        }
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        placeholder={locale.SEARCH.ARTICLES}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch || ''}
+      />

-     <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
-      onClick={handleSearch}>
-        <i className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-     </div>
-
-     {(showClean &&
-      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
-        <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
+      <div
+        className="-ml-8 cursor-pointer  float-right items-center justify-center py-2"
+        onClick={handleSearch}
+      >
+        <i
+          className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${
+            onLoading ? 'fa-spinner animate-spin' : 'fa-search'
+          }`}
+        />
      </div>
+
+      {showClean && (
+        <div className="-ml-12 cursor-pointer float-right items-center justify-center py-2">
+          <i
+            className="hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times"
+            onClick={cleanSearch}
+          />
+        </div>
      )}
-  </div>
+    </div>
+  )
 }

 export default SearchInput
--- a/themes/hexo/components/TocDrawerButton.js
+++ b/themes/hexo/components/TocDrawerButton.js
@@ -14,7 +14,7 @@ const TocDrawerButton = (props) => {
    return <></>
  }
  const { locale } = useGlobal()
-  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer text-white transform duration-200 flex justify-center items-center bg-gray-400 w-7 h-7 text-center' title={locale.POST.TOP} >
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
    <i className='fas fa-list-ol text-xs'/>
  </div>)
 }
--- a/themes/next/components/SearchDrawer.js
+++ b/themes/next/components/SearchDrawer.js
@@ -28,7 +28,7 @@ const SearchDrawer = ({ cRef, slot }) => {
      </div>

      {/* 背景蒙版 */}
-      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-40 w-full h-full' />
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-30 w-full h-full' />
    </div>
  )
 }