Post list layout

This commit is contained in:
LordMathis 2020-09-28 20:30:49 +02:00
parent 33d74d6392
commit efe7c7ca30
6 changed files with 61 additions and 15 deletions

View File

@ -31,7 +31,7 @@ module.exports = {
{
resolve: `gatsby-transformer-remark`,
options: {
excerpt_separator: `<!-- end -->`
excerpt_separator: `\n`
}
},
{

View File

@ -38,7 +38,7 @@ const Layout = ({ children, title }) => {
email={data.site.siteMetadata.email} />
<div className={styles.flexWrapper}>
<div className={styles.content}>
<main>{children}</main>
<main className={styles.main}>{children}</main>
</div>
<Footer authorName={data.site.siteMetadata.author}/>
</div>

View File

@ -1,12 +1,24 @@
import React from "react"
import { Link } from "gatsby"
import styles from '../styles/post-link.module.scss'
const PostLink = ({ post }) => (
<div>
<Link to={post.frontmatter.slug}>
{post.frontmatter.title} ({post.frontmatter.date})
</Link>
const PostLink = ({ post }) => {
const postDate = new Date(post.frontmatter.date)
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const postDateString = postDate.toLocaleDateString('en', options);
return (
<div className={styles.postListItem} role="listitem">
<div className={styles.postHeader} >
<a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
<span className={styles.postDate}>{postDateString}</span>
</div>
)
<div>
<p>{post.excerpt}</p>
</div>
</div>
)
}
export default PostLink

View File

@ -10,7 +10,10 @@ const IndexPage = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: {frontmatter: {draft: {ne: true}}}
) {
edges {
node {
id
@ -18,7 +21,6 @@ const IndexPage = () => {
frontmatter {
date
title
slug
}
}
}
@ -30,9 +32,6 @@ const IndexPage = () => {
return (
<Layout title="Home">
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<Blog edges={data.allMarkdownRemark.edges}/>
</Layout>
)

View File

@ -5,8 +5,8 @@
margin: 0 auto;
@media only screen and (min-width: $breakLarge) {
width: 80%;
display: flex;
width: 80%;
}
}
@ -16,3 +16,7 @@
flex-direction: column;
justify-content: space-between;
}
.main {
width: 100%;
}

View File

@ -0,0 +1,31 @@
@import "./variables.scss";
.postDate {
float: right;
}
.postTitle {
color: $blue;
text-decoration: none;
text-transform: capitalize;
font-family: $fontParagraph;
font-size: 1.2em;
float: left;
}
.postHeader {
overflow: hidden;
}
.postsList {
margin-top: 20px;
}
.postListItem {
border-bottom: 1px solid $blue;
}
.headerContainer {
display: flex;
justify-content: space-between;
}