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`, resolve: `gatsby-transformer-remark`,
options: { options: {
excerpt_separator: `<!-- end -->` excerpt_separator: `\n`
} }
}, },
{ {

View File

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

View File

@ -1,12 +1,24 @@
import React from "react" import React from "react"
import { Link } from "gatsby" import { Link } from "gatsby"
import styles from '../styles/post-link.module.scss'
const PostLink = ({ post }) => ( const PostLink = ({ post }) => {
<div>
<Link to={post.frontmatter.slug}> const postDate = new Date(post.frontmatter.date)
{post.frontmatter.title} ({post.frontmatter.date}) const options = { year: 'numeric', month: 'long', day: 'numeric' };
</Link> const postDateString = postDate.toLocaleDateString('en', options);
</div>
) 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 export default PostLink

View File

@ -10,7 +10,10 @@ const IndexPage = () => {
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
query { query {
allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) { allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: {frontmatter: {draft: {ne: true}}}
) {
edges { edges {
node { node {
id id
@ -18,7 +21,6 @@ const IndexPage = () => {
frontmatter { frontmatter {
date date
title title
slug
} }
} }
} }
@ -30,9 +32,6 @@ const IndexPage = () => {
return ( return (
<Layout title="Home"> <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}/> <Blog edges={data.allMarkdownRemark.edges}/>
</Layout> </Layout>
) )

View File

@ -5,8 +5,8 @@
margin: 0 auto; margin: 0 auto;
@media only screen and (min-width: $breakLarge) { @media only screen and (min-width: $breakLarge) {
width: 80%;
display: flex; display: flex;
width: 80%;
} }
} }
@ -15,4 +15,8 @@
min-height: calc(100vh - 70px); min-height: calc(100vh - 70px);
flex-direction: column; flex-direction: column;
justify-content: space-between; 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;
}