André Larsen

Developer blog

COVID19 Lockdown Dev Log – Day 4

What I Worked On

Setting up my portfolio development with Gatsby. Added a GitHub repo “porfolio-v3”. Added Bulma CSS as my CSS framework.

What I Learned

I tried working with SVGs in React/Gatsby. It’s not just “copy paste inline SVG into a component” and pray to the HTML gods – no! I Had to download a plugin for that; ‘gatsby-plugin-react-svg’. 

//gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/
        }
      }
    }
  ]
}

You create a file, save it as ‘.svg’ and add the XML for the SVG. You then configure the plugin to look for SVGs in your desired folder. In my case it was ‘src/assets/svg/’, but you only need to list the folder itself, as seen in the above code snippet at ‘include’. The plugin does its magic and allows you to import the SVG into your app like you would import any React component. Neat! 

import React from "react"
import Arrow from "../assets/svg/Arrow.svg";

export default () => {
    return(
      <div className="arrow-container">
        <Arrow />
      </div>
    )
}

I wanted to use CSS-Modules and Bulma. It’s not that you can’t mix the two of them, but some research indicated it would be adding complexity where it’s not needed. Therefore I resorted to Bulma only and “normal global” CSS styling when Bulma would come up short.

I learned that installing Bulma requires a few more steps when adding it to a Gatsby project. Normally I would just use the CDN for Bulma, paste it into <head> and be good to go. In Gatsby I needed to:

Add three packages from npm: bulma, node-sass and gatsby-plugin-sass

npm install bulma node-sass gatsby-plugin-sass

Add the plugin in ‘gatsby-config.js’:

//gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
  ]
}

Create a sass file that imports ‘bulma.sass’:

//bulma-styles.scss

@charset "utf-8";

@import "~bulma/bulma.sass";

Import the sass file into ‘index.js’:

//index.js

import React from "react"
import "./bulma-styles.scss";

export default () => {
    return(
        <div>
         ...some code
        </div> 
    )
}

There! Done! 😀 Now I was finally able to start building the landing section of my page. The mockup for my full design can be found in ‘Resources’.

What Distracted Me During The Day

  • My C:/ drive was running low on storage. My OCD couldn’t have that so I cleaned up before going back to work 😀 .
  • Messenger

Resources

Related Post

COVID19 Lockdown Dev Log – Day 8

COVID19 Lockdown Dev Log – Day 26, Object Destructuring In JavaScript

COVID19 Lockdown Dev Log – Day 16, Favicons And Webpack Imports