Steps and learnings from build my blog with gatsby

1. followed the basic tutorial on gatsby gatsby basic tutorial

2. my completed version. Link to my github completed version

Things and more things to figure out

adding images to mdx files

1. install the gatsby-remark-images becareful of tutorials that use the gatsby-transformer-remark

npm install gatsby-remark-images

can only be used within the relative path or folders inside the relative path of the mdx file.

adding gif images

• install gatsby-remark-gifs

remark images doenst work with gif's in mdx files need to use gatsby-remark-gifs

npm install gatsby-remark-gifs

place within the gatsbyremarkplugins:

 gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
             
            },
          },"gatsby-remark-gifs"
        ],

• use component but you need import the gif file inside the component gif file doesnt need to be in a relative path... you can edit img properties like width, height etc. but not very versitle.. unless you have the gif files are external urls, then you can pass the url as a prop.

import * as React from "react";
import gifImage from "../images/gifs/animation.gif"

const GifComponent = () => {
    return(
        <div>
        <img src={gifImage} width="500" />
    </div>

    );

};

export default GifComponent;

in mdx file below front matter import component

import GifComponent from "../../src/components/gifComponent"

then call component anywhere in mdx file

<GifComponent/>

CSS

hmm for beginners not covered... i did try some plugins and css providers like bootsrap in which you can download the css and import into the jsx component. but makes things more complicated, when you just learning css i.e tailwind.. but can search for free premade ui components and copy pase the html css code over like Tailwind Sailboat UI or the bootstrap Bootstrap UI Components

so dicided to learn how css works and how it works in gatsby.. before i use them.

you should also learn css and how to use components in react before you play styling components and emotion..

CSS musings

you can use element selectors after the class name in css modules. where nav-link-item can also style the <LINK> tag instead of the tutorial which had the <li> element and the <LINK> element as seperate classes

 .nav-link-Item a{
    float: left;
    display: block;
    padding: 16px 16px;
    text-decoration: none;
    color: black;
    font-size: large;
    text-align: center;
  }

.nav-link-Item a:hover {
  background-color: #c7c3c3;
  }

original settings from tutorial

 <li className={navLinkItem}>
            <Link to="/" className={navLinkText}>Home</Link>
          </li>

 .nav-link-item {
    padding-right: 2rem;
  }
  .nav-link-text {
    color: black;
  }

useful when you look at examples from w3 school or other css stuff. as copied over the navbar from there examples as im learning css still. navbar css code from w3schools

global css stuff

create a file gatsby-browser.js in root directory, you can use this to import all you global css and typefaces(fonts).

this way you dont have to set them up in each css.module

// custom typefaces
import "@fontsource/merriweather"
// custom CSS styles
import "./src/style.css"

fonts came from gatsby plugin Fontsource but there are other plugins..

npm install @fontsource/open-sans 

inside sytle.css

body {
  font-family: "merriweathers";
}

or just import the fonts inside the css file

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

.container {
    margin: auto;
    max-width: 800px;
    font-family:'Lato',sans-serif;
  }
  h1 {
    font-family: 'Quicksand', sans-serif;
}