GatsbyJS 3 (Static site generator) + MDX

Pet-project Blog generated using gatsby-starter-default & MDX

DEMO link of Frontend deployed on Netlify

• Frontend deployed on Netlify => continuous integration from GitHub
• Frontend deployed on Vercel => continuous integration from GitHub

---

• Gatsby 3.0
• Quick Start
• Gatsby Starters
• Hello world starter
• Gatsby Plugin Library
• React icons
• gatsby-plugin-image - ⚠️ The "fixed" and "fluid" resolvers are now deprecated.
• Migrating from gatsby-image to gatsby-plugin-image
• Gatsby Image plugin
• Getting Started with Gatsby
• prop-types
• gatsby-plugin-react-helmet
• Adding an Seo Component
• Pexels stock photos
• PNG photos
• Completely Free online photo editing
• Favicon
• gatsby-image - ⚠️ This package is now deprecated
• Inkscape
• Netlify Forms setup
• What’s MDX?
• Markdown Cheatsheet
• Styled Components
• Add components to content using MDX
• gatsby-remark-images
• Working with Video
• PropTypes
• Config Files
• Add components to content using MDX
• Table of components MDX
• Customizing Markdown Components Gatsby
• prism-react-renderer
• gatsby-plugin-mdx
• Adding an Seo Component
• @reach/router - ⚠️ - may cause build error (in React17)
• reach-router for React17 (not tested)

---

Requirements:

• Node.js
• Netlify - Frontend site + Newsletter Form

---

Run in terminal

npm i

Or install Gatsby project manually:

npm i -g gatsby-cli
gatsby --version
npm install -g npm@7.10.0
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
gatsby clean
gatsby develop

Check the result:

• localhost:8000
• localhost:8000/___graphql

---

Netlify Newsletter

Code an HTML form into any page on your site, add a netlify attribute to the <form> tag, and you’ll receive submissions in your Netlify dashboard. HTML files are parsed directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

 <form
    className="contact-form"
    name="newsletter-submission"
    netlify-honeypot="bot-field"
    method="POST"
    data-netlify="true"
    action="/success"
  >
    <input
      type="text"
      name="name"
      placeholder="Your name"
      className="form-control"
      required
    />
    <input
      type="email"
      name="email"
      placeholder="Your email"
      className="form-control"
      required
    />
    <input type="hidden" name="bot-field" />
    <input
      type="hidden"
      name="form-name"
      value="newsletter-submission"
    />
    <button type="submit" className="btn form-control submit-btn">
      Subscribe
    </button>
  </form>

---

Creating posts dynamically

1. generate GraphQL query for posts

query MyQuery {
  allMdx {
    nodes {
      frontmatter {
        slug
      }
    }
  }
}

2. paste query to gatsby-node.js
3. create post template
4. use import { MDXRenderer } from 'gatsby-plugin-mdx' for body content in template
5. generate GraphQL query for posts categories

query MyQuery {
  categories: allMdx {
    distinct(field: frontmatter___category)
  }
}

6. paste query to gatsby-node.js
7. create category template
8. restart Gatsby server

---

Config Files

function wrapRootElement to wrap App in MDX Provider, that allows to intercept the elements typed in MDX

• Gatsby Browser APIs
• Gatsby Server Rendering APIs

make changes in gatsby-browser & gatsby-ssr with logic in root-mdx

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

const components = {
  h2: props => {
    console.log(props)
    return <h2 {...props}>{props.children}</h2>
  },
}

export const wrapMDX = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

<h2 title="true">random h2</h2>

---

Errors

to avoid deployment errors => delete package-lock.json

Netlify => Published deploy => Stop auto publishing => Publish Deploy

npm i gatsby-plugin-offline

npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x ev en if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

ERROR

(node:3700) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\projects\gatsby_03\node_modules\postcss-js\package.json. Update this package.json to use a subpath pattern like "./*".

ERROR #98124 WEBPACK

Generating development JavaScript bundle failed

Can't resolve '/srcpagespost.mdx?type=component' in 'D:\projects\gatsby_03\src\pages'

If you're trying to use a package make sure that '/srcpagespost.mdx?type=component' is installed. If you're trying to use a local file make sure that the path is correct.

File: src\pages\post.mdx:4:0

failed Re-building development bundle - 2.369s ERROR in ./src/pages/post.mdx 4:0-60 Module not found: Error: Can't resolve '/srcpagespost.mdx?type=component' in 'D:\projects\gatsby03\src\pages' @ ./.cache/_this_is_virtual_fs_path/$virtual/async-requires.js 31:11-33:5 @ ./.cache/app.js 17:0-52 30:0-86 32:27-40 30:0-86

webpack compiled with 1 error

Process finished with exit code 1

---

Markdown Cheat Sheet

Thanks for visiting The Markdown Guide!

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.

Basic Syntax

These are the elements outlined in John Grubber’s original design document. All Markdown applications support these elements.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• First item
• Second item
• Third item

Code

code

Horizontal Rule

---

Link

title

Image

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Syntax	Description
Header	Title
Paragraph	Text

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Footnote

Here's a sentence with a footnote. ¹

Heading ID

My Great Heading {#custom-id}

Definition List

term : definition

Strikethrough

The world is flat.

Task List

• Write the press release
• Update the website
• Contact the media

Footnotes

1. This is the footnote. ↩