group theme files - example

themes/example/components/Announcement.js

@@ -5,7 +5,7 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
 
 const Announcement = ({ post, className }) => {
   const { locale } = useGlobal()
-  if (!post) {
+  if (!post || Object.keys(post).length === 0) {
     return <></>
   }
   return <aside className="rounded shadow overflow-hidden mb-6">

themes/example/components/ArticleInfo.js

@@ -11,12 +11,12 @@ export const ArticleInfo = (props) => {
             <div>
                 {post?.type !== 'Page' && <>
                     <Link
-                        href={`/category/${post.category}`}
+                        href={`/category/${post?.category}`}
                         passHref
                         className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
 
                         <i className="mr-1 fas fa-folder-open" />
-                        {post.category}
+                        {post?.category}
 
                     </Link>
                     <span className='mr-2'>|</span>
@@ -33,7 +33,7 @@ export const ArticleInfo = (props) => {
                     </Link>
                     <span className='mr-2'>|</span>
                     <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                        {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+                        {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedTime}
                     </span>
                     <span className='mr-2'>|</span>
                     <span className="hidden busuanzi_container_page_pv font-light mr-2">

themes/example/components/BlogListGroupByDate.js

@@ -0,0 +1,39 @@
+import BLOG, { LINK } from '@/blog.config'
+
+/**
+ * 按照日期将文章分组
+ * 归档页面用到
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
+  return <div key={archiveTitle}>
+    <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+        {archiveTitle}
+    </div>
+
+    <ul>
+        {archivePosts[archiveTitle].map(post => (
+            <li
+                key={post.id}
+                className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+            >
+                <div id={post?.publishTime}>
+                    <span className="text-gray-400">
+                        {post.date?.start_date}
+                    </span>{' '}
+                    &nbsp;
+                    <LINK
+                        href={`${BLOG.SUB_PATH}/${post.slug}`}
+                        passHref
+                        className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                        {post.title}
+
+                    </LINK>
+                </div>
+            </li>
+        ))}
+    </ul>
+</div>
+}

themes/example/components/BlogListPage.js

@@ -20,7 +20,7 @@ export const BlogListPage = props => {
   const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
 
   return (
-        <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
+        <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
 
             <div id="posts-wrapper">
                 {posts?.map(post => (

themes/example/components/BlogPostCard.js

@@ -6,13 +6,13 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 const BlogPostCard = ({ post }) => {
   const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
 
-  return <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
+  return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
         <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
             <h2 className="mb-4">
                 <Link
                     href={`/${post.slug}`}
                     className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                    {post.title}
+                    {post?.title}
                 </Link>
             </h2>
 
@@ -25,14 +25,14 @@ const BlogPostCard = ({ post }) => {
                 {/* <a href="#" className="text-gray-700">2 Comments</a> */}
             </div>
 
-            <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
+            {!post.results && <p className="line-clamp-3 text-gray-700 dark:text-gray-400 leading-normal">
                 {post.summary}
-            </p>
+            </p>}
             {/* 搜索结果 */}
             {post.results && (
-                <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                    {post.results.map(r => (
-                        <span key={r}>{r}</span>
+                <p className="line-clamp-3 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                    {post.results.map((r, index) => (
+                        <span key={index}>{r}</span>
                     ))}
                 </p>
             )}

themes/example/components/CategoryItem.js

@@ -0,0 +1,20 @@
+import Link from 'next/link'
+
+/**
+ * 文章分类
+ * @param {*} param0
+ * @returns
+ */
+export default function CategoryItem({ category }) {
+  return (
+        <Link
+            key={category.name}
+            href={`/category/${category.name}`}
+            passHref
+            legacyBehavior>
+            <div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+            </div>
+        </Link>
+  )
+}

themes/example/components/LoadingCover.js

@@ -0,0 +1,8 @@
+
+export default function LoadingCover() {
+  return <div id='cover-loading' className={'z-50 opacity-50  pointer-events-none transition-all duration-300'}>
+ <div className='w-full h-screen flex justify-center items-center'>
+     <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+ </div>
+</div>
+}

themes/example/components/SearchInput.js

@@ -4,7 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react'
 
 let lock = false
 
-const SearchInput = ({ currentTag, currentSearch, cRef }) => {
+const SearchInput = ({ currentTag, keyword, cRef }) => {
   const { locale } = useGlobal()
   const router = useRouter()
   const searchInputRef = useRef(null)
@@ -68,7 +68,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     onCompositionUpdate={lockSearchInput}
     onCompositionEnd={unLockSearchInput}
     onChange={e => updateSearchKey(e.target.value)}
-    defaultValue={currentSearch || ''}
+    defaultValue={keyword || ''}
   />
 
   <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'

themes/example/components/TagItem.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+/**
+ * 标签
+ * @param {*} param0
+ * @returns
+ */
+export default function TagItem({ tag }) {
+  return <div key={tag.name} className='p-2'>
+        <Link
+            key={tag}
+            href={`/tag/${encodeURIComponent(tag.name)}`}
+            passHref
+            className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
+            <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+        </Link>
+    </div>
+}