1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

add post dates to title

This commit is contained in:
Matthias Kretschmann 2020-06-01 16:07:56 +02:00
parent 8840f9d83c
commit 2b60310bdf
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 32 additions and 6 deletions

View File

@ -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;
}

View File

@ -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>
</>
)
}

View File

@ -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({
<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>