标签排序

奖赏按钮
搜索框按钮加载动画
EndSlogan排版
notion-viewport处理

components/BlogPostCard.js

@@ -21,9 +21,9 @@ const BlogPostCard = ({ post }) => {
             <Link href={`/category/${post.category}`}>
               <div className='cursor-pointer dark:text-gray-200 font-bold text-sm py-1.5 mr-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
             </Link>
-            {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
             <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
           </div>
+          <div className='flex'> {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}</div>
           <p className='mt-2 text-gray-500 dark:text-gray-300 text-sm'>{post.summary}</p>
         </div>
     </div>

components/RewardButton.js

@@ -1,51 +1,30 @@
 import React from 'react'
-import { createPopper } from '@popperjs/core'
 
 /**
  * 赞赏按钮
  * @returns {JSX.Element}
  * @constructor
  */
-const RewardButton = () => {
+const   RewardButton = () => {
   const [popoverShow, setPopoverShow] = React.useState(false)
   const btnRef = React.createRef()
-  const popoverRef = React.createRef()
 
   const openPopover = () => {
-    createPopper(btnRef.current, popoverRef.current, {
-      placement: 'top'
-    })
     setPopoverShow(true)
   }
   const closePopover = () => {
     setPopoverShow(false)
   }
   return (
-    <div
-      onMouseEnter={() => {
-        openPopover()
-      }}
-      onMouseLeave={() => {
-        closePopover()
-      }}>
-      <div className='animate__jello animate__animated animate__faster'>
-        <div
-          ref={btnRef}
-          className='bg-red-500 text-white hover:bg-green-400 hover:shadow-2xl duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
-            <span className='fa fa-qrcode mr-2' />
-            <span>打赏</span>
-        </div>
+    <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='py-5'>
+      <div className='bg-red-500 w-20 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
+          <span className='fa fa-qrcode mr-2' />
+          <span>打赏</span>
       </div>
 
-      <div
-        className={
-          (popoverShow ? 'animate__animated animate__fadeIn ' : ' hidden ') +
-          ' animate__faster transform block z-50 font-normal'
-        }
-        ref={popoverRef}
-      >
+      <div className={ `${(popoverShow ? ' block ' : ' hidden ')} transform block z-50 font-normal`}>
         <div
-          className='flex space-x-10 animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
+          className='flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
          <div>
             <img className='md:w-72 m-auto' src='/reward_code_alipay.png' />
           </div>

components/SearchInput.js

@@ -5,11 +5,14 @@ import { useRef, useState } from 'react'
 const SearchInput = ({ currentTag, currentSearch }) => {
   const { locale } = useGlobal()
   const [searchKey, setSearchKey] = useState(currentSearch)
+  const [onLoading,setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
   const handleSearch = (key) => {
     if (key && key !== '') {
+      setLoadingState(true)
       router.push({ pathname: '/search', query: { s: key } }).then(r => {
+        setLoadingState(false)
       })
     } else {
       router.push({ pathname: '/' }).then(r => {
@@ -43,11 +46,11 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
-    { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-3 cursor-pointer' onClick={ cleanSearch } />)}
+    { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-4 cursor-pointer' onClick={ cleanSearch } />)}
 
     <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
-      <i className='fa fa-search text-black cursor-pointer' />
+      <i className={`fa ${onLoading ? 'fa-spinner animate-spin':'fa-search'} text-black cursor-pointer`}/>
     </div>
   </div>
 }

components/TagItemMini.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 
-const TagItemMini = ({ tag, selected = false, count }) => (
-  <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
+const TagItemMini = ({ tag, selected = false, count }) => {
+  return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
     <div className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 
       mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300 dark:hover:bg-gray-500
        ${selected
@@ -10,6 +10,6 @@ const TagItemMini = ({ tag, selected = false, count }) => (
     <div> <i className='fa fa-tag mr-1 py-0.5'/>{tag + (count ? `(${count})` : '')} </div>
     </div>
   </Link>
-)
+}
 
 export default TagItemMini

components/TagList.js

@@ -10,13 +10,13 @@ import TagItemMini from '@/components/TagItemMini'
 const TagList = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-list' className='duration-500 dark:border-gray-600  dark:bg-gray-800 w-66'>
-        {Object.keys(tags).map(tag => {
-          const selected = tag === currentTag
-          return (
-            <TagItemMini key={tag} tag={tag} selected={selected} count={tags[tag]}/>
-          )
-        })}
+    <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
+      {
+          tags.map(tag=>{
+            const selected = tag.name === currentTag
+            return  <TagItemMini key={tag.name} tag={tag.name} selected={selected} count={tag.count}/>
+          })
+      }
     </div>
   )
 }

components/TagsBar.js

@@ -18,17 +18,17 @@ const TagsBar = ({ tags, currentTag }) => {
       </div>
       <ul id='tag-container' className='flex py-1 space-x-3'>
         <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
-        {Object.keys(tags).map(key => {
-          const selected = key === currentTag
+        {tags.map(tag => {
+          const selected = tag.name === currentTag
           return (
-            <Link key={key} href={selected ? '/' : `/tag/${encodeURIComponent(key)}`}>
+            <Link key={tag.name} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
               <li
                 className={`cursor-pointer border hover:bg-gray-300 rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
                  dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-100 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
                 }`}
               >
                 <a>
-                  {`${key} (${tags[key]})`}
+                  {`${tag.name} (${tag.count})`}
                 </a>
               </li>
             </Link>

lib/notion/getAllTags.js

@@ -1,3 +1,5 @@
+import { rest } from "lodash"
+
 /**
  * 获取所有文章的标签
  * @param allPosts
@@ -10,6 +12,8 @@ export async function getAllTags (allPosts) {
 
   let tags = allPosts.map(p => p.tags)
   tags = [...tags.flat()]
+
+  // 标签计数
   const tagObj = {}
   tags.forEach(tag => {
     if (tag in tagObj) {
@@ -18,5 +22,9 @@ export async function getAllTags (allPosts) {
       tagObj[tag] = 1
     }
   })
-  return tagObj
+
+  // 按照标签数量排序
+  const list = Object.keys(tagObj).map((index) => {return {name:index,count:tagObj[index]}})
+  list.sort((a, b) => b.count - a.count)
+  return list
 }

pages/article/[slug].js

@@ -111,12 +111,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
 
         <RecommendPosts currentPost={post} totalPosts={posts}/>
 
-        <div id='end-slogan' className='flex justify-between text-2xl justify-center my-12 dark:text-gray-200'>
+        <div id='end-slogan' className='flex justify-between justify-center my-12 dark:text-gray-200'>
           <div>———</div>
           <div>💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖</div>
           <div>———</div>
         </div>
-        <div className='flex opacity-50 justify-center pb-1 dark:text-gray-200'>
+        <div className='flex opacity-50 justify-center dark:text-gray-200'>
           打赏一杯咖啡~
         </div>
         <div className='flex justify-center pb-5'>
@@ -133,7 +133,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           </ul>
         </section>
 
-        <section className='flex justify-between'>
+        <section className='md:flex md:justify-between'>
 
           {post.tags && (
             <div className='flex flex-nowrap leading-8 p-1 py-4'>

styles/notion.css

@@ -180,13 +180,14 @@
   min-height: 100vh;
 }
 
-.notion-viewport {
+/* .notion-viewport {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-}
+  z-index: -10;
+} */
 
 .medium-zoom-overlay {
   z-index: 300;
@@ -1613,9 +1614,6 @@ pre[class*='language-'] {
 .notion-bookmark:hover {
   @apply border-blue-400;
 }
-.notion-viewport {
-  z-index: -10;
-}
 .notion-asset-caption {
   @apply text-center;
 }