diff --git a/package.json b/package.json
index eb54d6d..8f0f217 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"dependencies": {
"babel-plugin-styled-components": "^2.0.7",
"babel-preset-gatsby": "^2.24.0",
+ "date-fns": "^2.29.3",
"gatsby": "^4.24.4",
"gatsby-plugin-feed": "^4.24.0",
"gatsby-plugin-google-analytics": "^4.24.0",
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b639bb1..3abe93f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -62,19 +62,9 @@ const Footer = () => (
- made with
-
- Gatsby
-
- +
-
- Netlify
-
- (
source code
- )
);
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index baa72af..aa2430d 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -1,6 +1,6 @@
-import { uesMemo } from "react";
import styled from "styled-components";
import { Link } from "gatsby";
+import { formatDate } from "../utils";
export interface Post {
id: string;
@@ -26,7 +26,7 @@ const PostItem = ({ post }: Props) => {
{post.frontmatter.title}
- {post.frontmatter.date}
+ {formatDate(post.frontmatter.date)}
{post.frontmatter.description}
@@ -78,7 +78,9 @@ const PostTitle = styled.h2`
overflow-wrap: break-word;
`;
-const PublishedDate = styled.small``;
+const PublishedDate = styled.time`
+ font-size: 12px;
+`;
const Description = styled.div`
word-break: keep-all;
diff --git a/src/components/all.scss b/src/components/all.scss
index 0d76f5e..33433bd 100644
--- a/src/components/all.scss
+++ b/src/components/all.scss
@@ -43,10 +43,10 @@ h6 {
a {
cursor: pointer;
- transition: color 0.2s ease;
+ transition: color 0.1s ease;
&:hover {
- color: red;
+ color: $oc-orange-7;
}
}
@@ -55,3 +55,9 @@ ul {
margin: 0;
padding: 0;
}
+
+hr {
+ margin: 48px 0;
+ border: 0;
+ border-top: 1px solid $oc-gray-5;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 265e0f9..c6cdd62 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,8 @@
-import { graphql } from "gatsby";
+import { graphql, Link } from "gatsby";
import styled from "styled-components";
import Layout from "../components/Layout";
import PostItem, { Post, PostList } from "../components/Post";
import PageHelmet from "../components/PageHelmet";
-import GatsbyLink from "gatsby-link";
interface Props {
data: {
@@ -41,7 +40,7 @@ const IndexPage = ({ data }: Props) => {
RSS 피드
를 구독하세요. 저에 대해 궁금하시다면{" "}
- 소개 페이지에 들러보세요.
+ 소개 페이지에 들러보세요.
{/* TODO: 카테고리 */}
@@ -72,7 +71,7 @@ export const pageQuery = graphql`
frontmatter {
title
templateKey
- date(formatString: "MMMM DD, YYYY")
+ date
description
tags
}
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 4711060..76bafd6 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -1,39 +1,44 @@
-import React from "react";
import { graphql, Link } from "gatsby";
import Layout from "../components/Layout";
import Content, { HTMLContent } from "../components/Content";
import styled from "styled-components";
import PageHelmet from "../components/PageHelmet";
-import GatsbyLink from "gatsby-link";
+import { formatDate } from "../utils";
interface Props {
content: any;
contentComponent: any;
description: string;
title: string;
+ date: string;
tags: string[];
}
-export const BlogPostTemplate: React.SFC = ({
+export const BlogPostTemplate = ({
content,
contentComponent,
description,
tags,
title,
-}) => {
+ date,
+}: Props) => {
const PostContent = contentComponent || Content;
return (
{title}
{description}
-
- {tags.map((tag) => (
-
- {`#${tag}`}
-
- ))}
-
+
+ {date}
+ ·
+
+ {tags.map((tag) => (
+
+ {`#${tag}`}
+
+ ))}
+
+
);
@@ -51,11 +56,26 @@ const Title = styled.h1`
const Description = styled.div`
word-break: keep-all;
overflow-wrap: break-word;
- margin-top: 1em;
+ margin-top: 12px;
+`;
+
+const Extra = styled.div`
+ margin: 16px 0;
+
+ display: flex;
+ align-items: center;
+ font-size: 0.75em;
+`;
+
+const PublishedDate = styled.time`
+ display: block;
+`;
+
+const ExtraDivider = styled.div`
+ margin: 0 6px;
`;
const TagList = styled.ul`
- margin-top: 0.5em;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -63,8 +83,6 @@ const TagList = styled.ul`
const Tag = styled.li`
list-style-type: none;
- font-size: 0.75em;
- margin-bottom: 4px;
&:not(:last-child) {
margin-right: 8px;
@@ -82,9 +100,11 @@ interface Post {
};
}
-const BlogPost: React.SFC<{
+const BlogPost = ({
+ data,
+}: {
data: { markdownRemark: Post; previous: Post | null; next: Post | null };
-}> = ({ data }) => {
+}) => {
const { markdownRemark: post, previous, next } = data;
const shareTitle = encodeURIComponent(`「${post.frontmatter.title}」`);
@@ -92,8 +112,6 @@ const BlogPost: React.SFC<{
const url = `https://ahnheejong.name${post.fields.slug}`;
const encodedUrl = encodeURIComponent(url);
- console.log(data);
-
return (
@@ -159,7 +177,7 @@ export const pageQuery = graphql`
slug
}
frontmatter {
- date(formatString: "MMMM DD, YYYY")
+ date
title
description
tags
@@ -196,7 +214,7 @@ const AdjacentArticles = styled.div`
}
`;
-const AdjacentArticle = styled(GatsbyLink)`
+const AdjacentArticle = styled(Link)`
flex: 1 1 50%;
display: flex;
@@ -222,7 +240,11 @@ const AdjacentArticle = styled(GatsbyLink)`
@media screen and (max-width: 800px) {
flex-basis: 100%;
- margin: 6px 0;
+
+ &:first-child,
+ &:last-child {
+ margin: 6px 0;
+ }
}
`;
diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx
index 3a4ffa5..a1bb397 100644
--- a/src/templates/tags.tsx
+++ b/src/templates/tags.tsx
@@ -5,36 +5,34 @@ import PostItem, { PostList } from "../components/Post";
import styled from "styled-components";
import PageHelmet from "../components/PageHelmet";
-class TagRoute extends React.Component {
- render() {
- const { allMarkdownRemark } = this.props.data;
+const TagRoute = ({ data, pageContext }: { data: any; pageContext: any }) => {
+ const { allMarkdownRemark } = data;
- const posts = allMarkdownRemark.edges;
- const tag = this.props.pageContext.tag;
- const totalCount = allMarkdownRemark.totalCount;
+ const posts = allMarkdownRemark.edges;
+ const tag = pageContext.tag;
+ const totalCount = allMarkdownRemark.totalCount;
- return (
-
-
-
-
- {`“${tag}”`}
- {`태그가 달린 글 (총 ${totalCount}편)`}
-
-
- {posts.map(({ node: post }: any) => (
-
- ))}
-
-
-
- );
- }
-}
+ return (
+
+
+
+
+ {`“${tag}”`}
+ {`태그가 달린 글 (총 ${totalCount}편)`}
+
+
+ {posts.map(({ node: post }: any) => (
+
+ ))}
+
+
+
+ );
+};
export default TagRoute;
@@ -53,7 +51,7 @@ export const tagPageQuery = graphql`
slug
}
frontmatter {
- date(formatString: "MMMM DD, YYYY")
+ date
title
description
tags
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..d19807c
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,6 @@
+import { parseISO, format } from "date-fns";
+import ko from "date-fns/locale/ko";
+
+export function formatDate(dateString: string) {
+ return format(parseISO(dateString), "PPP", { locale: ko });
+}
diff --git a/yarn.lock b/yarn.lock
index fda424f..6b628ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6074,7 +6074,7 @@ data-urls@^1.1.0:
whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0"
-date-fns@^2.25.0:
+date-fns@^2.25.0, date-fns@^2.29.3:
version "2.29.3"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==