From d64fa80ee3412f34d4a5b1bccfeb9812d065f75e Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 9 Feb 2023 17:38:32 +0800
Subject: [PATCH] =?UTF-8?q?medium=20=E5=B0=81=E9=9D=A2=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/medium/components/BlogPostCard.js | 115 +++++++++++++----------
 1 file changed, 63 insertions(+), 52 deletions(-)

diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
index be243a01..2d27cd23 100644
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -11,65 +11,76 @@ const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
   const { locale } = useGlobal()
   return (
-    <div
-      key={post.id}
-      className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
-    >
-      <div className="lg:py-8 py-4 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'
-          }>
-
-          {post.title}
-
-        </Link>
-
         <div
-          className={
-            'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
-          }
+            key={post.id}
+            data-aos="fade-up"
+            data-aos-duration="600"
+            data-aos-easing="ease-in-out"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-bottom"
+            className="mb-6 max-w-7xl border-b dark:border-gray-800 "
         >
-          <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} />
-            ))}
-        </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">
+            <div className="lg:py-8 py-4 flex flex-col w-full">
                 <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" />
+                    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'
+                    }>
+                    <div>
+                        <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.page_cover} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
+                        </div>
+                        {post.title}
+                    </div>
 
                 </Link>
-              </div>
+
+                <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} />
+                        ))}
+                </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>
-        )}
-      </div>
-    </div>
+        </div>
   )
 }