Make individual page for each blog post

This commit is contained in:
LordMathis 2020-10-04 17:21:54 +02:00
parent 790f606a49
commit f8e2ba3177
7 changed files with 105 additions and 17 deletions

View File

@ -56,8 +56,5 @@ module.exports = {
}, },
}, },
`gatsby-plugin-sass`, `gatsby-plugin-sass`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
], ],
} }

View File

@ -1,7 +1,55 @@
/** const path = require(`path`)
* Implement Gatsby's Node APIs in this file. const { createFilePath } = require(`gatsby-source-filesystem`)
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
// You can delete this file if you're not using it exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
const result = await graphql(
`
{
allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) {
edges {
node {
fields {
slug
}
}
}
}
}
`
)
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
// Create pages for each markdown file.
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
console.log(node);
createPage({
path: `/posts${node.fields.slug}`,
component: blogPostTemplate,
// In your blog post template's graphql query, you can use pagePath
// as a GraphQL variable to query for data from the markdown file.
context: {
slug: node.fields.slug,
},
})
})
}

View File

@ -7,13 +7,13 @@ 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] const postUrl = "/posts" + post.fields.slug
return ( return (
<Link to={postUrl}> <Link to={postUrl}>
<div className={styles.postListItem} role="listitem"> <div className={styles.postListItem} role="listitem">
<div className={styles.postHeader} > <div className={styles.postHeader} >
<a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a> <span className={styles.postTitle}>{post.frontmatter.title}</span>
<span className={styles.postDate}>{postDateString}</span> <span className={styles.postDate}>{postDateString}</span>
</div> </div>
<div className={styles.postExcerpt}> <div className={styles.postExcerpt}>

View File

@ -17,12 +17,14 @@ const IndexPage = () => {
edges { edges {
node { node {
id id
fileAbsolutePath
excerpt excerpt
frontmatter { frontmatter {
date date
title title
} }
fields {
slug
}
} }
} }
} }

View File

@ -0,0 +1,5 @@
@import "./variables.scss";
.blogPostWrapper {
text-align: left;
}

View File

@ -26,18 +26,27 @@
padding: 20px; padding: 20px;
background-color: $black; background-color: $black;
margin-bottom: 20px; margin-bottom: 20px;
p {
text-decoration: none;
color: $white;
}
} }
.postExcerpt { .postExcerpt {
text-align: initial; text-align: initial;
text-decoration: none;
color: $white;
} }
.headerContainer { .headerContainer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.noDecoration {
text-decoration: none;
}
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}

View File

@ -0,0 +1,27 @@
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import styles from "../styles/blog-post.module.scss"
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<div className={styles.blogPostWrapper}>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`