add post dates to title

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

@@ -6,7 +6,7 @@
 
 .hentry__title {
   margin-top: 0;
-  margin-bottom: $spacer;
+  margin-bottom: $spacer / $line-height;
 }
 
 .hentry__title__link {
@@ -32,3 +32,10 @@
   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,17 +2,22 @@ import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import styles from './Title.module.scss'
 import Icon from '../../atoms/Icon'
+import Time from '../../atoms/Time'
 
 export default function PostTitle({
   type,
   slug,
   linkurl,
-  title
+  title,
+  date,
+  updated
 }: {
   type?: string
   slug?: string
   linkurl?: string
   title: string
+  date: string
+  updated?: string
 }): ReactElement {
   const linkHostname = linkurl ? new URL(linkurl).hostname : null
 
@@ -32,6 +37,14 @@ export default function PostTitle({
       <Link to={slug}>{title}</Link>
     </h1>
   ) : (
-    <h1 className={styles.hentry__title}>{title}</h1>
+    <>
+      <h1 className={styles.hentry__title}>{title}</h1>
+      <div className={styles.time}>
+        {updated && 'published '}
+        <Time date={date} />
+        {updated && ' • updated '}
+        {updated && <Time date={updated} />}
+      </div>
+    </>
   )
 }

src/components/templates/Post/index.tsx

@@ -27,8 +27,8 @@ export default function Post({
   }
 }): ReactElement {
   const { post } = data
-  const { title, image, type, linkurl, style, tags } = post.frontmatter
+  const { title, image, type, linkurl, style, tags, updated } = post.frontmatter
-  const { slug, githubLink } = post.fields
+  const { slug, githubLink, date } = post.fields
 
   return (
     <>
@@ -40,7 +40,13 @@ export default function Post({
 
       <article className={styles.hentry}>
         <header>
-          <PostTitle type={type} linkurl={linkurl} title={title} />
+          <PostTitle
+            type={type}
+            linkurl={linkurl}
+            title={title}
+            date={date}
+            updated={updated}
+          />
           {type === 'post' && <PostLead post={post} />}
         </header>