templates tag.tsx

100% Statements 6/6
50% Branches 6/12
100% Functions 2/2
100% Lines 6/6
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  
 
 
 
 
 
 
2x
 
 
 
 
 
 
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  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}
            &nbsp;Articles in&nbsp;
            {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: { order: DESC, fields: frontmatter___date }
      filter: { frontmatter: { tags: { in: $tag } } }
    ) {
      edges {
        node {
          id
          frontmatter {
            id
            url: slug
            title
            date
            tags
            headerImage
            description
          }
        }
      }
    }
  }
`;