feature:

文章分类功能

blog.config.js

@@ -1,6 +1,6 @@
 const BLOG = {
-  title: '唐里1024',
+  title: '唐力1024',
-  author: '唐哼哼',
+  author: '唐力',
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享有趣的技术与思考',
@@ -13,7 +13,7 @@ const BLOG = {
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
   since: 2020, // if leave this empty, current year will be used.
-  postsPerPage: 8, // post counts per page
+  postsPerPage: 6, // post counts per page
   sortByDate: false,
   showAbout: true, // WIP
   showArchive: true, // WIP

components/BlogPostCard.js

@@ -1,8 +1,9 @@
 import BLOG from '@/blog.config'
 import TagItemMini from '@/components/TagItemMini'
 import Link from 'next/link'
+import React from 'react'
 
-const BlogPost = ({ post }) => {
+const BlogPostCard = ({ post }) => {
   return (
     <div key={post.id} className='animate__animated animate__slideInUp animate__faster shadow-card inline-block border dark:border-gray-600 my-2 w-full 2xl:max-w-2xl bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
         {/*  封面图 */}
@@ -17,6 +18,9 @@ const BlogPost = ({ post }) => {
             <div className='cursor-pointer my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
           </Link>
           <div className='flex flex-nowrap'>
+            <Link href={`/category/${post.category}`}>
+              <div className='cursor-pointer text-sm py-1.5 mr-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
+            </Link>
             {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
             <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
           </div>
@@ -26,4 +30,4 @@ const BlogPost = ({ post }) => {
   )
 }
 
-export default BlogPost
+export default BlogPostCard

components/BlogPostCardMini.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 
-const BlogPostMini = ({ post }) => {
+const BlogPostCardMini = ({ post }) => {
   return (
     <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
      <div className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
@@ -22,4 +22,4 @@ const BlogPostMini = ({ post }) => {
   )
 }
 
-export default BlogPostMini
+export default BlogPostCardMini

components/BlogPostListPage.js

@@ -1,4 +1,4 @@
-import BlogPost from '@/components/BlogPost'
+import BlogPostCard from '@/components/BlogPostCard'
 import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
 
@@ -58,7 +58,7 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => {
         {/* 文章列表 */}
         <div className='grid 3xl:grid-cols-4 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
           {postsToShow.map(post => (
-            <BlogPost key={post.id} post={post} tags={tags} />
+            <BlogPostCard key={post.id} post={post} tags={tags} />
           ))}
         </div>
 

components/BlogPostListScroll.js

@@ -1,7 +1,7 @@
-import BlogPost from '@/components/BlogPost'
+import BlogPostCard from '@/components/BlogPostCard'
 import BLOG from '@/blog.config'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import BlogPostListEmpty from '@/components/BlogPostListEmpty'
 
@@ -13,7 +13,7 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScroll = ({ posts = [], tags, currentSearch }) => {
+const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, currentTag }) => {
   const postsPerPage = BLOG.postsPerPage
   const [page, updatePage] = useState(1)
   const postsToShow = getPostByPage(page, posts, postsPerPage)
@@ -52,10 +52,29 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch }) => {
     return <BlogPostListEmpty />
   } else {
     return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
-        {/* 文章列表 */}
+
+      {currentCategory && (
+        <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
+          <div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{currentCategory}</div>
+        </div>
+      )}
+
+      {currentSearch && (
+        <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
+          <div className='cursor-pointer py-1.5 mr-2 dark:text-gray-300 hover:underline'><i className='fa fa-search mr-1'/>关键字：{currentSearch}</div>
+        </div>
+      )}
+
+      {currentTag && (
+        <div className='w-full p-1 bg-gray-100 dark:bg-gray-700 flex'>
+          <div className='cursor-pointer py-1.5 mr-2 hover:underline bg-gray-200 dark:bg-gray-400 px-2 rounded'># {currentTag}</div>
+        </div>
+      )}
+
+      {/* 文章列表 */}
         <div className='grid 3xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
           {postsToShow.map(post => (
-            <BlogPost key={post.id} post={post} tags={tags} />
+            <BlogPostCard key={post.id} post={post} tags={tags} />
           ))}
         </div>
 

components/Drawer.js

@@ -20,16 +20,16 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
       handleMenuClick: () => handleMenuClick()
     }
   })
-  const [showDrawer, switchShowDrawer] = useState(false)
+  const [isHidden, changeHiddenStatus] = useState(true)
   // 点击按钮更改侧边抽屉状态
   const handleMenuClick = () => {
-    switchShowDrawer(!showDrawer)
+    changeHiddenStatus(!isHidden)
   }
   return <>
     <div className='fixed top-0 left-0 z-50 h-screen shadow-2xl bg-white dark:bg-gray-800'>
       {/* LOGO */}
       <div
-        className={(showDrawer ? '' : '-ml-72') + ' duration-200 w-72  border-r dark:border-gray-600'}>
+        className={(isHidden ? '-ml-72' : '') + ' duration-200 w-72  border-r dark:border-gray-600'}>
         <div className='w-72 flex space-x-4 px-5 py-1 dark:border-gray-500 '>
           <div
             className='z-10 py-2 duration-200 mr-2 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
@@ -41,7 +41,7 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
 
       {/* 侧边菜单 */}
       <div
-        className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-scroll h-screen w-72 duration-200 overflow-y-auto'}>
+        className={(isHidden ? '-ml-72' : 'shadow-2xl') + ' overflow-y-scroll h-screen w-72 duration-200 overflow-y-auto'}>
         <div className='pb-56'>
           {/* 搜索框 */}
           <div className='px-5 my-3 block md:hidden'>
@@ -79,7 +79,7 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div id='drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
+    <div id='drawer-background' className={(isHidden ? 'hidden' : 'block') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'}
          onClick={handleMenuClick} />
   </>
 }

components/MenuButtonGroup.js

@@ -24,7 +24,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         link =>
           link.show && (
             <Link key={link.id + link.icon} title={link.to} href={link.to} >
-              <a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-black' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'} >
+              <a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-black' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
                 <div className='my-auto w-5 text-2xl justify-center flex'>
                   <i className={'fa ' + link.icon} />
                 </div>

components/PostsCategories.js

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import React from 'react'
+
+const PostsCategories = ({ currentCategory, categories }) => {
+  return <>
+    <section
+      className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
+      <div className='w-32'>文章分类</div>
+    </section>
+    <div>
+      <div id='category-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
+        {Object.keys(categories).map(category => {
+          return <Link key={category} href={`/category/${category}`}>
+            <div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category} {categories[category]}</div>
+          </Link>
+        })}
+      </div>
+    </div>
+  </>
+}
+
+export default PostsCategories

components/SideBar.js

@@ -3,8 +3,9 @@ import MenuButtonGroup from '@/components/MenuButtonGroup'
 import InfoCard from '@/components/InfoCard'
 import TagList from '@/components/TagList'
 import LatestPosts from '@/components/LatestPosts'
+import PostsCategories from '@/components/PostsCategories'
 
-const SideBar = ({ tags, currentTag, post, posts }) => {
+const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
   // 按时间排序
   if (posts) {
     posts = posts.sort((a, b) => {
@@ -26,6 +27,13 @@ const SideBar = ({ tags, currentTag, post, posts }) => {
 
         <hr className='dark:border-gray-700 my-2' />
 
+        {/* 分类  */}
+        {categories && (
+          <div className='mt-2'>
+            <PostsCategories currentCategory={currentCategory} categories={categories}/>
+          </div>
+        )}
+
         {/* 最新文章 */}
         {posts && (
           <div className='mt-2'>

components/TagItemMini.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 const TagItemMini = ({ tag, selected = false, count }) => (
   <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
     <span
-      className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
+      className={`cursor-pointer inline-block border rounded hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
                    dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
       }`}
     >

layouts/BaseLayout.js

@@ -9,7 +9,7 @@ import SideBar from '@/components/SideBar'
 import JumpToTop from '@/components/JumpToTop'
 import { useGlobal } from '@/lib/global'
 
-const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, totalPosts, currentSearch, ...customMeta }) => {
+const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, totalPosts, currentSearch, currentCategory, categories, ...customMeta }) => {
   let windowTop = 0
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -40,7 +40,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, totalPosts,
       <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} />
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
-        <SideBar tags={tags} post={post} posts={totalPosts} />
+        <SideBar tags={tags} post={post} posts={totalPosts} categories={categories} currentCategory={currentCategory} />
         <div className='flex flex-grow' ref={targetRef}>
             {children}
         </div>

lib/notion.js

@@ -1,3 +1,4 @@
 export { getAllPosts } from './notion/getAllPosts'
 export { getAllTags } from './notion/getAllTags'
 export { getPostBlocks } from './notion/getPostBlocks'
+export { getAllCategories } from './notion/getAllCategories'

lib/notion/getAllCategories.js

@@ -0,0 +1,22 @@
+/**
+ * 获取所有文章的分类
+ * @param allPosts
+ * @returns {Promise<{}|*[]>}
+ */
+export async function getAllCategories (allPosts) {
+  if (!allPosts) {
+    return []
+  }
+
+  let categories = allPosts.map(p => p.category)
+  categories = [...categories.flat()]
+  const categoryObj = {}
+  categories.forEach(category => {
+    if (category in categoryObj) {
+      categoryObj[category]++
+    } else {
+      categoryObj[category] = 1
+    }
+  })
+  return categoryObj
+}

pages/article/[slug].js

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllTags, getPostBlocks } from '@/lib/notion'
+import { getAllCategories, getAllPosts, getAllTags, getPostBlocks } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import { getPageTableOfContents } from 'notion-utils'
 import { useRouter } from 'next/router'
@@ -9,11 +9,11 @@ import formatDate from '@/lib/formatDate'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import RewardButton from '@/components/RewardButton'
 import ShareBar from '@/components/ShareBar'
-import BlogPostMini from '@/components/BlogPostMini'
+import BlogPostCardMini from '@/components/BlogPostCardMini'
 import Comment from '@/components/Comment'
 import TocBar from '@/components/TocBar'
 import BaseLayout from '@/layouts/BaseLayout'
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 import Custom404 from '@/pages/404'
 
 import 'prismjs/themes/prism-okaidia.css'
@@ -27,19 +27,19 @@ import 'prismjs/components/prism-typescript'
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
-const ArticleDetail = ({ post, blockMap, tags, prev, next, posts }) => {
+const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories }) => {
   if (!post) {
     return <Custom404/>
   }
   const meta = {
-    title: post.title,
+    title: `${post.title} | ${BLOG.title}`,
     description: post.summary,
     type: 'article'
   }
   const targetRef = useRef(null)
   const url = BLOG.link + useRouter().asPath
 
-  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} >
+  return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories} >
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
 
@@ -65,25 +65,10 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts }) => {
           {post.summary}
         </h2>
 
-        {/* 文章信息 */}
+        {/* 文章作者等关联信息 */}
         <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
           <div className='flex-nowrap flex'>
-
+            <div className='cursor-pointer text-md py-2 mx-2 hover:underline'><i className='fa fa-folder-open-o mr-1'/>{post.category}</div>
-            {post.slug !== 'about' && (<>
-              <a
-                className='hidden md:block duration-200 px-1' href='/article/about'
-              >
-                <Image alt={BLOG.author} width={33} height={33} src='/avatar.svg'
-                       className='rounded-full cursor-pointer transform hover:scale-125 duration-200' />
-              </a>
-            </>)}
-            {post.tags && (
-              <div className='flex flex-nowrap leading-8 p-1'>
-                {post.tags.map(tag => (
-                  <TagItem key={tag} tag={tag} />
-                ))}
-              </div>
-            )}
 
             {post.type[0] !== 'Page' && (
               <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
@@ -93,6 +78,15 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts }) => {
                 )}
               </div>
             )}
+
+            {post.tags && (
+              <div className='flex flex-nowrap leading-8 p-1'>
+                {post.tags.map(tag => (
+                  <TagItem key={tag} tag={tag} />
+                ))}
+              </div>
+            )}
+
           </div>
 
           {/* 不蒜子 */}
@@ -141,10 +135,10 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts }) => {
         </section>
 
         <div className='text-gray-800 my-5 dark:text-gray-300'>
-          <div className='mt-4 font-bold'>继续阅读</div>
+          <div className='mt-4 font-bold'>其他文章</div>
           <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
-            <BlogPostMini post={prev} />
+            <BlogPostCardMini post={prev} />
-            <BlogPostMini post={next} />
+            <BlogPostCardMini post={next} />
           </div>
         </div>
         {/* 评论互动 */}
@@ -198,13 +192,15 @@ export async function getStaticProps ({ params: { slug } }) {
   }
   posts = posts.filter(post => post.type[0] === 'Post')
   const tags = await getAllTags(posts)
+  const categories = await getAllCategories(posts)
+
   // 获取推荐文章
   const index = posts.indexOf(post)
   const prev = posts.slice(index - 1, index)[0] ?? posts.slice(-1)[0]
   const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
 
   return {
-    props: { post, blockMap, tags, prev, next, posts },
+    props: { post, blockMap, tags, prev, next, posts, categories },
     revalidate: 1
   }
 }

