Make post list items into links

This commit is contained in:
LordMathis 2020-10-03 18:59:03 +02:00
parent 0aede99fd8
commit 790f606a49
3 changed files with 19 additions and 8 deletions

View File

@ -7,17 +7,21 @@ const PostLink = ({ post }) => {
const postDate = new Date(post.frontmatter.date) const postDate = new Date(post.frontmatter.date)
const options = { year: 'numeric', month: 'long', day: 'numeric' }; const options = { year: 'numeric', month: 'long', day: 'numeric' };
const postDateString = postDate.toLocaleDateString('en', options); const postDateString = postDate.toLocaleDateString('en', options);
const postUrl = "/posts/" + post.fileAbsolutePath.split('/').pop().split(".")[0]
return ( return (
<div className={styles.postListItem} role="listitem"> <Link to={postUrl}>
<div className={styles.postHeader} > <div className={styles.postListItem} role="listitem">
<a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a> <div className={styles.postHeader} >
<span className={styles.postDate}>{postDateString}</span> <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
<span className={styles.postDate}>{postDateString}</span>
</div>
<div className={styles.postExcerpt}>
<p>{post.excerpt}</p>
</div>
</div> </div>
<div className={styles.postExcerpt}> </Link>
<p>{post.excerpt}</p>
</div>
</div>
) )
} }

View File

@ -17,6 +17,7 @@ const IndexPage = () => {
edges { edges {
node { node {
id id
fileAbsolutePath
excerpt excerpt
frontmatter { frontmatter {
date date

View File

@ -2,6 +2,7 @@
.postDate { .postDate {
float: right; float: right;
color: $white;
} }
.postTitle { .postTitle {
@ -25,6 +26,11 @@
padding: 20px; padding: 20px;
background-color: $black; background-color: $black;
margin-bottom: 20px; margin-bottom: 20px;
p {
text-decoration: none;
color: $white;
}
} }
.postExcerpt { .postExcerpt {