website/src/templates/notes.tsx

65 lines
1.8 KiB
TypeScript

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
}
}
}
}
`