refactor

gatsby/createPages.js

@@ -47,90 +47,51 @@ exports.generatePostPages = (createPage, posts) => {
   })
 }
 
+function generateIndexPages(createPage, length, slug, template) {
+  const numPages = Math.ceil(length / itemsPerPage)
+
+  Array.from({ length: numPages }).forEach((_, i) => {
+    const { prevPagePath, nextPagePath, path } = getPaginationData(
+      i,
+      numPages,
+      slug
+    )
+
+    createPage({
+      path,
+      component: template,
+      context: {
+        slug,
+        limit: itemsPerPage,
+        skip: i * itemsPerPage,
+        numPages: numPages,
+        currentPageNumber: i + 1,
+        prevPagePath,
+        nextPagePath
+      }
+    })
+  })
+}
+
+// Create paginated archive pages
 exports.generateArchivePages = (createPage, archiveLength) => {
-  // Create paginated archive pages
-  const numPagesArchive = Math.ceil(archiveLength / itemsPerPage)
-  const slugArchive = `/archive/`
-
-  Array.from({ length: numPagesArchive }).forEach((_, i) => {
-    const { prevPagePath, nextPagePath, path } = getPaginationData(
-      i,
-      numPagesArchive,
-      slugArchive
-    )
-
-    createPage({
-      path,
-      component: archiveTemplate,
-      context: {
-        slug: slugArchive,
-        limit: itemsPerPage,
-        skip: i * itemsPerPage,
-        numPages: numPagesArchive,
-        currentPageNumber: i + 1,
-        prevPagePath,
-        nextPagePath
-      }
-    })
-  })
+  generateIndexPages(createPage, archiveLength, `/archive/`, archiveTemplate)
 }
 
+// Create paginated photos pages
 exports.generatePhotosPages = (createPage, photosLength) => {
-  // Create paginated photos pages
-  const numPagesPhotos = Math.ceil(photosLength / itemsPerPage)
-  const slugPhotos = `/photos/`
-
-  Array.from({ length: numPagesPhotos }).forEach((_, i) => {
-    const { prevPagePath, nextPagePath, path } = getPaginationData(
-      i,
-      numPagesPhotos,
-      slugPhotos
-    )
-
-    createPage({
-      path,
-      component: photosTemplate,
-      context: {
-        slug: slugPhotos,
-        limit: itemsPerPage,
-        skip: i * itemsPerPage,
-        numPages: numPagesPhotos,
-        currentPageNumber: i + 1,
-        prevPagePath,
-        nextPagePath
-      }
-    })
-  })
+  generateIndexPages(createPage, photosLength, `/photos/`, photosTemplate)
 }
 
+// Create paginated tag pages
 exports.generateTagPages = (createPage, tags) => {
   tags.forEach(({ tag, totalCount }) => {
-    // Create paginated tag pages
-    const numPages = Math.ceil(totalCount / itemsPerPage)
-    const slug = `/archive/${tag}/`
-
-    Array.from({ length: numPages }).forEach((_, i) => {
-      const { prevPagePath, nextPagePath, path } = getPaginationData(
-        i,
-        numPages,
-        slug
-      )
-
-      createPage({
-        path,
-        component: archiveTemplate,
-        context: {
-          tag,
-          slug,
-          limit: itemsPerPage,
-          skip: i * itemsPerPage,
-          numPages,
-          currentPageNumber: i + 1,
-          prevPagePath,
-          nextPagePath
-        }
-      })
-    })
+    generateIndexPages(
+      createPage,
+      totalCount,
+      `/archive/${tag}/`,
+      archiveTemplate
+    )
   })
 }
 

src/components/molecules/PostDate.module.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+
+.time {
+  font-style: italic;
+  font-size: $font-size-small;
+  color: $text-color-light;
+  margin-bottom: $spacer / $line-height;
+}

src/components/molecules/PostDate.tsx

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react'
+import Time from '../atoms/Time'
+import styles from './PostDate.module.scss'
+
+export default function PostDate({
+  date,
+  updated
+}: {
+  date: string
+  updated?: string
+}): ReactElement {
+  return (
+    <div className={styles.time}>
+      <Time date={date} />
+      {updated && ' • updated '}
+      {updated && <Time date={updated} />}
+    </div>
+  )
+}

src/components/molecules/PostTeaser.tsx

@@ -5,6 +5,7 @@ import { Post } from '../../@types/Post'
 import PostTitle from '../templates/Post/Title'
 import styles from './PostTeaser.module.scss'
 import Time from '../atoms/Time'
+import PostDate from './PostDate'
 
 export const postTeaserQuery = graphql`
   fragment PostTeaser on MarkdownRemark {
@@ -58,13 +59,7 @@ export default function PostTeaser({
       )}
 
       <PostTitle slug={slug} title={title} className={styles.title} />
-      {date && !hideDate && (
-        <div className={styles.time}>
-          <Time date={date} />
-          {updated && ' • updated '}
-          {updated && <Time date={updated} />}
-        </div>
-      )}
+      {date && !hideDate && <PostDate date={date} updated={updated} />}
     </Link>
   )
 }

src/components/templates/Post/Meta.module.scss

@@ -7,32 +7,18 @@
   font-size: $font-size-small;
   margin-top: $spacer * 2;
   color: $brand-grey-light;
-}
-
-.byline,
-.time,
-.tags,
-.categories {
   text-align: center;
 }
 
-.byline,
-.time {
-  font-style: italic;
-}
-
 .byline {
   margin-bottom: 0;
+  font-style: italic;
 }
 
 .by {
   display: block;
 }
 
-.time {
-  margin-bottom: $spacer * 2;
-}
-
 // Types & Tags
 /////////////////////////////////////
 

src/components/templates/Post/Meta.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import slugify from 'slugify'
-import Time from '../../atoms/Time'
 import Tag from '../../atoms/Tag'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
 import styles from './Meta.module.scss'
 import { Post } from '../../../@types/Post'
 import shortid from 'shortid'
+import PostDate from '../../molecules/PostDate'
 
 export default function PostMeta({ post }: { post: Post }): ReactElement {
   const siteMeta = useSiteMetadata()
@@ -22,12 +22,7 @@ export default function PostMeta({ post }: { post: Post }): ReactElement {
         </a>
       </div>
 
-      <div className={styles.time}>
-        {updated && 'published '}
-        <Time date={date} />
-        {updated && ' • updated '}
-        {updated && <Time date={updated} />}
-      </div>
+      <PostDate date={date} updated={updated} />
 
       {type && type === 'photo' && (
         <div className={styles.type}>

src/components/templates/Post/Title.module.scss

@@ -32,10 +32,3 @@
   margin-top: -($spacer);
   margin-bottom: $spacer;
 }
-
-.time {
-  font-style: italic;
-  font-size: $font-size-small;
-  color: $text-color-light;
-  margin-bottom: $spacer / $line-height;
-}

src/components/templates/Post/Title.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import styles from './Title.module.scss'
 import Icon from '../../atoms/Icon'
 import Time from '../../atoms/Time'
+import PostDate from '../../molecules/PostDate'
 
 export default function PostTitle({
   slug,
@@ -42,14 +43,7 @@ export default function PostTitle({
       <h1 className={`${styles.hentry__title} ${className && className}`}>
         {title}
       </h1>
-      {date && (
-        <div className={styles.time}>
-          {updated && 'published '}
-          <Time date={date} />
-          {updated && ' • updated '}
-          {updated && <Time date={updated} />}
-        </div>
-      )}
+      {date && <PostDate date={date} updated={updated} />}
     </>
   )
 }