gatsby-config.js

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

module.exports = {
  siteMetadata: {
    title: `hoangtrinhj.com`,
    author: `Hoang`,
    contactEmail: 'hoang.trinhj@gmail.com',
    about: `I build products on Google Cloud Platform and write about modern JavaScript,
    Node.js, design and web development.`,
    description: `This is my blog, I write about many things include tech, startup, philosophy, ...`,
    siteUrl: `https://hoangtrinhj.com`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        minify: false, // Breaks styles if not set to false
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              linkImagesToOriginal: true,
            },
          },
          {
            resolve: `gatsby-remark-autolink-headers`, // this plugin should come before prismjs as described by the docs for this plugin
            options: {
              icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>`,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`,
            },
          },
          {
            resolve: `gatsby-remark-mermaid`,
          },
          {
            resolve: `gatsby-remark-prismjs`,
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-smartypants`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: ['.mdx'],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              quality: 100,
              maxWidth: 800,
              backgroundColor: `none`,
              withWebp: true,
            },
          },
          `gatsby-remark-copy-linked-files`,
          {
            resolve: `gatsby-remark-autolink-headers`, // this plugin should come before prismjs as described by the docs for this plugin
            options: {
              icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>`,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: `language-`,
              noInlineHighlight: true,
              aliases: {},
            },
          },
          `gatsby-remark-embedder`,
          // TODO: It would be awesome to get this plugin to work so I don't have to manually
          // run ffmpeg locally for my videos
          // {
          //     resolve: `gatsby-remark-videos`,
          //     options: {
          //         pipelines: [
          //             {
          //                 name: `vp9`,
          //                 transcode: chain =>
          //                     chain
          //                         .videoCodec('libvpx-vp9')
          //                         .noAudio()
          //                         .outputOptions(['-crf 20', '-b:v 0']),
          //                 maxHeight: 720,
          //                 maxWidth: 1000,
          //                 fileExtension: `webm`,
          //             },
          //             {
          //                 name: `h264`,
          //                 transcode: chain =>
          //                     chain
          //                         .videoCodec('libx264')
          //                         .noAudio()
          //                         .videoBitrate('1000k'),
          //                 maxHeight: 720,
          //                 maxWidth: 1000,
          //                 fileExtension: `mp4`,
          //             },
          //         ],
          //     },
          // },
        ],
      },
    },
    {
      resolve: `gatsby-transformer-sharp`,
    },
    {
      resolve: `gatsby-plugin-sharp`,
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GA_TRACKING_ID,
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Hoang Trinh - Developer & Startup Founder`,
        short_name: `Hoang's Blog`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#22b7b5`,
        display: `minimal-ui`,
        icon: `content/assets/favicon.png`,
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
    },
    {
      resolve: `gatsby-plugin-react-helmet`,
    },
    {
      resolve: `gatsby-plugin-typescript`,
    },
    {
      resolve: `gatsby-plugin-lodash`,
    },
    // {
    //   resolve: 'gatsby-plugin-mailchimp',
    //   options: {
    //     endpoint: process.env.MAILCHIMP_ENDPOINT,
    //   },
    // },
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: 'Poppins',
              variants: [`300`, `400`, `500`, `600`, `700`],
            },
            {
              family: `Fira Sans`,
              variants: [`100`, `300`, `400`, `500`, `600`, `700`],
            },
          ],
        },
      },
    },
    `gatsby-alias-imports`,
  ],
}