senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add author and date to blog posts, stylistic changes, graphql changes

Browse Source
This commit is contained in:
Morris
2018-10-03 20:14:31 +02:00
parent bf9bf50de1
commit 4009a5ec48
6 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Card.js
View File

@@ -21,6 +21,12 @@ const Card = ({ ...props }) => (
<h3 className="text-black font-medium text-center text-xl"> <h3 className="text-black font-medium text-center text-xl">
{props.title} {props.title}
</h3> </h3>
<div className="flex mx-auto justify-center text-black mt-1 opacity-70">
{props.authorName && <address className="author text-sm m-1 font-bold roman author-name">{props.authorName}</address> }
{props.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{props.date}</time> }
</div>
{props.subtitle && ( {props.subtitle && (
<span className="text-sm font-medium text-black pt-1 opacity-70"> <span className="text-sm font-medium text-black pt-1 opacity-70">
{props.subtitle} {props.subtitle}

4
src/components/PageIntro.js
View File

@@ -29,11 +29,11 @@ class PageIntro extends Component {
value: 47, value: 47,
density: { density: {
enable: true, enable: true,
value_area: 5000 value_area: 4444
} }
}, },
size: { size: {
value: 1.47 value: 1.77
}, },
color: { color: {
value: "#5763ab" value: "#5763ab"

5
src/pages/index.js
View File

@@ -187,6 +187,7 @@ const IndexPage = ({ ...props }) => (
url={`blog/${node.slug}`} url={`blog/${node.slug}`}
title={node.title} title={node.title}
date={node.date} date={node.date}
authorName={node.author.name}
imgAlt={node.title} imgAlt={node.title}
excerpt={node.excerpt} excerpt={node.excerpt}
image={ image={
@@ -218,6 +219,10 @@ export const query = graphql`
node { node {
id id
title title
author {
id
name
}
excerpt excerpt
status status
slug slug

7
src/styles/general.css
View File

@@ -230,4 +230,11 @@ a {
.crisp-client .crisp-1rjpbb7 .crisp-1rf4xdh .crisp-ewasyx .crisp-zyxrmn .crisp-1bu0ive .crisp-1uswakw { .crisp-client .crisp-1rjpbb7 .crisp-1rf4xdh .crisp-ewasyx .crisp-zyxrmn .crisp-1bu0ive .crisp-1uswakw {
display: none !important; display: none !important;
}
@media (min-width: 310px) {
.author-name::before {
content: "by ";
font-weight: normal;
}
} }

4
src/templates/blog.js
View File

@@ -39,6 +39,7 @@ class Blog extends Component {
<Card <Card
title={node.title} title={node.title}
date={node.date} date={node.date}
authorName={node.author.name}
imgAlt={node.title} imgAlt={node.title}
excerpt={node.excerpt} excerpt={node.excerpt}
image={ image={
@@ -76,6 +77,9 @@ export const query = graphql`
excerpt excerpt
status status
slug slug
author {
name
}
date(formatString: "MMMM DD, YYYY") date(formatString: "MMMM DD, YYYY")
featured_media { featured_media {
localFile { localFile {

16
src/templates/post-default.js
View File

@@ -33,16 +33,23 @@ class PostDefault extends Component {
> >
<html lang="en" /> <html lang="en" />
</Helmet> </Helmet>
<main className="container mx-auto p-4 max-w-lg sm:p-10"> <div className="text-center">
<img <img
className="w-full rounded" className="w-full container mx-auto mt-10 rounded"
src={ src={
data.wordpressPost.featured_media data.wordpressPost.featured_media
? data.wordpressPost.featured_media.source_url ? data.wordpressPost.featured_media.source_url
: '' : ''
} }
/> />
<h1 className="mt-4">{data.wordpressPost.title}</h1> </div>
<main className="container mx-auto p-4 max-w-lg sm:px-10">
<h1 className="mt-4">{data.wordpressPost.title}</h1>
<div className="flex mx-auto text-black mt-1 opacity-70">
{data.wordpressPost.author.name && <address className="author text-sm m-1 font-bold roman author-name">{data.wordpressPost.author.name}</address> }
{data.wordpressPost.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{data.wordpressPost.date}</time> }
</div>
<div <div
className="leading-normal blog-post font-serif" className="leading-normal blog-post font-serif"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@@ -61,6 +68,9 @@ export const query = graphql`
title title
slug slug
content content
author {
name
}
date(formatString: "MMMM DD, YYYY") date(formatString: "MMMM DD, YYYY")
featured_media { featured_media {
source_url source_url