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 | 1x 1x 1x 1x 1x 1x | import React from "react";
import { graphql } from "gatsby";
import Card from "@/components/Card";
import SEO from "@/components/SEO";
import Sidebar from "@/components/Sidebar";
import * as style from "./tag.module.scss";
const TagPage = ({
data,
pageContext,
}: {
data: GatsbyTypes.tagQueryQuery;
pageContext: { tag: string };
}) => {
const { edges } = data.allMarkdownRemark;
const { tag } = pageContext;
return (
<div className="container">
<div className={style.tagRow + " row"}>
<Sidebar />
<div className="col order-2">
<div className={style.tagTitle + " col-12"}>
{edges.length}
Articles in
{tag}
</div>
{edges.map(({ node }, index) => (
<Card
{...node.frontmatter}
key={node.id}
title={node.frontmatter?.title || ""}
date={node.frontmatter?.date || ""}
url={node.frontmatter?.url || ""}
headerImage={node.frontmatter?.headerImage || ""}
description={node.frontmatter?.description || ""}
tags={node.frontmatter?.tags || []}
index={index}
/>
))}
</div>
<div className="col-xl-2 col-lg-1 order-3" />
</div>
<SEO
title={tag}
url={`https://tubone-project24.xyz/tag/${tag}`}
siteTitleAlt="tubone BOYAKI"
isPost={false}
description={tag}
tag=""
image="https://i.imgur.com/StLyXdu.png"
/>
</div>
);
};
export default TagPage;
export const pageQuery = graphql`
query tagQuery($tag: [String!]) {
allMarkdownRemark(
sort: { frontmatter: { date: DESC } }
filter: { frontmatter: { tags: { in: $tag } } }
) {
edges {
node {
id
frontmatter {
id
url: slug
title
date
tags
headerImage
description
}
}
}
}
}
`;
|