gatsby-config.js and gatsby-node.js Files

module.exports = {
  siteName: `Gatsby SEO`,
  firstName: `Jane`,
  lastName: `Doe`,
  logo: {
    pathName: `logo.jpg`,
    width: 640,
    height: 640,
  },
  language: `en_US`,
  socialMedia: {
    twitter: `https://twitter.com/gatsbyjs`,
    github: `https://github.com/gatsbyjs`,
  },
  address: {
    addressCountry: `US`,
    addressLocality: `Los Angeles`,
    addressRegion: `CA`,
  },
  speakableSelector: [`[data-speakable="true"]`],
  pages: {
    home: {
      id: `home`,
      pathName: `/`,
      title: `Jane Doe`,
      description: `Jane Doe's place on the web`,
      image: `./src/images/home.jpg`,
      imageAlt: `Two corgis sitting next to each other`,
      breadcrumb: `Home`,
      type: `WebPage`,
    },
    blog: {
      id: `blog`,
      pathName: `blog`,
      title: `Blog`,
      description: `Jane Doe's blog about software engineering`,
      image: `./src/images/blog.jpg`,
      imageAlt: `Cute brown Retriever is licking its nose`,
      breadcrumb: `Blog`,
      type: `Blog`,
    },
    contact: {
      id: `contact`,
      pathName: `contact`,
      title: `Contact`,
      description: `Jane Doe's contact information`,
      image: `./src/images/contact.jpg`,
      imageAlt: `Bulldog is chilling on the ground`,
      breadcrumb: `Contact`,
      type: `ContactPage`,
    },
    about: {
      id: `about`,
      pathName: `about`,
      title: `About`,
      description: `Jane Doe's biography`,
      image: `./src/images/about.jpg`,
      imageAlt: `French bulldog is hanging out on the playground`,
      breadcrumb: `About`,
      type: `AboutPage`,
    },
    article: {
      id: `article`,
      type: `Article`,
    },
  },
}

const path = require("path")
const siteMetadata = require("./site-metadata")

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

const {
  NODE_ENV,
  SITE_URL,
  URL: NETLIFY_SITE_URL = SITE_URL,
  DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
  CONTEXT: NETLIFY_ENV = NODE_ENV,
} = process.env
const isNetlifyProduction = NETLIFY_ENV === `production`
const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL

module.exports = {
  siteMetadata: {
    ...siteMetadata,
    siteUrl,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.resolve(`./src/images`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: path.resolve(`./articles`),
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        useMozJpeg: true,
        defaultQuality: 100,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-image`,
    `gatsby-plugin-mdx`,
    `gatsby-plugin-theme-ui`,
  ],
}

// ✂️
const {
  NODE_ENV,
  SITE_URL,
  URL: NETLIFY_SITE_URL = SITE_URL,
  DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
  CONTEXT: NETLIFY_ENV = NODE_ENV,
} = process.env
const isNetlifyProduction = NETLIFY_ENV === `production`
const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL
// ✂️

import { useStaticQuery, graphql } from "gatsby"

const useSiteMetadata = () => {
  const {
    site: { siteMetadata },
  } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            siteUrl
            siteName
            firstName
            lastName
            logo {
              pathName
              width
              height
            }
            language
            socialMedia {
              twitter
              github
            }
            address {
              addressCountry
              addressLocality
              addressRegion
            }
            speakableSelector
            pages {
              home {
                id
                pathName
                title
                description
                imageAlt
                breadcrumb
                type
              }
              blog {
                id
                pathName
                title
                description
                imageAlt
                breadcrumb
                type
              }
              contact {
                id
                pathName
                title
                description
                imageAlt
                breadcrumb
                type
              }
              about {
                id
                pathName
                title
                description
                imageAlt
                breadcrumb
                type
              }
              article {
                id
                type
              }
            }
          }
        }
      }
    `
  )

  return siteMetadata
}

export default useSiteMetadata

const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")
const { pages } = require("./site-metadata")
const slashify = require("./src/helpers/slashify")

exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode }).replace(/\//g, ``)

    createNodeField({
      name: `slug`,
      value,
      node,
    })
  }
}

exports.createPages = ({ actions: { createPage }, graphql }) =>
  graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            fields {
              slug
            }
          }
        }
      }
    }
  `).then(({ data, errors }) => {
    if (errors) Promise.reject(errors)

    data.allMdx.edges.forEach(
      ({
        node: {
          id,
          fields: { slug },
        },
      }) => {
        createPage({
          path: slashify(pages.blog.pathName, slug),
          component: path.resolve(`src/templates/article.jsx`),
          context: { id, slug },
        })
      }
    )
  })

exports.onCreatePage = ({ page, actions: { createPage, deletePage } }) => {
  const pagesMetadata = Object.values(pages)
    .map(({ pathName, image }) => [slashify(pathName), image])
    .filter(([pathName, image]) => pathName && image)

  pagesMetadata.forEach(([pathName, image]) => {
    if (page.path === pathName) {
      deletePage(page)
      createPage({
        ...page,
        context: {
          image: path.join(process.cwd(), image),
        },
      })
    }
  })
}

const isHttpUrl = str => {
  try {
    return new URL(str) && Boolean(str.match(/http(s?):\/\//))
  } catch (_error) {
    return false
  }
}

const isFilePathName = str => str?.split(`.`).filter(Boolean).length > 1

const slashify = (...items) => {
  const length = items.length

  if (length === 1) {
    const item = items[0]
    if (item === `/`) {
      return `/`
    }

    if (isHttpUrl(item)) {
      return item
    }

    if (isFilePathName(item)) {
      return `/${item}`
    }

    return `/${item}/`
  } else {
    return items.reduce((acc, item, index) => {
      if (isHttpUrl(item)) {
        if (index !== 0) {
          throw Error(`HTTP URL has to be passed as the first argument`)
        } else {
          return item + `/`
        }
      }

      if (isFilePathName(item)) {
        if (index !== length - 1) {
          throw Error(`File pathname has to be passed as the last argument`)
        } else {
          return acc + item
        }
      }

      if (index === 0) {
        return `/${item}/`
      } else {
        return acc + item + `/`
      }
    }, ``)
  }
}

module.exports = slashify