55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import {graphql, PageProps, Link} from "gatsby";
|
|
import {Query } from '../../graphql-types';
|
|
import Layout from '../components/Layout';
|
|
import Helmet from 'react-helmet';
|
|
|
|
const Blog: React.FC<PageProps<Query>> = (props) => {
|
|
const remark = props.data?.allMarkdownRemark?.edges;
|
|
|
|
const links = remark.map(edge => {
|
|
return (
|
|
<li key={edge.node.frontmatter.slug}>
|
|
<Link to={`/blog/${edge.node.frontmatter.slug}`} className="no-underline">
|
|
<span className="underline">
|
|
{edge.node.frontmatter.title}
|
|
</span>
|
|
<span className="text-gray-300 text-sm">
|
|
<> - </>
|
|
<span>{edge.node.frontmatter.date}</span>
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<Layout>
|
|
<Helmet><title>Blog</title></Helmet>
|
|
<h1 className="mb-4">Blog</h1>
|
|
<ul>
|
|
{links}
|
|
</ul>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Blog;
|
|
|
|
export const pageQuery = graphql`
|
|
query {
|
|
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
|
|
edges {
|
|
node {
|
|
id
|
|
frontmatter {
|
|
date(formatString: "MMMM DD, YYYY")
|
|
slug
|
|
title
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|