diff --git a/src/components/templates/Post/Title.module.scss b/src/components/templates/Post/Title.module.scss index 5908f8ae..b0ebe315 100644 --- a/src/components/templates/Post/Title.module.scss +++ b/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; +} diff --git a/src/components/templates/Post/Title.tsx b/src/components/templates/Post/Title.tsx index 2109e12c..7d5fde92 100644 --- a/src/components/templates/Post/Title.tsx +++ b/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({ {title} ) : ( -

{title}

+ <> +

{title}

+
+ {updated && 'published '} +
+ ) } diff --git a/src/components/templates/Post/index.tsx b/src/components/templates/Post/index.tsx index 7605b586..8529135f 100644 --- a/src/components/templates/Post/index.tsx +++ b/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 { slug, githubLink } = post.fields + const { title, image, type, linkurl, style, tags, updated } = post.frontmatter + const { slug, githubLink, date } = post.fields return ( <> @@ -40,7 +40,13 @@ export default function Post({
- + {type === 'post' && }