blog posts get urls
This commit is contained in:
parent
1c779d2110
commit
23b0a146eb
|
@ -4,4 +4,4 @@ date: '1970-01-01T22:45:00-01:00'
|
|||
description: 'testing the log posts'
|
||||
---
|
||||
|
||||
# This is a test
|
||||
Hello
|
|
@ -1,11 +1,13 @@
|
|||
const path = require(`path`)
|
||||
const { createFilePath } = require(`gatsby-source-filesystem`)
|
||||
|
||||
exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
const { createPage } = actions
|
||||
|
||||
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" } } }) {
|
||||
edges {
|
||||
|
@ -20,31 +22,70 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
|||
}
|
||||
}
|
||||
`)
|
||||
|
||||
// Handle errors
|
||||
if (result.errors) {
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
||||
if (pages.errors) {
|
||||
reporter.panicOnBuild(`Error while running pages GraphQL query.`)
|
||||
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({
|
||||
path: node.frontmatter.path,
|
||||
component: siteTemplate,
|
||||
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 }) => {
|
||||
const { createNodeField } = actions
|
||||
|
||||
if (node.internal.type === `Mdx`) {
|
||||
const value = getNode(node.parent).sourceInstanceName
|
||||
const source = getNode(node.parent).sourceInstanceName
|
||||
createNodeField({
|
||||
node,
|
||||
name: `source`,
|
||||
value,
|
||||
value: source,
|
||||
})
|
||||
const path = createFilePath({ node, getNode })
|
||||
createNodeField({
|
||||
node,
|
||||
name: `slug`,
|
||||
value: path,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react"
|
||||
import Nav from "../components/nav"
|
||||
import Footer from "../components/footer"
|
||||
import layoutStyles from "./layout.module.css"
|
||||
import React from 'react'
|
||||
import Nav from '../components/nav'
|
||||
import Footer from '../components/footer'
|
||||
import layoutStyles from './layout.module.css'
|
||||
|
||||
export default ({ path, editLink, children }) => (
|
||||
<>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
Loading…
Reference in New Issue