website/src/templates/notes.tsx

65 lines
1.7 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 backElement = null;
if (currentPage === 2) {
backElement = <a href={rootPath}>&lt;&lt;</a>;
} else if (currentPage !== 1) {
backElement = <a href={rootPath + '/' + (currentPage - 1)}>&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>
)
})}
<div>
{backElement}
<p>{currentPage}</p>
{currentPage !== numPages ? <a href={rootPath + '/' + (currentPage + 1)}>&gt;&gt;</a> : ''}
</div>
</>
)
}
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
}
}
}
}
`