diff --git a/gatsby-node.js b/gatsby-node.js index 5bf20b9..8e3c3c9 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -4,34 +4,55 @@ exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions; const noteTemplate = path.resolve(`src/templates/note.tsx`); - const result = await graphql(`{ - allMdx( - limit: 10, - filter: {fileAbsolutePath: {glob: "**/src/notes/*"}} - ) { - edges { - node { - frontmatter { - path + const result = await graphql(` + { + allMdx( + limit: 10 + filter: { fileAbsolutePath: { glob: "**/src/notes/*" } } + ) { + edges { + node { + frontmatter { + path + } + id } - id } } } - }`); + `); if (result.errors) { reporter.panicOnBuild(`Error while running GraphQL query.`); return; } - result.data.allMdx.edges.forEach(({ node }) => { + const posts = result.data.allMdx.edges; + const postsPerPage = 2; + const numPages = Math.ceil(posts.length / postsPerPage); + const rootPath = "/notes"; + + Array.from({ length: numPages }).forEach((_, i) => { createPage({ - path: `/notes/${node.frontmatter.path}`, + path: rootPath + (i === 0 ? '' : `/${i + 1}`), + component: path.resolve("./src/templates/notes.tsx"), + context: { + limit: postsPerPage, + skip: i * postsPerPage, + numPages, + currentPage: i + 1, + rootPath, + }, + }) + }); + + posts.forEach(({ node }) => { + createPage({ + path: `${rootPath}/${node.frontmatter.path}`, component: noteTemplate, context: { id: node.id, - } + }, }); }); -} \ No newline at end of file +} diff --git a/src/pages/notes.tsx b/src/pages/notes.tsx deleted file mode 100644 index c034916..0000000 --- a/src/pages/notes.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import Navbar from "../components/navbar"; -import { graphql } from "gatsby"; -import style from "./notes.module.css"; - -export default ({ data }) => { - console.log(data); - const posts = data.allMdx.edges; - return <> - - { - posts.map(({ node }) => { - return
-
-

{node.frontmatter.title}

- -
-

{node.excerpt}

-
; - }) - } - ; -}; - -export const query = graphql` -query IndexQuery { - allMdx(sort: {order: ASC, fields: [fileAbsolutePath]}, filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}) { - edges { - node { - excerpt(pruneLength: 250) - frontmatter { - title - date(formatString: "YYYY-MM-DD") - path - } - id - } - } - } -} -`; \ No newline at end of file diff --git a/src/pages/notes.module.css b/src/templates/notes.module.css similarity index 100% rename from src/pages/notes.module.css rename to src/templates/notes.module.css diff --git a/src/templates/notes.tsx b/src/templates/notes.tsx new file mode 100644 index 0000000..8b2a8d6 --- /dev/null +++ b/src/templates/notes.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import Navbar from "../components/navbar"; +import { graphql, PageProps } from "gatsby"; +import style from "./notes.module.css"; + +export default ({ data, pageContext }) => { + const posts = data.allMdx.edges; + const { currentPage, numPages, rootPath } = pageContext; + let backElement = null; + + if (currentPage === 2) { + backElement = <<; + } else if (currentPage !== 1) { + backElement = <<; + } + + return ( + <> + + {posts.map(({ node }) => { + const frontmatter = node.frontmatter + return ( + + ) + })} +
+ {backElement} +

{currentPage}

+ {currentPage !== numPages ? >> : ''} +
+ + ) +} + +export const query = graphql` + query IndexQuery($skip: Int!, $limit: Int!) { + allMdx( + sort: { order: DESC, fields: [frontmatter___date] } + filter: { fileAbsolutePath: { glob: "**/src/notes/*" } } + limit: $limit + skip: $skip + ) { + edges { + node { + excerpt(pruneLength: 250) + frontmatter { + title + date(formatString: "YYYY-MM-DD") + path + } + id + } + } + } + } +`