Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React from "react";
import { graphql, Link, withPrefix } from "gatsby";
import SEO from "@/components/SEO";
import Sidebar from "@/components/Sidebar";
import * as style from "./period-summary.module.scss";
import config from "@/config/index.json";
const PeriodSummary = ({
data,
pageContext,
}: {
data: GatsbyTypes.PeriodQueryQuery;
pageContext: { displayMonth: string; displayYear: string };
}) => {
const { displayMonth, displayYear } = pageContext;
const { edges, totalCount } = data.allMarkdownRemark;
let title;
let url;
if (displayMonth == null) {
title = `${displayYear}年の記事 (${totalCount}件)`;
url = `https://tubone-project24.xyz/${displayYear}/`;
} else {
title = `${displayYear}年${displayMonth}月の記事 (${totalCount}件)`;
url = `https://tubone-project24.xyz/${displayYear}/${displayMonth}`;
}
return (
<div className="container">
<div className={style.row + " row"}>
<Sidebar />
<div className={style.period + " col order-2"}>
<h2>{title}</h2>
<ul>
{edges.map(({ node }) => {
const frontmatter = node.frontmatter;
return (
<li key={frontmatter?.url}>
{frontmatter?.yyyymmdd}
<Link
to={withPrefix(frontmatter?.url || "/")}
title={frontmatter?.title}
>
{frontmatter?.title}
</Link>
</li>
);
})}
</ul>
</div>
<div className="col-xl-2 col-lg-1 order-3" />
</div>
<SEO
title={title}
url={url}
siteTitleAlt={config.siteTitle}
isPost={false}
description={title}
tag=""
image="https://i.imgur.com/StLyXdu.png"
/>
</div>
);
};
export default PeriodSummary;
export const pageQuery = graphql`
query PeriodQuery($periodStartDate: Date, $periodEndDate: Date) {
allMarkdownRemark(
sort: { order: DESC, fields: frontmatter___date }
filter: {
frontmatter: { date: { gte: $periodStartDate, lt: $periodEndDate } }
}
) {
totalCount
edges {
node {
id
frontmatter {
id
url: slug
title
date
yyyymmdd: date(formatString: "YYYY-MM-DD")
tags
headerImage
description
}
}
}
}
}
`;
|