gatsby-config.js

const workImagesHeight = 300;

module.exports = {
  siteMetadata: {
    title: `Pete Chappell`,
    description: `Portfolio site for Pete Chappell, a front-end engineer with a broad range of experience.`,
    author: `Pete Chappell`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/content/experience/`,
      },
    },
    `gatsby-transformer-csv`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Pete Chappell Portfolio`,
        short_name: `Pete Chappell`,
        start_url: `/`,
        background_color: `#ebeff2`,
        theme_color: `#006D97`,
        display: `minimal-ui`,
        icon: `src/images/petechappell.jpg`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_blank",
              rel: "nofollow noopener noreferrer external",
            },
          },
          "gatsby-remark-unwrap-images",
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 400,
              linkImagesToOriginal: false,
              wrapperStyle: fluidResult => `
                display: inline-block;
                width: ${fluidResult.aspectRatio * workImagesHeight}px;
                max-height: ${workImagesHeight}px;
                margin-right: 10px;
                vertical-align: top;
              `,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /src\/images\/svg/,
        },
      },
    },
    `gatsby-plugin-offline`,
  ],
};