8.tag個別ページ作成 (Gatsby-jsによるサイト構築記録)

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.createPages = async ({ graphql, actions, reporter }) => {
  const createBlogPostPage = (posts) => {
    posts?.forEach((post, index) => {
      actions.createPage({
        path: post.fields.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          id: post.id,
          previousPostId: index === 0 ? null : posts[index - 1].id,
          nextPostId: index === posts.length - 1 ? null : posts[index + 1].id,
        },
      });
    });
  };

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { fields: [frontmatter___postdate], order: ASC }
        limit: 1000
      ) {
        nodes {
          id
          fields {
            slug
          }
        }
      }
    }
  `);

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your blog posts`,
      result.errors,
    );
    return;
  }

  createBlogPostPage(result.data.allMarkdownRemark.nodes);
};

exports.onCreateNode = ({ node, actions, getNode }) => {
  if (node.internal.type === `MarkdownRemark`) {
    // ファイルパスからurlを生成
    // https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/#createfilepath
    const value = createFilePath({ node, getNode });

    // nodeに
    // "fields": {
    //   "slug": `"${value}"
    // `}
    // を追加する。
    // https://www.gatsbyjs.com/docs/reference/config-files/actions/#createNodeField
    actions.createNodeField({
      node,
      name: `slug`,
      value,
    });
  }
};

exports.createSchemaCustomization = ({ actions }) => {
  // siteMetadata {} オブジェクトを明示的に定義します。
  // こうすることで、gatsby-config.jsから削除されても、常に定義されるようになります。

  // Markdown のフロントマターも明示的に定義します。
  // この方法により、"content/blog" 内にブログ記事が格納されていない場合でも、
  // "MarkdownRemark" クエリはエラーを返すのではなく、`null` を返すようになります。
  actions.createTypes(`
    type SiteSiteMetadata {
      author: Author
      siteUrl: String
      social: Social
    }

    type Author {
      name: String
      summary: String
    }

    type Social {
      twitter: String
      github: String
      unityroom: String
    }

    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
      fields: Fields
    }

    type Frontmatter {
      title: String
      description: String
      postdate: Date @dateformat
      update: Date @dateformat
      tags: [String]
    }

    type Fields {
      slug: String
    }
  `);
};

import * as React from "react";
import { graphql, Link } from "gatsby";

import Layout from "../components/layout";
import Seo from "../components/seo";

const TagsTemplate = ({ data, location, pageContext }) => {
  const Card = ({ post, style }) => {
    const Date = () => (
      <p style={{ color: "#747474", marginBottom: "0" }}>
        {post.frontmatter.postdate}
      </p>
    );
    const Title = () => (
      <h3 style={{ margin: "0" }}>
        <Link to={post.fields.slug} itemProp="url" style={{ color: "#242424" }}>
          <span itemProp="headline">
            {post.frontmatter.title || post.fields.slug}
          </span>
        </Link>
      </h3>
    );
    const Tag = () => (
      <p style={{ display: "flex", justifyContent: "flex-end" }}>
        {post.frontmatter.tags &&
          post.frontmatter.tags.map((tag, i) => (
            <span
              style={{
                backgroundColor: "#000000",
                borderRadius: "2px",
                padding: "0.3rem 1rem",
                marginLeft: "0.3rem",
              }}
              key={i}
            >
              <Link to={`/blog/tag/${tag}`} style={{ color: "#ffffff" }}>
                {" "}
                {tag}{" "}
              </Link>
            </span>
          ))}
      </p>
    );
    return (
      <div itemScope itemType="http://schema.org/Article" style={style}>
        <Date />
        <Title />
        <Tag />
      </div>
    );
  };

  return (
    <Layout location={location}>
      <Seo title={`Tag: ${pageContext.tag}`} />
      <h1>{pageContext.tag}</h1>
      <p>{data.allMarkdownRemark.totalCount}件</p>
      <p>
        <Link to="/blog/tag">タグの一覧</Link>
      </p>
      {
        <div
          style={{
            display: "flex",
            flexFlow: "column",
            backgroundColor: "#ffffff",
            border: "solid 1px #999999",
            padding: "0 10px",
          }}
        >
          {data.allMarkdownRemark.nodes.map((post, i) => {
            // 最後の一個以外ボーダーで区切り線を入れる
            if (i >= data.allMarkdownRemark.nodes.length - 1)
              return <Card post={post} key={i} />;
            return (
              <Card
                post={post}
                style={{ borderBottom: "solid 1px #E3E3E3" }}
                key={i}
              />
            );
          })}
        </div>
      }
    </Layout>
  );
};

export default TagsTemplate;

export const pageQuery = graphql`
  query BlogPostByTag($tag: String!) {
    allMarkdownRemark(
      filter: { frontmatter: { tags: { eq: $tag } } }
      sort: { order: DESC, fields: frontmatter___postdate }
    ) {
      totalCount
      nodes {
        frontmatter {
          title
          postdate(formatString: "YYYY/MM/DD")
          tags
        }
        fields {
          slug
        }
      }
    }
  }
`;

import * as React from "react";
import { graphql, Link } from "gatsby";

import Layout from "../../components/layout";
import Seo from "../../components/seo";

const Tag = ({ data, location }) => {
  const counter = new Counter();
  data.allMarkdownRemark.nodes?.forEach((node) => {
    node.frontmatter.tags?.forEach((tag) => counter.increment(tag));
  });
  return (
    <Layout location={location}>
      <Seo title="Tag List" />
      <h1>Tag</h1>
      <ul>
        {counter.keys
          .sort() // 文字列ソート(アルファベット, 50音)
          .sort((a, b) => counter.get(b) - counter.get(a)) // 数が多い順のソート
          .map((key) => (
            <li style={{ margin: "1rem 0" }}>
              <Link
                to={`/blog/tag/${key}`}
                style={{
                  fontSize: "1.1rem",
                }}
              >
                {key}
              </Link>
              {` : ${counter.get(key)}`}
            </li>
          ))}
      </ul>
    </Layout>
  );
};

export const pageQuery = graphql`
  query TagOnlyQuery {
    allMarkdownRemark {
      nodes {
        frontmatter {
          tags
        }
      }
    }
  }
`;

class Counter {
  constructor() {
    this.map = {};
  }

  increment(key) {
    if (this.map.hasOwnProperty(key)) this.map[key] += 1;
    else this.map[key] = 1;
  }

  get keys() {
    return Object.keys(this.map);
  }

  get(key) {
    if (this.map.hasOwnProperty(key)) return this.map[key];
    else return 0;
  }
}

export default Tag;