Merge pull request #179 from devHudi/feature/178

feat: implement about page

blog-config.js

@@ -16,6 +16,7 @@ module.exports = {
     resume: "https://hudi.blog",
     link: "https://hudi.blog",
   },
+  useAbout: true,
   // See https://giscus.app/
   giscus: {
     repo: "devHudi/gatsby-starter-hoodie",

contents/about/index.md

@@ -0,0 +1,55 @@
+---
+title: "This is about page ✋"
+---
+
+## English Guide
+
+Hello! This section is dedicated to introducing your blog. Here, you can showcase various information to your visitors, such as a blog introduction, personal profile, resume, portfolio, and more.
+
+### Writing Guide
+
+To edit this page, modify the `/contents/about/index.md` file. You can write it in the same way as any other post. The path to this file cannot be changed.
+
+The Markdown document for the About page only contains a single frontmatter called `title`. The `title` frontmatter will be displayed as the title at the top of the About page.
+
+### Disabling the About Page
+
+```json
+module.exports = {
+
+  // ...
+
+  useAbout: false, // 👈
+
+  // ...
+
+}
+```
+
+You can disable the About page by setting the `useAbout` value to false in the `blog-config.js` file. If disabled, the tab in the blog header will be hidden, and visitors will not be able to access this page via the `/about` URL.
+
+## 한국어 가이드
+
+안녕하세요. 이 곳은 블로그를 소개하기 위한 공간입니다. 블로그 또는 자신에 대한 소개부터 이력서, 포트폴리오 등 다양한 정보를 이곳에서 방문자들에게 보여줄 수 있습니다.
+
+### 작성 가이드
+
+이 페이지를 편집하려면, `/contents/about/index.md` 파일을 수정하면 됩니다. 다른 포스팅을 작성하는 것과 동일한 방식으로 작성할 수 있습니다. 이 파일의 경로는 변경할 수 없습니다.
+
+About 페이지의 마크다운 문서는 오직 `title` 이라는 하나의 frontmatter 만 가지고 있습니다. `title` frontmatter 는 About 페이지 상단 제목으로 표시됩니다.
+
+### 비활성화
+
+```json
+module.exports = {
+
+  // ...
+
+  useAbout: false, // 👈
+
+  // ...
+
+}
+```
+
+`blog-config.js` 파일의 `useAbout` 값을 `false` 로 설정하여 About 페이지를 비활성화 할 수 있습니다. 비활성화 된다면, 블로그 상단에 존재하는 탭이 숨겨지고, `/about` 경로로 이 페이지에 접속할 수도 없게 됩니다.

gatsby-config.js

@@ -58,7 +58,7 @@ module.exports = {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `markdown-pages`,
-        path: `${__dirname}/contents/posts`,
+        path: `${__dirname}/contents`,
       },
     },
     {
@@ -176,6 +176,7 @@ module.exports = {
               {
                 allMarkdownRemark(
                   sort: { order: DESC, fields: [frontmatter___date] },
+                  filter: { fileAbsolutePath: { regex: "/contents/posts/" } },
                 ) {
                   edges {
                     node {

gatsby-node.js

@@ -11,6 +11,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     {
       postsRemark: allMarkdownRemark(
         sort: { fields: [frontmatter___date], order: ASC }
+        filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
         limit: 1000
       ) {
         nodes {

src/components/Article/Body/index.jsx

@@ -16,7 +16,7 @@ const Wrapper = styled.div`
   }
 `
 
-const Body = ({ html }) => {
+const Body = ({ html, hideToc }) => {
   const [toc, setToc] = useState([])
 
   const [ref, offsetTop] = useOffsetTop()
@@ -31,7 +31,7 @@ const Body = ({ html }) => {
 
   return (
     <Wrapper>
-      <Toc items={toc} articleOffset={offsetTop} />
+      {hideToc || <Toc items={toc} articleOffset={offsetTop} />}
 
       <PrismTheme />
 

src/components/Article/Header/index.jsx

@@ -5,6 +5,7 @@ import { author } from "../../../../blog-config"
 
 import Divider from "components/Divider"
 import TagList from "components/TagList"
+import { Link } from "gatsby"
 
 const Wrapper = styled.div`
   margin-top: 32px;
@@ -27,8 +28,15 @@ const Information = styled.div`
 `
 
 const Author = styled.span`
-  font-weight: 700;
-  color: ${props => props.theme.colors.text};
+  & > a {
+    font-weight: 700;
+    color: ${props => props.theme.colors.text};
+    text-decoration: none;
+  }
+
+  & > a:hover {
+    text-decoration: underline;
+  }
 `
 
 const Date = styled.span`
@@ -41,7 +49,9 @@ const Header = ({ title, date, tags, minToRead }) => {
     <Wrapper>
       <ArticleTitle> {title} </ArticleTitle>
       <Information>
-        <Author> @{author} </Author>
+        <Author>
+          <Link to="/about">@{author}</Link>
+        </Author>
         <Date>· {date} </Date>
         <Date>· {minToRead} min read </Date>
       </Information>

src/components/Tab/index.jsx

@@ -0,0 +1,83 @@
+import React from "react"
+import styled from "styled-components"
+
+import { Link } from "gatsby"
+
+import Divider from "components/Divider"
+
+import { useAbout } from "../../../blog-config"
+
+const TabWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  border-bottom: 1px solid ${props => props.theme.colors.divider};
+  margin-top: 35px;
+  margin-bottom: 48px;
+
+  & a {
+    text-decoration: none;
+  }
+`
+
+const TabButton = styled.button`
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 43px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid;
+  border-bottom-color: ${props =>
+    props.active ? props.theme.colors.text : "transparent"};
+  font-size: 14px;
+  color: ${props =>
+    props.active ? props.theme.colors.text : props.theme.colors.tertiaryText};
+  font-weight: ${props => (props.active ? "bold" : "normal")};
+  letter-spacing: 1px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    color: ${props => props.theme.colors.text};
+    border-bottom-color: ${props =>
+      props.active ? props.theme.colors.text : props.theme.colors.divider};
+  }
+
+  & svg {
+    margin-right: 10px;
+    height: 20px;
+  }
+`
+
+const Badge = styled.span`
+  display: inline-block;
+  margin-left: 7px;
+  padding: 3px 6px;
+  border-radius: 50px;
+  background-color: ${props => props.theme.colors.tagBackground};
+  color: ${props => props.theme.colors.tagText};
+  font-weight: normal;
+  font-size: 13px;
+  letter-spacing: 0.3px;
+  transition: all 0.2s;
+`
+
+const Tab = ({ postsCount, activeTab }) => {
+  if (!useAbout) return <Divider />
+
+  return (
+    <TabWrapper>
+      <Link to="/">
+        <TabButton active={activeTab == "posts"}>
+          POSTS <Badge>{postsCount}</Badge>
+        </TabButton>
+      </Link>
+      <Link to="/about">
+        <TabButton active={activeTab == "about"}>ABOUT</TabButton>
+      </Link>
+    </TabWrapper>
+  )
+}
+
+export default Tab

src/pages/about.jsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+import Layout from "components/Layout"
+import SEO from "components/SEO"
+import Bio from "components/Bio"
+import VerticalSpace from "components/VerticalSpace"
+import Article from "components/Article"
+import Comment from "components/Article/Footer/Comment"
+import Tab from "components/Tab"
+
+import NotFoundPage from "pages/404"
+
+import styled from "styled-components"
+
+import { title, description, siteUrl, useAbout } from "../../blog-config"
+import Divider from "components/Divider"
+
+const ArticleTitle = styled.h1`
+  margin-bottom: 30px;
+  line-height: 1.2;
+  font-size: 32px;
+  font-weight: 700;
+  color: ${props => props.theme.colors.text};
+`
+
+const Wrapper = styled.div`
+  @media (max-width: 768px) {
+    padding: 0 15px;
+  }
+`
+
+const BlogIndex = ({ data }) => {
+  const aboutPost = data.markdownRemark
+  const postsCount = data.allMarkdownRemark.totalCount
+
+  if (!useAbout) return <NotFoundPage />
+
+  return (
+    <Layout>
+      <SEO title={title} description={description} url={siteUrl} />
+      <VerticalSpace size={48} />
+      <Bio />
+      <Tab postsCount={postsCount} activeTab="about" />
+      <Article>
+        <Wrapper>
+          <ArticleTitle>{aboutPost.frontmatter.title}</ArticleTitle>
+        </Wrapper>
+        <Article.Body html={aboutPost.html} hideToc />
+        <Wrapper>
+          <Divider />
+          <Comment />
+        </Wrapper>
+      </Article>
+    </Layout>
+  )
+}
+
+export default BlogIndex
+
+export const pageQuery = graphql`
+  query {
+    markdownRemark(fileAbsolutePath: { regex: "/contents/about/" }) {
+      html
+      frontmatter {
+        title
+      }
+    }
+    allMarkdownRemark(
+      filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
+    ) {
+      totalCount
+    }
+  }
+`

src/pages/index.jsx

@@ -7,8 +7,8 @@ import SEO from "components/SEO"
 import Bio from "components/Bio"
 import PostList from "components/PostList"
 import SideTagList from "components/SideTagList"
-import Divider from "components/Divider"
 import VerticalSpace from "components/VerticalSpace"
+import Tab from "components/Tab"
 
 import { title, description, siteUrl } from "../../blog-config"
 
@@ -31,7 +31,7 @@ const BlogIndex = ({ data }) => {
       <SEO title={title} description={description} url={siteUrl} />
       <VerticalSpace size={48} />
       <Bio />
-      <Divider />
+      <Tab postsCount={posts.length} activeTab="posts" />
       <SideTagList tags={tags} postCount={posts.length} />
       <PostList postList={posts} />
     </Layout>
@@ -47,7 +47,10 @@ export const pageQuery = graphql`
         title
       }
     }
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
+    ) {
       group(field: frontmatter___tags) {
         fieldValue
         totalCount
@@ -61,7 +64,6 @@ export const pageQuery = graphql`
           date(formatString: "MMMM DD, YYYY")
           update(formatString: "MMM DD, YYYY")
           title
-          description
           tags
         }
       }

src/pages/search.jsx

@@ -59,7 +59,10 @@ export default Search
 
 export const pageQuery = graphql`
   query {
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
+    ) {
       nodes {
         excerpt(pruneLength: 200, truncate: true)
         fields {

src/pages/series.jsx

@@ -64,7 +64,10 @@ export const pageQuery = graphql`
         title
       }
     }
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
+    ) {
       group(field: frontmatter___tags) {
         fieldValue
         totalCount

src/pages/tags.jsx

@@ -98,7 +98,10 @@ export const pageQuery = graphql`
         title
       }
     }
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { fileAbsolutePath: { regex: "/contents/posts/" } }
+    ) {
       group(field: frontmatter___tags) {
         fieldValue
         totalCount