# Gatsby Markdown

### INSTALL MARKDOWN AND MDX PLUGINS

- install all the markdown and mdx plugins: [gatsby-transformer-remark](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=gatsby%20transformer%20remark), [gatsby-remark-images](https://www.gatsbyjs.com/plugins/gatsby-remark-images/?=remark%20images) and [gatsby-plugin-mdx](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx):

  npm install gatsby-transformer-remark gatsby-remark-images gatsby-plugin-sharp gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

- in `gatsby-config.js`, hook the `gatsby-transformer-remark` plugin up and add the `gatsby-remark-images` plugin to it

  `gatsby-remark-images`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 960,
          },
        },
      ],
    },
  },

### CREATE CONTENT FOLDERS AND PAGES FROM THEM

- copy in content folders from previous project. Today that's `cp -ar ../mk-gatsby-20210115/content content`
- then in the `gatsby-config.js` let's connect the `gatsby-source-filesystem` plugin to these new folders for mdx posts and images. We'll delete or modify the current `gatsby-source-filesystem` element, and instead have these two:

  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `resources`,
      path: `${__dirname}/content/resources`,
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `shows`,
      path: `${__dirname}/content/shows`,
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `llmdx`,
      path: `${__dirname}/content/llmdx`,
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/content/images`,
    },
  },
 
 
 check out [this page](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/)
 
 
 

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

export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark
return (
<div className="blog-post-container">
<div className="blog-post">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
)
}

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

 
 
 ## CLOCK COMPONENTS
 
 this one works:
 

import React from 'react';
import Clock from 'react-live-clock';

const LiveClock = () => {
return (
<Clock format={'HH:mm:ss'} ticking={true} />
)
}
export default LiveClock

 
 
 
 https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/