refactor: 포스트에서 생성일 대신 발행일 표기하도록 변경 (#68)

Signed-off-by: chayeoi <[email protected]>

Author: chayeoi

gatsby-config.js

@@ -70,7 +70,7 @@ module.exports = {
           {
             serialize: ({ query: { site, allMdx } }) => allMdx.edges.map(edge => Object.assign({}, edge.node.frontmatter, {
               description: edge.node.frontmatter.description,
-              date: edge.node.frontmatter.createdAt,
+              date: edge.node.frontmatter.publishedAt,
               url: site.siteMetadata.siteUrl + edge.node.fields.slug,
               guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
               custom_elements: [{ 'content:encoded': edge.node.html }],
@@ -79,13 +79,13 @@ module.exports = {
               {
                 allMdx(
                   limit: 1000,
-                  sort: { fields: [frontmatter___createdAt], order: DESC }
+                  sort: { fields: [frontmatter___publishedAt], order: DESC }
                 ) {
                   edges {
                     node {
                       html
                       frontmatter {
-                        createdAt
+                        publishedAt
                         title
                         description
                         tags

gatsby-node.js

@@ -24,7 +24,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
   const result = await graphql(`
     query {
-      allMdx(sort: { fields: [frontmatter___createdAt], order: DESC }) {
+      allMdx(sort: { fields: [frontmatter___publishedAt], order: DESC }) {
         edges {
           node {
             id

src/components/post-header.tsx

@@ -15,7 +15,7 @@ interface Props {
   frontmatter: {
     title: string;
     description: string;
-    createdAt: string;
+    publishedAt: string;
     updatedAt: string;
     tags: string[];
     cover?: {
@@ -43,11 +43,11 @@ const PostHeader: React.FC<Props> = ({ frontmatter, tableOfContents }) => {
     title,
     description,
     updatedAt,
-    createdAt,
+    publishedAt,
     cover,
   } = frontmatter
 
-  const isModified = updatedAt && createdAt !== updatedAt
+  const isModified = updatedAt && publishedAt !== updatedAt
   const hasCover = Boolean(cover)
 
   const toc = useMemo(() => getTocCreator()(tableOfContents.items, 3), [tableOfContents.items])
@@ -61,8 +61,8 @@ const PostHeader: React.FC<Props> = ({ frontmatter, tableOfContents }) => {
         </p>
         <ul css={s.dateList}>
           <li>
-            <time dateTime={createdAt}>
-              {dayjs(createdAt).format('YYYY년 MM월 DD일')}
+            <time dateTime={publishedAt}>
+              {dayjs(publishedAt).format('YYYY년 MM월 DD일')}
             </time>
             {isModified && (
               <span>

src/components/post-item.tsx

@@ -21,8 +21,8 @@ const PostItem: React.FC<Props> = ({ post }) => {
         <h3 css={s.heading}>
           {post.node.frontmatter.title}
         </h3>
-        <time css={s.createdAt} dateTime={post.node.frontmatter.createdAt}>
-          {dayjs(post.node.frontmatter.createdAt).format('YYYY년 MM월 DD일')}
+        <time css={s.publishedAt} dateTime={post.node.frontmatter.publishedAt}>
+          {dayjs(post.node.frontmatter.publishedAt).format('YYYY년 MM월 DD일')}
         </time>
         <p css={s.description}>{post.node.frontmatter.description}</p>
         <div
@@ -78,7 +78,7 @@ const s = {
     font-weight: 700;
     line-height: 1.2;
   `,
-  createdAt: (theme: Theme): SerializedStyles => css`
+  publishedAt: (theme: Theme): SerializedStyles => css`
     display: block;
     margin-bottom: 0.5rem;
     color: ${theme.palette.text.tertiary};

src/models/Mdx.ts

@@ -5,7 +5,7 @@ export interface Mdx {
       title: string;
       description: string;
       tags?: string[];
-      createdAt: string;
+      publishedAt: string;
       updatedAt?: string;
       cover?: {
         publicURL: string;

src/pages/index.tsx

@@ -76,15 +76,15 @@ export const query = graphql`
         title
       }
     }
-    allMdx(sort: { fields: [frontmatter___createdAt], order: DESC }) {
+    allMdx(sort: { fields: [frontmatter___publishedAt], order: DESC }) {
       edges {
         node {
           id
           frontmatter {
             title
             description
             tags
-            createdAt
+            publishedAt
             updatedAt
             cover {
               publicURL

src/posts/applying-api-cache-using-axios/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Axios를 활용하여 API 캐시 적용하기
 description: API 캐시는 어떻게 구현할 수 있을까?
-createdAt: 2019-09-14 00:00:00
+publishedAt: 2019-09-14 00:00:00
 updatedAt: 2019-09-14 00:00:00
 tags: [Javascript, 캐시]
 cover: 'cover.jpg'

src/posts/asynchronous-javascript/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: 비동기 Javascript
 description: 비동기 프로그래밍 with Javascript
-createdAt: 2019-01-21 00:00:00
+publishedAt: 2019-01-21 00:00:00
 updatedAt: 2019-01-21 00:00:00
 tags: [Javascript]
 cover: 'cover.jpg'

src/templates/blog-post.tsx

@@ -26,7 +26,7 @@ interface Props {
       frontmatter: {
         title: string;
         description: string;
-        createdAt: string;
+        publishedAt: string;
         updatedAt: string;
         tags: string[];
         cover?: {
@@ -90,7 +90,7 @@ const BlogPost: React.FC<Props> = ({ data, location, pageContext }) => {
     title,
     description,
     updatedAt,
-    createdAt,
+    publishedAt,
     cover,
     tags,
   } = data.mdx.frontmatter
@@ -106,7 +106,7 @@ const BlogPost: React.FC<Props> = ({ data, location, pageContext }) => {
     },
     {
       property: 'article:published_time',
-      content: createdAt,
+      content: publishedAt,
     },
     {
       property: 'article:modified_time',
@@ -116,7 +116,7 @@ const BlogPost: React.FC<Props> = ({ data, location, pageContext }) => {
       name: 'keywords',
       content: _.join(',', tags),
     },
-  ]), [createdAt, tags, updatedAt, data.site.siteMetadata.facebook.author])
+  ]), [publishedAt, tags, updatedAt, data.site.siteMetadata.facebook.author])
 
   return (
     <Layout>
@@ -179,7 +179,7 @@ export const query = graphql`
       frontmatter {
         title
         description
-        createdAt
+        publishedAt
         updatedAt
         tags
         cover {