# SIMPLE GATSBY MDX STEPS

`npm install -g gatsby-cli`

`gatsby new my-site`

`cd mysite`

create your repository on GitHub, then

git remote add origin https://github.com/J0RD4NK0FFM4N/jk-firstby.git
git branch -M main
git push -u origin main

add mdx

install with

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

add to config.js

`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    defaultLayouts: {
      default: require.resolve("./src/components/mdx-layout.js"),
    },
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 960,
        },
      },
    ],
  },
},

make the first page in the pages in the src folder:

//a react componet goes in here.//
import React from "react"
const TheFirstPage = function(){
  return(
      <p>so this is the first page of firstby</p>
  )
}
export default TheFirstPage

then check it out at localhost8000/thefirstpage:

LAUREN

import React from 'react'

const myUncapitalizedComponent = () => {
    return (
        <>
        <h1>this works</h1>
        <p>because the uncapitalized variable isn't in JSX</p>
        </>
        
    )
}

export default myUncapitalizedComponent

make it look better:
create a mdx-layout.js file:

export default function(props){
  return(
    <div style={{
      backgroundColor: "plum",

    }}>
      <div style={{
        margin: "auto",
        width:"80%",
        marginTop: "50px",
        fontFamily: "sans-serif",
      }}>

      {props.children}
      </div>
    </div>
  )
}

check it out:

while I personally LOVE plum and am delighted that it exists as a known css color, I'll ultimately go with a slicker light grey. We actually found [this site that is suuuper cool!](https://casesandberg.github.io/react-color/) I found a grey using one of the many color pickers here! I had to do some digging though becaus I actually liked the opaque version that was hidden under the pickers. It was an alpha of .5 rather than 1 in case anyone else wants to know!

# 20210112 Daily Spin Up Notes

So today I wanted to see if I could
1. write a new script that works to get faster at that process
2. try a new template
3. make a site for Fall Undergraduate Reflections of Winter Teaching Week

## gatsby-go-dim
aka the script for creating a gatsby site using [this dimension themed starter](https://github.com/codebushi/gatsby-starter-dimension).

Here is a [preview of the dimension starter](https://gatsby-dimension.surge.sh/).

and the script:

#! /usr/bin/env zsh

PROJECT_NAME=$1
gatsby new $PROJECT_NAME https://github.com/codebushi/gatsby-starter-dimension
DATA_STRING="{\"name\":\"$PROJECT_NAME\",\"private\":false}"
curl -u "J0RD4NK0FFM4N:$GITHUB_TOKEN" https://api.github.com/user/repos -d $DATA_STRING
atom $PROJECT_NAME
cd $PROJECT_NAME
git remote add origin "https://github.com/mkuzmick/$PROJECT_NAME.git"
git branch -M main
git push -u origin main
open -a "Google Chrome" "http://localhost:8000"
gatsby develop

Since I am bringing in relatively little content which I have curently in a google doc, I didn't include the part about pulling in a folder (and now think that maybe the whole data string part of this script is irrelavent?)

I didnt forget the thing I always forget (the whole chmod thing)! It's what launches the script as a real life script!