[FEAT] tag

suu3 · Oct 7, 2023 · cf906dd · cf906dd
1 parent 610e86e
commit cf906dd
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 16 deletions.
diff --git a/src/components/@layout/category-menu.module.css b/src/components/@layout/category-menu.module.css
@@ -1,32 +1,43 @@
 .list {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: var(--spacing-4);
-  /* flex-wrap: wrap; */
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+  /* grid-template-columns: repeat(6, 1fr); */
+  /* gap: var(--spacing-4); */
 }
 
 .list li {
+  box-shadow: 4px 4px 0px -1px var(--color-accent);
+  border: 1px solid var(--color-accent);
+
   text-align: center;
-  font-size: var(--fontSize-2);
+  font-size: var(--fontSize-1);
   font-weight: 700;
   list-style: none;
 
-  margin: 0;
+  margin: 0 1rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 5px;
 
   transition: all 0.15s ease-in-out;
 }
 
 .list li {
-  color: var(--color-text);
+  /* color: var(--color-text); */
 }
 
 .inactive {
-  box-shadow: inset 0 -20px 0 transparent;
+  color: var(--color-accent);
+  background: #ffffff;
+  /* box-shadow: inset 0 -20px 0 transparent; */
 }
 .list li:hover,
 .list li:active,
 .active {
-  box-shadow: inset 0 -20px 0 #bfffa1;
+  background: var(--color-accent);
+  color: #ffffff;
+  /* box-shadow: inset 0 -20px 0 #bfffa1; */
 }
 
 @media (max-width: 42rem) {

diff --git a/src/components/@layout/post-list-template.tsx b/src/components/@layout/post-list-template.tsx
@@ -7,11 +7,13 @@ import CategoryMenu from "./category-menu"
 import TransitionMain from "./transition-main"
 import { POST_PER_PAGE } from "../../constants/page"
 import { paginationCls } from "./post-list-template.module.css"
+import Badge from "../badge"
 
 const PostListTemplate = ({ data, location, pageContext }) => {
   const { currentPage, totalCount } = pageContext
-  const categories = data.allPostsInfo
+  const categories = data.allCategoriesInfo
   const posts = data.allMarkdownRemark.nodes
+  const tags = data.allTagsInfo
 
   React.useEffect(() => {
     const pathname =
@@ -66,6 +68,11 @@ const PostListTemplate = ({ data, location, pageContext }) => {
       {categories && (
         <CategoryMenu pathname={location.pathname} categories={categories} />
       )}
+      <aside>
+        {tags.group.map(({ fieldValue, totalCount }) => (
+          <Badge key={fieldValue}>{`${fieldValue} (${totalCount})`}</Badge>
+        ))}
+      </aside>
       <TransitionMain>
         <ol style={{ listStyle: `none` }}>{renderPosts}</ol>
       </TransitionMain>

diff --git a/src/components/badge.module.css b/src/components/badge.module.css
@@ -11,7 +11,7 @@
   font-weight: 600;
   margin-right: var(--spacing-2);
 
-  &:nth-child(2) {
+  /* &:nth-child(2) {
     box-shadow: inset 0 -10px 0 #ff8a00;
   }
   &:nth-child(1) {
@@ -20,5 +20,5 @@
 
   &:nth-child(3) {
     box-shadow: inset 0 -10px 0 #289039;
-  }
+  } */
 }
diff --git a/src/constants/page.ts b/src/constants/page.ts
@@ -1 +1 @@
-export const POST_PER_PAGE = 6
+export const POST_PER_PAGE = 10
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -79,7 +79,7 @@ const BlogPostTemplate = ({
           </ul>
         </nav>
         <Utterances />
-      </TransitionMain>{" "}
+      </TransitionMain>
     </Layout>
   )
 }

diff --git a/src/templates/category-posts.js b/src/templates/category-posts.js
@@ -17,13 +17,22 @@ export const pageQuery = graphql`
         title
       }
     }
-    allPostsInfo: allMarkdownRemark {
+    allCategoriesInfo: allMarkdownRemark {
       totalCount
       group(field: { frontmatter: { category: SELECT } }) {
         fieldValue
         totalCount
       }
     }
+    allTagsInfo: allMarkdownRemark(
+      filter: { frontmatter: { category: { eq: $category } } }
+    ) {
+      totalCount
+      group(field: { frontmatter: { tag: SELECT } }) {
+        fieldValue
+        totalCount
+      }
+    }
     allMarkdownRemark(
       sort: { frontmatter: { date: DESC } }
       limit: $limit

diff --git a/src/templates/home.tsx b/src/templates/home.tsx
@@ -23,13 +23,21 @@ export const pageQuery = graphql`
         title
       }
     }
-    allPostsInfo: allMarkdownRemark {
+    allCategoriesInfo: allMarkdownRemark {
       totalCount
       group(field: { frontmatter: { category: SELECT } }) {
         fieldValue
         totalCount
       }
     }
+    allTagsInfo: allMarkdownRemark {
+      totalCount
+      group(field: { frontmatter: { tag: SELECT } }) {
+        fieldValue
+        totalCount
+      }
+    }
+
     allMarkdownRemark(
       sort: { frontmatter: { date: DESC } }
       limit: $limit
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const POST_PER_PAGE = 6
		export const POST_PER_PAGE = 10