【Gatsby × contentful】MDX形式でcontentful記事を表示する

Copy
{
  "dependencies": {
    "@babel/preset-react": "^7.17.12",
    "@emotion/babel-plugin": "^11.9.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mdx-js/mdx": "1.6.22",
    "@mdx-js/react": "1.6.22",
    "dotenv": "^16.0.2",
    "gatsby": "^4.14.1",
    "gatsby-plugin-emotion": "^7.14.0",
    "gatsby-plugin-feed": "^4.14.0",
    "gatsby-plugin-gatsby-cloud": "^4.14.0",
    "gatsby-plugin-google-analytics": "^4.14.0",
    "gatsby-plugin-image": "^2.24.0",
    "gatsby-plugin-manifest": "^4.14.0",
    "gatsby-plugin-mdx": "3.20.0",
    "gatsby-plugin-offline": "^5.14.1",
    "gatsby-plugin-react-helmet": "^5.14.0",
    "gatsby-plugin-sharp": "^4.14.1",
    "gatsby-remark-copy-linked-files": "^5.14.0",
    "gatsby-remark-images": "^6.14.0",
    "gatsby-remark-prismjs": "^6.14.0",
    "gatsby-remark-responsive-iframe": "^5.14.0",
    "gatsby-remark-smartypants": "^5.14.0",
    "gatsby-source-contentful": "^7.21.1",
    "gatsby-source-filesystem": "^4.14.0",
    "gatsby-transformer-sharp": "^4.14.0",
    "prismjs": "^1.28.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "prettier": "^2.6.2"
  },
}

Copy
spaceId=xxxxxxxxxxxx
accessToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Copy
yarn add dotenv

Copy
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        display: `minimal-ui`,
      },
    },
    `gatsby-plugin-react-helmet`,

  ],
}

Copy
yarn add gatsby-source-contentful

Copy
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.spaceId,
        accessToken: process.env.accessToken,
      },
    },

    `gatsby-plugin-react-helmet`,

  ],
}

Copy
yarn add gatsby-plugin-mdx@3.20.0 @mdx-js/react@1.6.22 @mdx-js/mdx@1.6.22

Copy
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.spaceId,
        accessToken: process.env.accessToken,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          // 他にRemarkプラグインがある場合はここに追加していく
        ],
      },
    },
    `gatsby-plugin-react-helmet`,

  ],
}

Copy
import React from "react"
import { css } from "@emotion/react"

// 指定の文を装飾する
const MdxComponent = props => {
  const { type } = props

  const style = type => [
    css`
      color: ${type == "red" ? "red" : "blue"};
    `,
  ]

  return <div css={[style(type)]} {...props} />
}

// h2タグの文を装飾する
const h2 = props => {
  const h2Style = css`
    margin-top: 4rem;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 7px;
    border-left: 7px solid orange;
    background: rgb(69, 74, 150);
    color: white;
    font-family: "Noto Sans JP", Roboto, sans-serif;
    line-height: 1.2;
  `

  return <h2 css={h2Style} {...props} />
}

// h3タグの文を装飾する
const h3 = props => {
  const h3Style = css`
    margin: 4rem 0 1em;
    color: white;
    padding: 0.5rem; /*文字周りの余白*/
    line-height: 1.3; /*行高*/
    background: rgb(69, 74, 150);
    vertical-align: middle;
    border-radius: 25px 0px 0px 25px; /*左側の角を丸く*/
    &:before {
      content: "●";
      color: orange;
      margin-right: 8px;
    }
  `
  return <h3 css={h3Style} {...props} />
}

// h4タグの文を装飾する
const h4 = props => {
  const h4Style = css`
    margin: 4rem 0 1em;
    position: relative;
    padding-left: 25px;
    &:before {
      position: absolute;
      content: "";
      bottom: -3px;
      left: 0;
      width: 0;
      height: 0;
      border: none;
      border-left: solid 15px transparent;
      border-bottom: solid 15px orange;
    }
    &:after {
      position: absolute;
      content: "";
      bottom: -3px;
      left: 10px;
      width: 100%;
      border-bottom: solid 3px orange;
    }
  `

  return (
    <h4 css={h4Style} {...props}>
      {props.children}
    </h4>
  )
}

// h5タグの文を装飾する
const h5 = props => {
  const h5Style = css`
    margin-top: 4rem;
    margin-bottom: 0;
    display: inline-block; /*行部分のみ*/
    padding: 2px 0;
    border-bottom: 1px solid orange;
  `

  return (
    <h5 css={h5Style} {...props} className="highLight">
      {props.children}
    </h5>
  )
}

export { h2, h3, h4, h5, MdxComponent }

Copy
import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { MDXProvider } from "@mdx-js/react"
import { h2, h3, h4, h5, MdxComponent } from "../mdxComponent"

// importしたcomponentをセットする
const mdxComponents = {
  h2,
  h3,
  h4,
  h5,
  MdxComponent,
}

const MDXConvert = ({ children }) => (
  <div>
    {/* MDXProviderで独自に作成したコンポーネントをpropsで渡す */}
    <MDXProvider components={mdxComponents}>
      {/* MDXRendererでコンテンツを表示 */}
      <MDXRenderer>{children}</MDXRenderer>
    </MDXProvider>
  </div>
)

export default MDXConvert

Copy
const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // contentful記事のkeyを取得
  const contentfulAirticleResult = await graphql(`
    query airticleQuery {
      allContentfulBlogPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  const contentfulAirticle =
    contentfulAirticleResult.data.allContentfulBlogPost.edges
  //記事数分ループして記事ページを作成する
  contentfulAirticle.forEach(({ node }) => {
    createPage({
      path: `${node.slug}/`, //記事ページのurl
      component: path.resolve(`./src/templates/contentfulPost.jsx`), //記事ページ作成のtemplateコンポーネント
      //templateコンポーネントに渡す引数
      context: {
        slug: node.slug,
      },
    })
  })
}

Copy
import React from "react"
import { graphql } from "gatsby"
import MDXConvert from "../components/mdxConvert"

const ContentfulPost = ({ data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  // MDX形式の記事データをMDXConvertでhtmlに変換する
  return <MDXConvert>{body.childMdx.body}</MDXConvert>
}

export default ContentfulPost

// gatsby-node.jsのcreatePageから渡されたslugを元にGraphQLで記事を取得する
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              body
            }
          }
        }
      }
    }
  }
`

Copy
## 【Gatsby × contentful】MDX形式でcontentful記事を表示する

### 【Gatsby × contentful】MDX形式でcontentful記事を表示する

### 【Gatsby × contentful】MDX形式でcontentful記事を表示する

#### 【Gatsby × contentful】MDX形式でcontentful記事を表示する

##### 【Gatsby × contentful】MDX形式でcontentful記事を表示する

<MdxComponent type="red">
sample_red  
</MdxComponent>

<MdxComponent>
sample_blue  
</MdxComponent>

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

const BlogIndex = ({ data }) => {
  const nodeList = data.allContentfulBlogPost.edges

  return (
    // 取得したタイトルを一覧で表示する
    <div>
      {nodeList.map(({ node }) => {
        return (
          <div>
            <Link to={node.slug}>{node.title}</Link>
          </div>
        )
      })}
    </div>
  )
}

export default BlogIndex

// 記事のタイトルとslugを取得
export const pageQuery = graphql`
  query {
    allContentfulBlogPost {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
`