pages/category/[category].js

@@ -0,0 +1,56 @@
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'
+import TagsBar from '@/components/TagsBar'
+import BaseLayout from '@/layouts/BaseLayout'
+import BlogPostListScroll from '@/components/BlogPostListScroll'
+
+export default function Category ({ tags, posts, category, categories }) {
+  const meta = {
+    title: `${BLOG.title} | ${category}`,
+    description: BLOG.description,
+    type: 'website'
+  }
+  return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={posts} categories={categories}>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
+      <TagsBar tags={tags} />
+      <BlogPostListScroll posts={posts} tags={tags} currentCategory={category}/>
+    </div>
+  </BaseLayout>
+}
+
+export async function getStaticProps ({ params }) {
+  const category = params.category
+  let posts = await getAllPosts({ from: 'category-props' })
+  posts = posts.filter(
+    post => post.status[0] === 'Published' && post.type[0] === 'Post'
+  )
+  const tags = await getAllTags(posts)
+  const categories = await getAllCategories(posts)
+  const filteredPosts = posts.filter(
+    post => post && post.category && post.category.includes(category)
+  )
+  return {
+    props: {
+      tags,
+      posts: filteredPosts,
+      category,
+      categories
+    },
+    revalidate: 1
+  }
+}
+
+export async function getStaticPaths () {
+  if (BLOG.isProd) {
+    const tags = await getAllTags()
+    return {
+      paths: Object.keys(tags).map(tag => ({ params: { tag } })),
+      fallback: true
+    }
+  } else {
+    return {
+      paths: [],
+      fallback: true
+    }
+  }
+}

