theme-heo

etnperlong · Jul 12, 2023 · 99bd4f3 · 99bd4f3
1 parent a990d3c
commit 99bd4f3
Show file tree

Hide file tree

Showing 21 changed files with 357 additions and 276 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,6 +26,7 @@ module.exports = {
     }
   },
   rules: {
+    'react/no-unknown-property': 'off', // <style jsx>
     'react/prop-types': 'off',
     'space-before-function-paren': 0,
     'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks

diff --git a/components/FlipCard.js b/components/FlipCard.js
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+
+/**
+ * 翻转组件
+ * @param {*} props
+ * @returns
+ */
+export default function FlipCard(props) {
+  const [isFlipped, setIsFlipped] = useState(false)
+
+  function handleCardFlip() {
+    setIsFlipped(!isFlipped)
+  }
+
+  return (
+      <div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
+        <div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>{props.frontContent}</div>
+        <div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>{props.backContent}</div>
+        <style jsx>{`
+          .flip-card {
+            width: auto;
+            height: auto;
+            display: inline-block;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.2s;
+          }
+          
+          .flip-card-front,
+          .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+          }
+          
+          .flip-card-front {
+            z-index: 2;
+            transform: rotateY(0);
+            background-color: #f1f1f1;
+          }
+          
+          .flip-card-back {
+            transform: rotateY(180deg);
+            background-color: #888;
+          }
+          
+          .flip-card.flipped {
+            transform: rotateY(180deg);
+          }
+        `}</style>
+      </div>
+  )
+}
diff --git a/components/HeroIcons.js b/components/HeroIcons.js
@@ -3,52 +3,68 @@
  * @returns
  */
 
-const Moon = () => {
+export const Moon = () => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+    </svg>
 }
 
-const Sun = () => {
+export const Sun = () => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </svg>
 }
 
-const Home = ({ className }) => {
+export const Home = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
 }
 
-const User = ({ className }) => {
+export const User = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
 }
 
-const ArrowPath = ({ className }) => {
+export const ArrowPath = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
 }
 
-const ChevronLeft = ({ className }) => {
+export const ChevronLeft = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+    </svg>
 }
 
-const ChevronRight = ({ className }) => {
+export const ChevronRight = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+    </svg>
 }
 
-const InformationCircle = ({ className }) => {
+export const InformationCircle = ({ className }) => {
   return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    </svg>
 }
 
-export { Moon, Sun, Home, User, ArrowPath, ChevronLeft, ChevronRight, InformationCircle }
+export const HashTag = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
+    </svg>
+}
+
+export const GlobeAlt = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+    </svg>
+}
+
+export const ArrowRightCircle = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+}
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
@@ -1,7 +1,7 @@
 export default {
   LOCALE: 'en-US',
   NAV: {
-    INDEX: 'Blog',
+    INDEX: 'Home',
     RSS: 'RSS',
     SEARCH: 'Search',
     ABOUT: 'About',

diff --git a/styles/globals.css b/styles/globals.css
@@ -2,28 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  --scrollbarBG: #ffffff00;
-  --thumbBG: #b8b8b8;
-}
-body::-webkit-scrollbar {
-  width: 5px;
-}
-body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
-body::-webkit-scrollbar-track {
-  background: var(--scrollbarBG);
-}
-body::-webkit-scrollbar-thumb {
-  background-color: var(--thumbBG);
-}
-
-::selection {
-  background: rgba(45, 170, 219, 0.3);
-}
-
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -285,57 +263,3 @@ a.avatar-wrapper {
 .reply-author-name {
   font-weight: 500;
 }
-
-.line-clamp-4 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
-}
-
-.line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-
-/* fukasawa的首页响应式分栏 */
-#theme-fukasawa .grid-item {
-    height: auto;
-    break-inside: avoid-column;
-    margin-bottom: .5rem;
-  }
-
-  /* 大屏幕（宽度≥1024px）下显示3列 */
-  @media (min-width: 1024px) {
-    #theme-fukasawa .grid-container {
-      column-count: 3;
-      column-gap: .5rem;
-    }
-  }
-
-  /* 小屏幕（宽度≥640px）下显示2列 */
-  @media (min-width: 640px) and (max-width: 1023px) {
-    #theme-fukasawa .grid-container {
-      column-count: 2;
-      column-gap: .5rem;
-    }
-  }
-
-  /* 移动端（宽度<640px）下显示1列 */
-  @media (max-width: 639px) {
-    #theme-fukasawa .grid-container {
-      column-count: 1;
-      column-gap: .5rem;
-    }
-  }
diff --git a/styles/notion.css b/styles/notion.css
@@ -1943,10 +1943,6 @@ svg + .notion-page-title-text {
     display: block !important;
 }
 
-::selection {
-    @apply bg-blue-500 text-gray-50 !important;
-}
-
 /* https://github.com/kchen0x */
 .notion-quote {
   display: block;

diff --git a/themes/fukasawa/style.js b/themes/fukasawa/style.js
@@ -11,6 +11,37 @@ const Style = () => {
       text-color: red;
     }
 
+    
+    /* fukasawa的首页响应式分栏 */
+    #theme-fukasawa .grid-item {
+        height: auto;
+        break-inside: avoid-column;
+        margin-bottom: .5rem;
+    }
+    
+    /* 大屏幕（宽度≥1024px）下显示3列 */
+    @media (min-width: 1024px) {
+        #theme-fukasawa .grid-container {
+        column-count: 3;
+        column-gap: .5rem;
+        }
+    }
+    
+    /* 小屏幕（宽度≥640px）下显示2列 */
+    @media (min-width: 640px) and (max-width: 1023px) {
+        #theme-fukasawa .grid-container {
+        column-count: 2;
+        column-gap: .5rem;
+        }
+    }
+    
+    /* 移动端（宽度<640px）下显示1列 */
+    @media (max-width: 639px) {
+        #theme-fukasawa .grid-container {
+        column-count: 1;
+        column-gap: .5rem;
+        }
+    }
   `}</style>
 }
 

diff --git a/themes/heo/components/Announcement.js b/themes/heo/components/Announcement.js
@@ -1,19 +1,16 @@
-import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 
 const NotionPage = dynamic(() => import('@/components/NotionPage'))
 
 const Announcement = ({ post, className }) => {
-  const { locale } = useGlobal()
   if (post?.blockMap) {
-    return <div className={className}>
-        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
-            <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
-            {post && (<div id="announcement-content">
-            <NotionPage post={post} className='text-center' />
-        </div>)}
-        </section>
-    </div>
+    return <div >
+            {post && (
+                <div id="announcement-content">
+                    <NotionPage post={post} />
+                </div>
+            )}
+        </div>
   } else {
     return <></>
   }

diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
@@ -8,23 +8,14 @@ import BLOG from '@/blog.config'
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
   if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
-    post.pageCover = siteInfo?.pageCoverThumbnail
+    post.pageCoverThumbnail = siteInfo?.pageCover
   }
   const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
-  //   const delay = (index % 2) * 200
-
+  console.log(post, post.pageCoverThumbnail)
   return (
         <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div
-                // data-aos="fade-up"
-                // data-aos-easing="ease-in-out"
-                // data-aos-duration="800"
-                // data-aos-once="false"
-                // data-aos-anchor-placement="top-bottom"
-                id='blog-post-card'
-                key={post.id}
-                className={`w-full justify-between flex flex-col lg:h-96  ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? '' : ''}
-                    overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
+            <div className={`w-full border justify-between flex flex-col lg:h-96 
+                    overflow-hidden  rounded-xl bg-white `}>
 
                 {/* 图片封面 */}
                 {showPageCover && (