Gatsbyブログサイト移行物語~投稿テンプレにカテゴリやらキービジュアル（アイキャッチ）追加~

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,      },
    },
  ]
}

//~ 省略
exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  //~ 省略
  createTypes(`
    //~ 省略
    type Frontmatter {
      title: String
      description: String
      date: Date @dateformat
      pagetype: String      tags: [String]      cate: String      hero: String    }

    type Fields {
      slug: String
    }
  `)
}

// 省略

exports.createPages = async ({ graphQL, actions, reporter }) => {
  // 省略
  const result = await GraphQL(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: ASC }
          limit: 1000
        ) {
          nodes {
            id
            fields {
              slug
            }
            frontmatter {              hero              pagetype            }          }
        }
      }
    `
  )
  if (result.errors) {
    // 省略

// 省略
if (posts.length > 0) {
  // filterでpagetypeがblogのものだけ抽出
  const blogPosts = posts.filter(post => post.frontmatter.pagetype === "blog")
  blogPosts.forEach((post, index) => {
    //書き換える
    const previousPostId = index === 0 ? null : blogPosts[index - 1].id    const nextPostId = index === blogPosts.length - 1 ? null : blogPosts[index + 1].id
    createPage({
      path: post.fields.slug,
      component: blogPost,
      context: {
        id: post.id,
        previousPostId,
        nextPostId,
        //↓追記
        hero: post.frontmatter.hero ? post.frontmatter.hero: "common/dummy.png",      },
    })
  })
}
// 省略

export const pageQuery = GraphQL`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
    # ↓追加
    $hero: String  ) {
    //省略
  }

