Merge pull request #84 from tangly1024/preview

Preview

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()
 }

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 {

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='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 '}>
+        <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>
 

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) => {
+import { useGlobal } from '@/lib/global'
-  const { keyword } = props
+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}>
+  return (
-    <div className='m-3'>
+    <LayoutBase {...props} currentSearch={currentSearch}>
-      <SearchInput {...props}/>
+      <div className="my-6 px-2">
-    </div>
+        <SearchInput cRef={cRef} {...props} />
-    <div id='container'>
+        {/* 分类 */}
-      <BlogPostListPage {...props}/>
+        <Card className="w-full mt-4">
-    </div>
+          <div className="dark:text-gray-200 mb-5 mx-3">
-  </LayoutBase>
+            <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>
+  )
 }

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>
             )

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`}/>

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>)
 }

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>)

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>

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) => {
+  const handleKeyUp = e => {
-    if (e.keyCode === 13) { // 回车
+    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}>
+  return (
-     <input
+    <div className={'flex w-full rounded-lg ' + className}>
-      ref={searchInputRef}
+      <input
-      type='text'
+        ref={searchInputRef}
-      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'}
+        type="text"
-      onKeyUp={handleKeyUp}
+        className={
-      onCompositionStart={lockSearchInput}
+          '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'
-      onCompositionUpdate={lockSearchInput}
+        }
-      onCompositionEnd={unLockSearchInput}
+        onKeyUp={handleKeyUp}
-      onChange={e => updateSearchKey(e.target.value)}
+        onCompositionStart={lockSearchInput}
-      defaultValue={currentSearch}
+        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'
+      <div
-      onClick={handleSearch}>
+        className="-ml-8 cursor-pointer  float-right items-center justify-center py-2"
-        <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'}`} />
+        onClick={handleSearch}
-     </div>
+      >
-
+        <i
-     {(showClean &&
+          className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${
-      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+            onLoading ? 'fa-spinner animate-spin' : 'fa-search'
-        <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
+          }`}
+        />
       </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

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>)
 }

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>
   )
 }