Layout and flow (#5)

* remove Series from posts

* remove Series from landing page

* remove `all` tag, and add hashtags

* remove divider, add box background

* fix background on different size screens

* fix post list mapper

contents/posts/deep-questions/index.md

@@ -4,10 +4,11 @@ date: 2021-07-01
 update: 2023-08-06
 tags:
   - LLM
-  - Progressive Web Applications
+  - PWA
   - gatsby
   - react
-series: "Entrepreneurship"
+  - entrepreneur
+# series: "Entrepreneurship"
 ---
 
 ## Side project turn Startup

contents/posts/publications/index.md

@@ -6,7 +6,7 @@ update: 2023-08-06
 tags:
   - code
   - publications
-series: "Research"
+# series: "Research"
 ---
 
 During my research career, I have authored a few publications. Most of them focus on uncovering deep theoretical concepts by using optimized large numerical simulations.

contents/posts/this-website/index.md

@@ -5,7 +5,8 @@ update: 2023-08-05
 tags:
   - gatsby
   - react
-series: "Progressive Web Applications"
+  - PWA
+# series: "Progressive Web Applications"
 ---
 
 This website is based on [gatsby-starter-hoodie](https://github.com/devHudi/gatsby-starter-hoodie) by [Hudi](https://github.com/devHudi).

src/components/Layout/Header/index.jsx

@@ -9,9 +9,9 @@ import {
   FaSun,
   FaMoon,
   FaTags,
-  FaRss,
+  // FaRss,
   FaSearch,
-  FaListUl,
+  // FaListUl,
 } from "react-icons/fa"
 
 const HeaderWrapper = styled.header`
@@ -153,12 +153,12 @@ const Header = ({ toggleTheme }) => {
           <Link to="/tags">
             <FaTags />
           </Link>
-          <Link to="/series">
+          {/* <Link to="/series">
             <FaListUl />
           </Link>
           <Link to="/rss.xml">
             <FaRss />
-          </Link>
+          </Link> */}
           <Link to="/search">
             <FaSearch style={{ marginRight: 0 }} />
           </Link>

src/components/NoContent/index.jsx

@@ -12,6 +12,6 @@ const Wrapper = styled.div`
   color: ${props => props.theme.colors.tertiaryText};
 `
 
-const NoContent = ({ name }) => <Wrapper>There is no {name}.</Wrapper>
+const NoContent = ({ name }) => <Wrapper>There are no {name}.</Wrapper>
 
 export default NoContent

src/components/PostList/index.jsx

@@ -5,7 +5,6 @@ import _ from "lodash"
 import { Link } from "gatsby"
 
 import Title from "components/Title"
-import Divider from "components/Divider"
 import TagList from "components/TagList"
 
 const StyledLink = styled(Link)`
@@ -22,9 +21,20 @@ const PostWrapper = styled.div`
   position: relative;
   top: 0;
   transition: all 0.5s;
+  background-color: ${props =>
+    props.theme.colors.hoveredTagBackground}; // Add this line
+  border-radius: 10px; // Add this line if you want rounded corners
+  padding: 20px; // Add this line to give some space around the content
+  margin-bottom: 16px; // Adjust the margin for smaller screens if needed
+  &:hover {
+    background-color: ${props =>
+      props.theme.colors
+        .background}; // Add this line to change the background color on hover
+  }
 
   @media (max-width: 768px) {
-    padding: 0 5px;
+    padding: 0 10px;
+    margin-bottom: 10px; // Adjust the margin for smaller screens if needed
   }
 `
 
@@ -73,7 +83,7 @@ const PostList = ({ postList }) => {
 
   return (
     <PostListWrapper>
-      {postList.slice(0, postCount).map((post, i) => {
+      {postList.slice(0, postCount).map(post => {
         const { title, description, date, tags } = post.frontmatter
         const { excerpt } = post
         const { slug } = post.fields
@@ -92,10 +102,6 @@ const PostList = ({ postList }) => {
               </StyledLink>
               <TagList tagList={tags} />
             </PostWrapper>
-
-            {postCount - 1 !== i && postList.length - 1 !== i && (
-              <Divider mt="48px" mb="32px" />
-            )}
           </>
         )
       })}

src/components/SideTagList/index.jsx

@@ -42,19 +42,16 @@ const Tag = styled.li`
   }
 `
 
-const SideTagList = ({ tags, postCount }) => {
+const SideTagList = ({ tags }) => {
   return (
     <RelativeWrapper>
       <Wrapper>
         <Title>TAG LIST</Title>
         <ul>
-          <Tag>
-            <Link to="/tags">all ({postCount})</Link>
-          </Tag>
           {_.map(tags, tag => (
             <Tag>
               <Link to={`/tags?q=${tag.fieldValue}`}>
-                {tag.fieldValue} ({tag.totalCount})
+                #{tag.fieldValue} ({tag.totalCount})
               </Link>
             </Tag>
           ))}

src/components/TagList/index.jsx

@@ -3,7 +3,6 @@ import styled from "styled-components"
 import { Link } from "gatsby"
 
 const TagListWrapper = styled.div`
-  margin-bottom: 16px;
   word-break: normal;
 `
 
@@ -45,7 +44,7 @@ const TagList = ({ tagList, count, selected }) => {
       <TagListWrapper>
         {tagList.map((tag, i) => (
           <Link key={JSON.stringify({ tag, i })} to={`/tags?q=${tag}`}>
-            <TagLink>{spaceToDash(tag)}</TagLink>
+            <TagLink>#{spaceToDash(tag)}</TagLink>
           </Link>
         ))}
       </TagListWrapper>
@@ -62,7 +61,7 @@ const TagList = ({ tagList, count, selected }) => {
           }
         >
           <TagLink selected={tag.fieldValue === selected}>
-            {spaceToDash(tag.fieldValue)} ({tag.totalCount})
+            #{spaceToDash(tag.fieldValue)} ({tag.totalCount})
           </TagLink>
         </Link>
       ))}

src/pages/index.jsx

@@ -32,7 +32,7 @@ const BlogIndex = ({ data }) => {
       <VerticalSpace size={48} />
       <Bio />
       <Divider />
-      <SideTagList tags={tags} postCount={posts.length} />
+      <SideTagList tags={tags} />
       <PostList postList={posts} />
     </Layout>
   )