blog posts get urls

This commit is contained in:
neri 2020-03-04 01:56:39 +01:00
parent 1c779d2110
commit 23b0a146eb
4 changed files with 107 additions and 12 deletions

View File

@ -4,4 +4,4 @@ date: '1970-01-01T22:45:00-01:00'
description: 'testing the log posts' description: 'testing the log posts'
--- ---
# This is a test Hello

View File

@ -1,11 +1,13 @@
const path = require(`path`) const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.createPages = async ({ actions, graphql, reporter }) => { exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions const { createPage } = actions
const siteTemplate = path.resolve(`src/templates/siteTemplate.js`) const siteTemplate = path.resolve(`src/templates/siteTemplate.js`)
const blogTemplate = path.resolve(`src/templates/blogTemplate.js`)
const result = await graphql(` const pages = await graphql(`
{ {
allMdx(limit: 1000, filter: { fields: { source: { eq: "pages" } } }) { allMdx(limit: 1000, filter: { fields: { source: { eq: "pages" } } }) {
edges { edges {
@ -20,31 +22,70 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
} }
} }
`) `)
// Handle errors // Handle errors
if (result.errors) { if (pages.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`) reporter.panicOnBuild(`Error while running pages GraphQL query.`)
return return
} }
result.data.allMdx.edges.forEach(({ node }) => { const blogEntries = await graphql(`
{
allMdx(limit: 1000, filter: { fields: { source: { eq: "blog" } } }) {
edges {
node {
fields {
slug
}
frontmatter {
title
date
description
}
}
}
}
}
`)
// Handle errors
if (pages.errors) {
reporter.panicOnBuild(`Error while running blog-entry GraphQL query.`)
return
}
pages.data.allMdx.edges.forEach(({ node }) => {
createPage({ createPage({
path: node.frontmatter.path, path: node.frontmatter.path,
component: siteTemplate, component: siteTemplate,
context: {}, // additional data can be passed via context context: {}, // additional data can be passed via context
}) })
}) })
blogEntries.data.allMdx.edges.forEach(({ node }) => {
console.log(node.fields.slug)
createPage({
path: node.fields.slug,
component: blogTemplate,
context: {
slug: node.fields.slug,
},
})
})
} }
exports.onCreateNode = ({ node, getNode, actions }) => { exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions const { createNodeField } = actions
if (node.internal.type === `Mdx`) { if (node.internal.type === `Mdx`) {
const value = getNode(node.parent).sourceInstanceName const source = getNode(node.parent).sourceInstanceName
createNodeField({ createNodeField({
node, node,
name: `source`, name: `source`,
value, value: source,
})
const path = createFilePath({ node, getNode })
createNodeField({
node,
name: `slug`,
value: path,
}) })
} }
} }

View File

@ -1,7 +1,7 @@
import React from "react" import React from 'react'
import Nav from "../components/nav" import Nav from '../components/nav'
import Footer from "../components/footer" import Footer from '../components/footer'
import layoutStyles from "./layout.module.css" import layoutStyles from './layout.module.css'
export default ({ path, editLink, children }) => ( export default ({ path, editLink, children }) => (
<> <>

View File

@ -0,0 +1,54 @@
import React, { useEffect } from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from '@mdx-js/react'
const MdLeakH1 = props => <h2 {...props}># {props.children}</h2>
const MdLeakH2 = props => <h3 {...props}>## {props.children}</h3>
const MdLeakH3 = props => <h4 {...props}>### {props.children}</h4>
const MdLeakH4 = props => <h5 {...props}>#### {props.children}</h5>
const components = {
h1: MdLeakH1,
h2: MdLeakH2,
h3: MdLeakH3,
h4: MdLeakH4,
}
export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
const {
frontmatter: { title, path },
body,
} = data.mdx
useEffect(() => {
document.title = `ctdo - ${title.toLowerCase()}`
}, [title])
return (
<Layout path={path}>
<MdLeakH1>{title}</MdLeakH1>
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
</Layout>
)
}
export const pageQuery = graphql`
query($slug: String!) {
mdx(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
body
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
}
}
}
`