From f48d519a53324627ad38a3fd0f1fb45ef866ea44 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 16 Dec 2021 14:40:39 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20BlogCard=E8=B0=83=E6=95=B4=EF=BC=8C?=
 =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=97=A0=E5=B0=81=E9=9D=A2=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js              |  1 -
 components/ArticleDetail.js |  9 ++----
 components/BlogPostCard.js  | 57 +++++++++++++++++++++----------------
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 7e9f8d3e..a2a96ecd 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -7,7 +7,6 @@ const BLOG = {
   lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
-  defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
   appearance: 'auto', // ['light', 'dark', 'auto'],
   font: 'font-sans tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index cbcc3713..c97568b4 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -40,6 +40,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const url = BLOG.link + useRouter().asPath
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)
+  const cover = post.page_cover && post.page_cover.length > 1 ? post.page_cover : undefined
   return (
     <>
      <Progress targetRef={targetRef} />
@@ -51,15 +52,11 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             itemType="https://schema.org/Movie"
             className="duration-300 hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-52 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
-            {post.type && !post.type.includes('Page') && (
+            {post.type && !post.type.includes('Page') && cover && (
               <>
                 <header className="w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
                   <Image
-                    src={
-                      post.page_cover && post.page_cover.length > 1
-                        ? post.page_cover
-                        : BLOG.defaultImgCover
-                    }
+                    src={cover}
                     loading="eager"
                     objectFit="cover"
                     layout="fill"
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index ccce55fa..cf776e62 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -1,46 +1,53 @@
 import BLOG from '@/blog.config'
-import TagItemMini from '@/components/TagItemMini'
 import Link from 'next/link'
 import React from 'react'
 import Image from 'next/image'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFolder } from '@fortawesome/free-solid-svg-icons'
+import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, tags }) => {
+  const cover = (post.page_cover && post.page_cover.length > 1) ? post.page_cover : undefined
+  // const cover = undefined
   return (
-    <div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster
-     w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
-      <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='w-full h-60 relative rounded-t-xl md:rounded-t-none md:rounded-l-xl md:h-full duration-200 cursor-pointer transform col-span-2 overflow-hidden'>
-          <Image className='hover:scale-105 transform duration-500 rounded-t-xl md:rounded-t-none md:rounded-l-xl' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
-        </div>
-      </Link>
-
-      <div className='p-8 col-span-3'>
-        <div>
-          <Link href={`/category/${post.category}`} passHref>
-            <a className='cursor-pointer dark:text-gray-200  font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
-              <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
-            </a>
-          </Link>
-          <span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>
-          <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <a className='mt-2  font-light text-gray-500 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</a>
-          </Link>
-        </div>
+    <div key={post.id} className='flex md:flex-row flex-col-reverse justify-between hover:shadow-2xl shadow-md mb-14 duration-300 rounded-xl
+      w-full lg:h-60 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
+      <div className='p-8 flex flex-col justify-between w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <a className='cursor-pointer my-3 text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
+          <a className='cursor-pointer text-lg md:text-xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
             {post.title}
           </a>
         </Link>
 
-        <p className='mt-2 text-gray-600 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
+        <p className='my-4 text-gray-800 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
 
-        <div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
-          <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
+        <div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
+          <div>
+          <Link href={`/category/${post.category}`} passHref>
+            <a className='cursor-pointer font-light text-sm hover:underline transform'>
+              <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
+            </a>
+          </Link>
+          <span className='mx-2'>|</span>
+          <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
+            <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'>{post.date.start_date}</a>
+          </Link>
+          </div>
+          <div className='md:flex-nowrap flex-wrap md:justify-start hidden md:inline-block'>
+            <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
+          </div>
         </div>
+
       </div>
+
+      {cover && (
+        <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
+        <div className='h-60 w-full md:max-w-sm relative rounded-t-xl md:rounded-t-none md:rounded-r-xl md:h-full duration-200 cursor-pointer transform overflow-hidden'>
+          <Image className='hover:scale-105 transform duration-500 rounded-t-xl md:rounded-t-none md:rounded-r-xl' src={cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
+        </div>
+      </Link>
+      )}
     </div >
   )
 }