Compare commits

..

4 commits

Author SHA1 Message Date
c2a99f61c7
style pagination controls 2020-11-27 14:19:33 -05:00
2d7fdae813
random 404 message 2020-11-27 14:08:18 -05:00
333bbb9869
rename moral licenses post 2020-11-27 14:08:06 -05:00
befb798be7
Add pagination for notes 2020-11-27 14:07:44 -05:00
7 changed files with 122 additions and 66 deletions

View file

@ -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 = 10;
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,
}
},
});
});
}
}

View file

@ -1,13 +1,17 @@
import { PageProps } from 'gatsby';
import React from 'react';
import Navbar from "../components/navbar";
export default ({ location }) => {
console.log(location);
return <>
<Navbar />
export default ({ location }: PageProps): JSX.Element => {
const messages = [
<p>
In your attempt to search for <code>{location.pathname}</code>, you seem to
have gotten lost instead. Fret not, for there is always a path <a href="/">home</a>.
</p>
</p>,
<p>Not all who wander are lost, but you seem to be. Go <a href="/">home</a>?</p>
];
return <>
<Navbar />
{messages[Math.floor(Math.random() * messages.length)]}
</>;
};
};

View file

@ -1,4 +0,0 @@
.note-title {
display: flex;
justify-content: space-between;
}

View file

@ -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 <>
<Navbar />
{
posts.map(({ node }) => {
return <article>
<div className={style.noteTitle}>
<h3><a href={`${node.frontmatter.path}`}>{node.frontmatter.title}</a></h3>
<time dateTime={node.frontmatter.date}>{node.frontmatter.date}</time>
</div>
<p>{node.excerpt}</p>
</article>;
})
}
</>;
};
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
}
}
}
}
`;

View file

@ -0,0 +1,12 @@
.note-title {
display: flex;
justify-content: space-between;
}
.prev-page-link {
margin-right: 10px;
}
.next-page-link {
margin-left: 10px;
}

64
src/templates/notes.tsx Normal file
View file

@ -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 prevPageLink = null;
if (currentPage === 2) {
prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>;
} else if (currentPage !== 1) {
prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}>&lt;&lt;</a>;
}
return (
<>
<Navbar />
{posts.map(({ node }) => {
const frontmatter = node.frontmatter
return (
<article key={frontmatter.title}>
<div className={style.noteTitle}>
<h3>
<a href={`${rootPath + '/' + frontmatter.path}`}>{frontmatter.title}</a>
</h3>
<time dateTime={frontmatter.date}>{frontmatter.date}</time>
</div>
<p>{node.excerpt}</p>
</article>
)
})}
<p className={style.paginationNav}>
{prevPageLink}
{currentPage}
{currentPage !== numPages && <a href={rootPath + '/' + (currentPage + 1)} className={style.nextPageLink}>&gt;&gt;</a>}
</p>
</>
)
}
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
}
}
}
}
`