//省略
site {
  siteMetadata {
    title
  }
}
# ↓追加
allFile(
  filter: {
    # ↓ 画像パスが$heroと一緒のファイルを探す
    relativePath: { eq: $hero }    # ↓ 画像を格納してある場所がimages（gatsby-config.jsで指定した名）
    sourceInstanceName: { eq: "images" }  }
) {
  edges {
    node {
      relativePath
      childImageSharp {
        gatsbyImageData(
          width: 1000
          formats: [AUTO, WEBP, AVIF]
          placeholder: BLURRED
        )
      }
    }
  }
}
# ↑追加
markdownRemark(id: { eq: $id }) {
//省略

// 省略
const BlogPostTemplate = ({ data, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data
  const keyVisual = data.allFile.edges[0].node.childImageSharp;
  console.log(keyVisual) //デバッグ  // 省略
  return (
    <Layout location={location} title={siteTitle}>
  // 省略

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

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

// gatsby-plugin-image追加
import { GatsbyImage, getImage } from "gatsby-plugin-image"
// 省略

  // 省略
  const { previous, next } = data
  const eyeCatchImg = data.allFile.edges[0].node.childImageSharp//追加
  // 省略
  return (
    // 省略
    <article
      className="blog-post"
      itemScope
      itemType="http://schema.org/Article"
    >
      <header>
        <h1 itemProp="headline">{post.frontmatter.title}</h1>
        <GatsbyImage          image={getImage(eyeCatchImg)}          alt={post.frontmatter.title}          key={post.frontmatter.title}        />        <p><time datetime={post.frontmatter.date}>{post.frontmatter.date}</time></p>
      </header>
    // 省略

//省略
markdownRemark(id: { eq: $id }) {
  id
  excerpt(pruneLength: 160)
  html
  frontmatter {
    title
    date(formatString: "MMMM DD, YYYY")
    description
    cate    tags  }
}

// 省略
const BlogPostTemplate = ({ data, location }) => {
  // 省略
  const { previous, next } = data
  const eyeCatchImg = data.allFile.edges[0].node.childImageSharp
  const { cate, tag } = data.markdownRemark.frontmatter//追記  console.log(cate, tag)//デバッグ
  return (
    <Layout location={location} title={siteTitle}>
  // 省略

  //省略
  const { cate } = data.markdownRemark.frontmatter

  return (
    <Layout location={location} title={siteTitle}>
    //省略
    <header>
      <h1 itemProp="headline">{post.frontmatter.title}</h1>
      <GatsbyImage
        image={getImage(eyeCatchImg)}
        alt={post.frontmatter.title}
        key={post.frontmatter.title}
      />
      <p><time datetime={post.frontmatter.date}>{post.frontmatter.date}</p>
    </header>
    {/* カテゴリ追加 */}
    <dl>      <dt>カテゴリ</dt>      <dd>{cate}</dd>    </dl>    <section
      dangerouslySetInnerHTML={{ __html: post.html }}
      itemProp="articleBody"
    />
    //省略

  const { cate, tags } = data.markdownRemark.frontmatter
  //省略
  return (
    <Layout location={location} title={siteTitle}>
    {/* カテゴリ追加 */}
    <dl>
      <dt>カテゴリ</dt>
      <dd>{cate}</dd>
    </dl>
    {/* タグ追加 */}
    <dl>      <dt>タグ</dt>      {tags.map((tag, index) => {        return <dd key={`tag${index}`}>{tag}</dd>      })}    </dl>    {/* 省略 */}

// 省略
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import styled from "styled-components"// 追加
const BlogPostTemplate = ({ data, location }) => {
// 省略

module.exports = {
  siteMetadata: {
    title: `銀ねこアトリエ`,
    author: {
      name: `かみーゆ`,
      summary: `セブ島に住むフロントエンドエンジニアです。`,
    },
    description: `セブ島に住む女性フロントエンドエンジニアのライフログ。フロント技術を中心とした「ウェブ制作に関するチップス」、「磨耗しない人生の選択」や「海外ノマド」のライフスタイルについて発信しています。`,
    siteUrl: `https://ginneko-atelier.com`,
    social: {
      twitter: `lirioL`,
      instagram: `yurico.k`,      youtube: `https://www.youtube.com/channel/UCbSgjkCIPucux8cFTuQcdcw`,    },
  },
}

import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import styled from "styled-components" //追加

const Bio = () => {
  const data = useStaticQuery(graphql`
    query BioQuery {
      site {
        siteMetadata {
          author {
            name
            summary
          }
          social {
            twitter
            instagram            youtube          }
        }
      }
    }
  `)

  // Set these values by editing "siteMetadata" in gatsby-config.js
  const author = data.site.siteMetadata?.author
  const social = data.site.siteMetadata?.social

  return (
    <BioWrapper>
      <h2>この記事を書いた人</h2>
      <StaticImage
        className="bio-avatar"
        layout="fixed"
        formats={["auto", "webp", "avif"]}
        {/* 画像サイズやパスを変更 */}
        src="../images/common/profile-pic.jpg"        width={100}        height={100}        quality={95}        alt="Profile picture"
      />
      {author?.name && (
        <>
          <p>
            <strong>{author.name}</strong>/{author?.summary || null}
          </p>
          <ul>
            <li>
              <a
                href={`https://twitter.com/${social?.twitter || ``}`}
                target="_blank"
                rel="noopener"
              >
                Twitter
              </a>
            </li>
            {/* insta追加 */}
            <li>              <a                href={`https://www.instagram.com/${social?.instagram || ``}`}                target="_blank"                rel="noopener"              >                Instagram              </a>            </li>            {/* youtube追加 */}
            <li>              <a                href={`${social?.youtube || ``}`}                target="_blank"                rel="noopener"              >                YouTube              </a>            </li>          </ul>
        </>
      )}
    </BioWrapper>
  )
}

export default Bio

import { StaticImage } from "gatsby-plugin-image"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"import {  faTwitter,  faInstagram,  faYoutube,} from "@fortawesome/free-brands-svg-icons"

<li>
  <a
    href={`https://twitter.com/${social?.twitter || ``}`}
    target="_blank"
    rel="noopener"
  >
    <FontAwesomeIcon icon={faTwitter} />    Twitter
  </a>
</li>
<li>
  <a
    href={`https://www.instagram.com/${social?.instagram || ``}`}
    target="_blank"
    rel="noopener"
  >
    <FontAwesomeIcon icon={faInstagram} /> Instagram  </a>
</li>
<li>
  <a
    href={`${social?.youtube || ``}`}
    target="_blank"
    rel="noopener"
  >
    <FontAwesomeIcon icon={faYoutube} />    YouTube
  </a>
</li>