Gatsbyで利用中のおすすめプラグインを全部紹介する

const siteName = `<sukiburo.dev>`
const siteUrl = `<https://sukiburo.dev>`

{
  resolve: `gatsby-plugin-canonical-urls`,
  options: {
    siteUrl: `${siteUrl}`,
    stripQueryString: true,
  },
},

{
  resolve: `gatsby-plugin-google-gtag`,
  options: {
    trackingIds: [
      "G-XXXXXXXXXX", // Google Analytics / GA,
      `UA-XXXXXXXXX-X`,
    ],
    pluginConfig: {
      head: true,
    },
  },
},

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `${siteName}`,
    short_name: `${siteName}`,
    start_url: `/`,
    background_color: `rgb(230,235,245)`,
    theme_color: `#2196f3`,
    display: `minimal-ui`,
    icon: `static/images/icon/icon.png`,
    icon_options: {
      purpose: `any maskable`,
    },
    icons: [
      {
        src: `static/images/icon/icon-512x512.png`,
        sizes: `512x512`,
        type: `image/png`,
      },
      {
        src: `static/images/icon/icon-256x256.png`,
        sizes: `256x256`,
        type: `image/png`,
      },
    ],
  },
},

{
  resolve: 'gatsby-plugin-robots-txt',
  options: {
    host: `${siteUrl}`,
    sitemap: `${siteUrl}/sitemap.xml`,
  }
},

{
  resolve: `gatsby-plugin-feed-mdx`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMdx } }) => {
          return allMdx.edges.map(edge => {
            return Object.assign({}, edge.node.frontmatter, {
              description: edge.node.excerpt,
              date: edge.node.frontmatter.date,
              url: site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
              guid: site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
              custom_elements: [{ "content:encoded": edge.node.html }]
            });
          });
        },
        query: `
          {
            allMdx(
              sort: { order: DESC, fields: [frontmatter___date] },
            ) {
              edges {
                node {
                  excerpt
                  html
                  fields { 
                    slug
                  }
                  frontmatter {
                    title
                    date
                  }
                }
              }
            }
          }
        `,
        output: "/rss.xml",
        title: `${siteName}`,
        match: "^/blog/"
      },
    ],
  },
},

{
  resolve: `gatsby-plugin-alias-imports`,
  options: {
    alias: {
      "@content": "content",
      "@blog": "content/blog",
      "@src": "src",
      "@components": "src/components",
      "@functions": "src/components/functions",
      "@affiliate": "src/components/affiliate",
      "@amzn": "src/components/affiliate/amzn",
      "@styles": "src/styles",
      "@templates": "src/templates",
      "@static": "static",
      "@images": "static/images",
      "@svg": "static/images/svg",
    },
    extensions: [`js`],
  }
},

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: ['.mdx', '.md'],
    plugins: [
      // gatsby-remark-imagesを使う場合はここにも記述
      `gatsby-remark-images`,
    ],
    remarkPlugins: [
      // インストールしない場合は削除
      // md(mdx)内でイメージをwrapしない
      // ref: https://github.com/gatsbyjs/gatsby/issues/16239#issuecomment-594516446  
      require('remark-unwrap-images'),
      // ex: :hand: → ✋
      require(`remark-emoji`),
    ],
    gatsbyRemarkPlugins: [
      // 今後のプラグインはここに記述する。
    ],
  },
},

{
  // prismjsより前に記述
  resolve: `gatsby-remark-autolink-headers`,
  options: {
    icon: false
  },
},

{
  resolve: `gatsby-remark-prismjs`,
  options: {
    classPrefix: `language-`,
    inlineCodeMarker: null,
    aliases: {},
    // showLineNumbers: true,
    noInlineHighlight: false,
  }
},

{
  resolve: `gatsby-remark-custom-blocks`,
  options: {
    blocks: {
      danger: {
        classes: `danger`,
        title: `optional`,
      },
    },
  },
},

.custom-block {
  margin: 60px 0 30px;
  padding: 20px 25px;
  border-radius: 5px;
}

.custom-block-heading {
  position: relative;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2em;
  ::before {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    font-size: 1.2em;
  }
}

.custom-block-body {
  margin: 10px 0 0;
  p {
    margin: 0;
    font-size: 0.95em;
  }
}

/* classesで設定した名前 */
.danger {
  background: ${({ theme }) => theme.error.background};
  .custom-block-heading {
    color: ${({ theme }) => theme.error.mark};
  }
  .custom-block-body {
    p {
      color: ${({ theme }) => theme.error.text};
    }
  }
}