Merge pull request #47 from tangly1024/theme-medium

Theme medium

themes/Medium/LayoutCategory.js

@@ -1,8 +1,8 @@
 import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
 
 export const LayoutCategory = (props) => {
-  const { category } = props
   return <LayoutBase {...props}>
-    Category -  {category}
+    <BlogPostListPage {...props} />
   </LayoutBase>
 }

themes/Medium/LayoutSlug.js

@@ -60,7 +60,7 @@ export const LayoutSlug = (props) => {
 
   return <LayoutBase {...props} meta={meta} showInfoCard={true} slotRight={slotRight}>
     <h1 className='text-4xl pt-12 font-sans'>{post?.title}</h1>
-    <div className='flex py-4 items-center font-sans px-1'>
+    <section className='flex py-4 items-center font-sans px-1'>
       <Link href='/about' passHref>
         <>
           <Image
@@ -75,7 +75,7 @@ export const LayoutSlug = (props) => {
         </>
       </Link>
       <div className='text-gray-500'>{date}</div>
-    </div>
+    </section>
     {/* Notion文章主体 */}
     <section id='notion-article' className='px-1 max-w-5xl'>
       {post.blockMap && (
@@ -102,10 +102,10 @@ export const LayoutSlug = (props) => {
            data-ad-client="ca-pub-2708419466378217"
            data-ad-slot="3806269138"/>
     </section>
-    <div>
+    <section>
       <ArticleAround prev={prev} next={next}/>
       <Comment frontMatter={post}/>
-    </div>
+    </section>
   </LayoutBase>
 }
 

themes/Medium/LayoutTag.js

@@ -1,8 +1,8 @@
 import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
 
 export const LayoutTag = (props) => {
-  const { tag } = props
   return <LayoutBase>
-     Tag - {tag}
+    <BlogPostListPage {...props} />
    </LayoutBase>
 }

themes/Medium/components/Footer.js

@@ -9,7 +9,7 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-gray-900 flex-shrink-0 mb-8 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
       <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
       <br/>

themes/Medium/components/LogoBar.js

@@ -1,26 +1,14 @@
 import BLOG from '@/blog.config'
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
 export default function LogoBar () {
-  // const { locale } = useGlobal()
-
   return <div id='top-wrapper' className='w-full flex justify-center font-sans'>
     <div className='flex mx-auto w-full  justify-between '>
       <div className='space-x-3 flex items-center'>
         <Link href='/'>
           <a className='text-2xl'>{BLOG.TITLE}</a>
         </Link>
-        {/* <Link href='/about'> */}
-        {/*  <a className='text-gray-600'>{locale.NAV.ABOUT}</a> */}
-        {/* </Link> */}
       </div>
-      {BLOG.CONTACT_EMAIL && <Link href={`mailto:${BLOG.CONTACT_EMAIL}`} passHref>
-        <div className='bg-black px-2 py-1 rounded-full'>
-          <FontAwesomeIcon className='cursor-pointer text-white' icon={faEnvelope} />
-        </div>
-      </Link>}
     </div>
   </div>
 }

themes/Medium/components/SocialButton.js

@@ -10,8 +10,7 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 flex-wrap flex justify-center'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
+  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
       {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
         <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
       </a>}
@@ -31,6 +30,5 @@ const SocialButton = () => {
         <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
       </a>
     </div>
-  </div>
 }
 export default SocialButton