Old Notes On Gatsby To Examine

# OLD NOTES #

TODO:

- npm install gatsby-plugin-react-helmet - npm install react-helmet

Look at this vs transformer remark and see if they can be used together:

gatsby-plugin-mdx

There's a migration guide, sooo, probably just mdx, which makes sense

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Install:

npm install gatsby-source-filesystem npm install gatsby-plugin-mdx

npm install gatsby-transformer-remark npm install gatsby-remark-images npm install gatsby-plugin-sharp npm install gatsby-remark-embed-video npm install gatsby-remark-responsive-iframe npm install gatsby-remark-prismjs npm install prismjs

Pages

# .gatsby-config.js

module.exports = {
    plugins: [

        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/src/md-pages`,
                name: `md-pages`,
            },
        },
    
        `gatsby-plugin-sharp`,

        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [


                    {
                        resolve: "gatsby-remark-embed-video",
                        options: {
                            width: 800,
                            ratio: 1.77, 
                            height: 400, 
                            related: false,
                            noIframeBorder: true, 
                            containerClass: "embedVideo-container", 
                        },
                    },


                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            linkImagesToOriginal: false, 
                            maxWidth: 800,
                            quality: 82,
                            loading: "eager",
                            disableBgImage: true,
                        },
                    },

                    `gatsby-remark-responsive-iframe`,

                    {
                    resolve: `gatsby-remark-prismjs`,
                        options: {
                            classPrefix: "language-",
                            inlineCodeMarker: '›',
                            aliases: { sh: "bash" },
                            showLineNumbers: false,
                            noInlineHighlight: false,
                            escapeEntities: {},
                        },
                    },

                ],
            },
        },
    ]
}

# gatsby-browser.js

require("prismjs/themes/prism-solarizedlight.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")

# .gatsby-node.js

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostV1 = require.resolve(`./src/templates/blog-post-v1.js`)

  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.slug,
      component: blogPostV1,
      context: {
        slug: node.frontmatter.slug,
      },
    })
  })
}

# .src/components/blog-list-v1.js

import React from "react"
import { useStaticQuery, Link, graphql } from "gatsby"


export default function BlogList(){

    const data2 = useStaticQuery(
        graphql`query {
            allMarkdownRemark {
            totalCount
            edges {
                node {
                id
                frontmatter {
                    title
                    slug
                }
                excerpt
                }
            }
            }
        }`
    )

    return (

      <div>
        <h4>{data2.allMarkdownRemark.totalCount} Posts</h4>
        {data2.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <h3>
                <Link to={node.frontmatter.slug}>
                {node.frontmatter.title}{" "}
                </Link>
            </h3>
            <p>{node.excerpt}</p>
          </div>
        ))}
      </div>

    )
}

# ./src/components/layout-1.js

import React from "react"
import { Link } from "gatsby"

export default function Layout({children}) {

    return (
        <div>
            <Link to={`/`}>
                <h3>alanwsmith.com</h3>
            </Link>
            {children}
        </div>
    )
}

# ./src/md-pages/hello-world/index.md

-- hr
title: Hello world does this work
slug: /hello-world-code-example-frontmatter
date: 2021-02-14 21:16:19-0500
-- hr

Is this thing on?

-- image
-- hello

caption: Hello World

This is the video: 

`youtube: https://www.youtube.com/embed/2Xc9gXyf2G4`

This is some code:

\`\`\`javascript{numberLines: true}
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]
\`\`\`

And you'll need to add an image at:

src/md-pages/hello-world/hello.jpg

# ./src/pages/index.js

import React from "react"
import Layout from '../components/layout-v1.js'
import BlogList from '../components/blog-list-v1.js'

export default function Home() {
  return (
      <Layout>
          <BlogList></BlogList>
      </Layout>
  )
}

# ./src/templates/blog-post-v1.js

import React from "react"
import { graphql } from "gatsby"
import Layout from '../components/layout-v1.js'

export default function Template({ data }) {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <Layout>
      <div className="blog-post">
        <hr></hr>
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        </div>
    </Layout>
  )
}

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

-- end of line --