October 07, 2018
Gatsby-remark-classes Automatically add class attributes to markdown elements. This is a plugin for gatsby-transformer-remark. You will have to update the selectors in your gatsby-config.js file. Some common selectors: h1 is now headingdepth=1 h2 is now headingdepth=2. Create a CI/CD Pipeline with Gatsby.js, Netlify and Travis CI. Creating static pages from Markdown requires creating them using the CreatePage API Gatsby provides. We create a gatsby-node.js file at the root of our project. We define our template from src/templates/template.js and we set the URL to follow to the slug from our frontmatter. In my case /first. Mapping from generic HTML elements. You can also map a generic HTML element to one of your own components. This can be particularly useful if you are using something like styled-components as it allows you to share these primitives between markdown content and the rest of your site. Gatsby JS: Build PWA Blog With GraphQL And React + WordPress Udemy Free Download Create Gatsby JS Progressive Web App With GraphQL And React + WordPress & Add Jam Stack To Your Skills.
I’ve converted my blog to Gatsby… finally!
For the last couple of years, this blog has been based on the Hugo static site generator. As a JavaScript developer who primarily uses React, the move to a tool that is based on React and GraphQL just made sense. I’ve been wanting to get into Gatsby for a while now and with the recent release of Gatsby v2, I just couldn’t wait any longer.
After reading through some docs and briefly tinkering with it in a couple of throw-away, sample projects, I was ready to commit for real. I installed the starter blog, made a few slight modifications and here we are!
I keept the start blog largely intact but tweaked a few settings, created a new template, and modified some queries. I had to make some very minor edits to my existing markdown files, but overall, moving the content over was no problem at all. In fact, I’m much happier with the content organization in my new Gatsby setup.
The coolest part of Gatsby is that it’s not just generating static content. This is still a React app, so I can easily take what I learn here and use it to build applications. Adding more interactive functionality here doesn’t require any changes or new dependencies, I just need to create some components and integrate them.
A focus on simplicity & accessibility
I want to keep things simple, both to read and for me to maintain. I also want to make sure that the content here is useful for as many people as possible, so I’ve put a lot of emphasis on accessibility.
The previous dark theme is no more. I may go back to darker colors someday, but I want to make sure I offer sufficient color contrast, so even with a dark theme, it won’t be the one I had before.
I’ve checked the site for accessibility issues with the axe plugin from Deque and fixed the items it uncovered 1. I also found an accessible theme for prismjs to make sure the color contrast on code examples is WCAG AA compliant.
No more comments
I love the ability to have conversations about my posts, but I’d rather not embed disqus in my site anymore. I might seek out a replacement at some point, but for now I’m just going to keep it simple and ask that people start a conversation with me on Twitter.
What’s next?
Now that I’ve finished migrating everything over to Gatsby, I will continue to make minor adjustments and I have some “features” I’ll be building with React and GraphQL. I’m really happy with Gatsby so far and I’m a little sad I didn’t just make the time to learn it when it first caught my eye, but better late than never.
More writing?
I’d love to think that this move is going to be the thing that gets me unstuck on my many partially written posts and that I’m going to get better about making time to write on a consistent basis. The likely reality is that I will continue to struggle to complete posts and the time I make for “extra-cirriculars” will continue to be split between learning new tech, creating egghead lessons, preparing workshops for work and meetups, and writing. I will write when I can knowing that when I do, the process will be simple and the output will be fast and accessible to anybody who wants to consume it.
- There are some color contrast checks that are still inconclusive in posts with code examples. This appears to be due to elements overlapping in the DOM, so the axe tool cannot determine the background color of the text in question. The prism theme is an accessible one and I’ve double checked the colors individually so it should be good.↩
I recently switched my personal site over from 'vanilla' react, to this lightning fast gatsbyjs site. I wouldn't want to start blogging about code without being able to show off code snippets in the best way possible; with proper syntax highlighting. I was blown away by how easily I was able to accomplish this with the strength of the gatsby plugin library.
Supposing you already have a markdown blog running using gatsby-transformer-remark on your gatsby site, you'll only need to install a few more plugins for this to work.
After you've installed these plugins, let's add them to our gatsby-config.js
We're almost there - now we just need to import some styling to make it look good
Styling and themes
Prismjs comes with some built-in themes, which you can add directly from the prismjs npm module.
This is done by simply importing it in our gatsby-browser.js file:
Gatsbyjs Markdown Video
Aaaaand... That's it! I told you it would be quick. My blog is a living example of what you can expect.
How do I actually use it in my markdown?
Now, all you have to do to get the sweet highlighting, is to add some code blocks to your markdown:
A fenced code block is created by adding three backticks () or three tildes (~~~) before and after your code.
To get syntax highlighting with prismjs, you add the language right after the first three backticks:
Gatsbyjs Markdown Image
Which will output...
Gatsby Markdown Images
Beautiful!