pages/index.js

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllTags } from '@/lib/notion'
+import { getAllPosts, getAllTags, getAllCategories } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import BaseLayout from '@/layouts/BaseLayout'
 import TagsBar from '@/components/TagsBar'
@@ -10,6 +10,7 @@ export async function getStaticProps () {
     post => post.status[0] === 'Published' && post.type[0] === 'Post'
   )
   const tags = await getAllTags(posts)
+  const categories = await getAllCategories(posts)
   const meta = {
     title: `${BLOG.title} | ${BLOG.description} `,
     description: BLOG.description,
@@ -19,15 +20,16 @@ export async function getStaticProps () {
     props: {
       posts,
       tags,
+      categories,
       meta
     },
     revalidate: 1
   }
 }
 
-const Index = ({ posts, tags, meta }) => {
+const Index = ({ posts, tags, meta, categories }) => {
   return (
-    <BaseLayout meta={meta} tags={tags} totalPosts={posts}>
+    <BaseLayout meta={meta} tags={tags} totalPosts={posts} categories={categories}>
       <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
         <TagsBar tags={tags} />
         <BlogPostListScroll posts={posts} tags={tags} />

pages/search.js

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllTags } from '@/lib/notion'
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import BaseLayout from '@/layouts/BaseLayout'
 import TagsBar from '@/components/TagsBar'
@@ -11,6 +11,8 @@ export async function getStaticProps () {
     post => post.status[0] === 'Published' && post.type[0] === 'Post'
   )
   const tags = await getAllTags(posts)
+  const categories = await getAllCategories(posts)
+
   const meta = {
     title: `${BLOG.title} | ${BLOG.description} `,
     description: BLOG.description,
@@ -20,13 +22,14 @@ export async function getStaticProps () {
     props: {
       posts,
       tags,
-      meta
+      meta,
+      categories
     },
     revalidate: 1
   }
 }
 
-const Search = ({ posts, tags, meta }) => {
+const Search = ({ posts, tags, meta, categories }) => {
   // 处理查询过滤 支持标签、关键词过滤
   let filteredPosts = []
   const searchKey = getSearchKey()
@@ -38,10 +41,10 @@ const Search = ({ posts, tags, meta }) => {
     })
   }
   return (
-    <BaseLayout meta={meta} tags={tags} totalPosts={posts} currentSearch={searchKey}>
+    <BaseLayout meta={meta} tags={tags} totalPosts={posts} currentSearch={searchKey} categories={categories}>
       <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
         <TagsBar tags={tags} />
-        <BlogPostListScroll posts={filteredPosts} tags={tags} />
+        <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
       </div>
     </BaseLayout>
   )

pages/tag/[tag].js

@@ -1,19 +1,19 @@
-import { getAllPosts, getAllTags } from '@/lib/notion'
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
 import TagsBar from '@/components/TagsBar'
-import BlogPostListPage from '@/components/BlogPostListPage'
 import BaseLayout from '@/layouts/BaseLayout'
+import BlogPostListScroll from '@/components/BlogPostListScroll'
 
-export default function Tag ({ tags, posts, currentTag }) {
+export default function Tag ({ tags, posts, currentTag, categories }) {
   const meta = {
-    title: `${BLOG.title} | ${currentTag}`,
+    title: `${BLOG.title} | #${currentTag}`,
     description: BLOG.description,
     type: 'website'
   }
-  return <BaseLayout meta={meta} tags={tags} currentTag={currentTag}>
+  return <BaseLayout meta={meta} tags={tags} currentTag={currentTag} categories={categories} totalPosts={posts}>
-    <div className='flex-grow'>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
       <TagsBar tags={tags} currentTag={currentTag}/>
-      <BlogPostListPage posts={posts} tags={tags}/>
+      <BlogPostListScroll posts={posts} tags={tags} currentTag={currentTag}/>
     </div>
   </BaseLayout>
 }
@@ -25,6 +25,7 @@ export async function getStaticProps ({ params }) {
     post => post.status[0] === 'Published' && post.type[0] === 'Post'
   )
   const tags = await getAllTags(posts)
+  const categories = await getAllCategories(posts)
   const filteredPosts = posts.filter(
     post => post && post.tags && post.tags.includes(currentTag)
   )
@@ -32,7 +33,8 @@ export async function getStaticProps ({ params }) {
     props: {
       tags,
       posts: filteredPosts,
-      currentTag
+      currentTag,
+      categories
     },
     revalidate: 1
   }