gitbook

themes/gitbook/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+//   const { locale } = useGlobal()
+  if (notice?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {notice && (<div id="announcement-content">
+            <NotionPage post={notice} />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/gitbook/components/ArticleInfo.js

@@ -0,0 +1,9 @@
+export default function ArticleInfo({ post }) {
+  if (!post) {
+    return null
+  }
+  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
+        <i className="fa-regular fa-clock mr-1" />
+        Last update:  { post.date?.start_date}
+    </div>
+}

themes/gitbook/components/BlogPostCard.js

@@ -1,80 +1,27 @@
 import BLOG from '@/blog.config'
-import NotionPage from '@/components/NotionPage'
-import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import React from 'react'
-import CONFIG_MEDIUM from '../config_medium'
-import CategoryItem from './CategoryItem'
-import TagItemMini from './TagItemMini'
-import TwikooCommentCount from '@/components/TwikooCommentCount'
 
 const BlogPostCard = ({ post, showSummary }) => {
-  const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
-  const { locale } = useGlobal()
   return (
         <div
             key={post.id}
-            data-aos="fade-up"
-            data-aos-duration="300"
-            data-aos-once="false"
-            data-aos-anchor-placement="top-bottom"
-            className="mb-6 max-w-7xl border-b dark:border-gray-800 "
+            className="mb-6"
         >
 
-            <div className="lg:py-8 py-4 flex flex-col w-full">
+            <div className="flex flex-col w-full">
                 <Link
                     href={`${BLOG.SUB_PATH}/${post.slug}`}
                     passHref
                     className={
-                        'cursor-pointer font-bold  hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
+                        'cursor-pointer font-bold  hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
                     }>
                     <div>
-                        {CONFIG_MEDIUM.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
-                        </div>}
-                        {post.title}
+                        {post.category} -   {post.title}
                     </div>
 
                 </Link>
 
-                <div
-                    className={
-                        'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
-                    }
-                >
-                    <div className="text-sm py-1">{post.date?.start_date}</div>
-                    {CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
-                    {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                    <TwikooCommentCount post={post} className='hover:underline'/>
-                </div>
-
-                <div className="flex"></div>
-
-                {(!showPreview || showSummary) && (
-                    <p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                        {post.summary}
-                    </p>
-                )}
-
-                {showPreview && (
-                    <div className="overflow-ellipsis truncate">
-                        <NotionPage post={post} />
-                        <div className="pointer-events-none border-t pt-8 border-dashed">
-                            <div className="w-full justify-start flex">
-                                <Link
-                                    href={`${BLOG.SUB_PATH}/${post.slug}`}
-                                    passHref
-                                    className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
-
-                                    {locale.COMMON.ARTICLE_DETAIL}
-                                    <i className="ml-1 fas fa-angle-right" />
-
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                )}
             </div>
         </div>
   )

themes/gitbook/components/BlogPostListScroll.js

@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
-import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
@@ -17,7 +16,8 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   const postsPerPage = BLOG.POSTS_PER_PAGE
   const [page, updatePage] = useState(1)
   let filteredPosts = Object.assign(posts)
-  const searchKey = getSearchKey()
+  const router = useRouter()
+  const searchKey = getSearchKey(router)
   if (searchKey) {
     filteredPosts = posts.filter(post => {
       const tagContent = post.tags ? post.tags.join(' ') : ''
@@ -56,7 +56,6 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   })
 
   const targetRef = useRef(null)
-  const { locale } = useGlobal()
 
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
@@ -70,13 +69,6 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
         ))}
       </div>
 
-      <div>
-        <div onClick={() => {
-          handleGetMore()
-        }}
-          className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200'
-        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
-      </div>
     </div>
   }
 }
@@ -95,8 +87,7 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
   )
 }
 
-function getSearchKey() {
-  const router = useRouter()
+function getSearchKey(router) {
   if (router.query && router.query.s) {
     return router.query.s
   }

themes/gitbook/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
+      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center mx-auto w-full leading-6 text-sm px-6 pb-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>