1. Gatsby Markdown Relationships
2. Gatsby Js Markdown Tutorial
3. Gatsby Js Markdown Free

Using Chart.js with Gatsby markdown. Ask Question Asked 10 months ago. Active 10 months ago. Viewed 481 times 0. I'm trying to display a chart.js chart in a markdown generated blog post on a gatsby website. Following the chart.js installation guide here.

Lately Next.js has been gaining a lot of steam, and I've been looking for an opportunity to give it a real shot. This website has been a Gatsby website since its inception, so I created a branch and began the conversion process. The conversion is now finished, and it's time to reflect, evaluate, and make up my mind.

🟣 gatsby code

At first I was loving hacking away so much Gatsby specific code. I removed every gatsby-* package, got rid of all the graphql, and deleted the gatsby-config.js file with a smile. All that proprietary code was replaced with plain old node functions.

• Setelah sekian lama tidak menulis, akhirnya bisa menulis lagi di blog ini. Tidak terasa blog ini berusia hampir 4 tahun dan seiring semakin.
• In this blog, we will learn about how to create your blog site with Gatsby.js static site generator. It will use power of Gatsby, GraphQL and ReactJS.

By the end of it all I was definitely net negative, but I also had to add my fair share of code. My diff was nowhere near as impressive as Lee Robinson's when he converted the gatsby-starter-blog to Next.js.

👨🏼‍💻 development environment

Once I had things up and running, I started to notice that the Next.js development server seemed slow. I realized that Next.js operates in a very different way than Gatsby.

While these numbers suggest that Next.js is faster by all accounts, the development server didn't feel that way. I believe this is because Gatsby does all the work up front, whereas Next.js builds its pages on the fly.

I much preferred Gatsby's slow start for a fast runtime, as I usually only start the server once, but navigate pages constantly while working on the site. Luckily, both sites were blazing fast once built and deployed.

🔻 markdown support

Markdown parsing and transformation is key when creating a blog. I usually rely on Gatsby's plugin ecosystem to handle all that for me, but with Next.js I was on my own. I had to become an expert at remark and its plugins in order to get the transformations I wanted. I even had to fix a bug in one of the libraries!

• GitHub Flavored Markdown
• Linked headings
• Media embeds
• Code highlighting
• External links open in new tab

In order to accomplish this I dug deep into the list of remark plugins, and leveraged a few of them to create my own parseMarkdown function. Even though it's only twenty lines of code, this simple function took a lot of investment to create, and it's still not perfect.

I still can't figure out how to highlight specific lines in code blocks. The icon next to linked headers is not showing up. I had to write custom transformers for every media embed. I lost the ability to use vscode themes for syntax highlighting.

These are necessary features in a developer blog, and these are the types of things that the gatsby-remark-* plugins provide for you

🖼️ image component

What really sparked me to try Next.js was the announcement of their image component.

Just like their development server, Next.js optimizes images on the fly to prevent long build times. Although the Next.js <Image/> component does prevent layout shift, it still feels like the image just pops in. That's why I prefer the blur up effect of Gatsby images.

But the worst thing about Next.js images is that they can't be used inside of Markdown files without writing a custom remark transformer. With Gatsby, getting optimized images from Markdown files is as simple as installing gatsby-remark-images.

This is yet another example of how the Gatsby plugin ecosystem has an answer for everything, especially when it comes to Markdown.

📚 content location

I really enjoy keeping my blog posts and their associated images in the same directory. With Next.js, all images referenced in Markdown must be stored in the /public directory. This provides more friction when authoring a blog post, and would make things more difficult if I ever wanted to move my content elsewhere in the future.

👨🏼‍⚖️ the verdict

Remember, I'm evaluating these two frameworks in the context of a Markdown blog. My criteria would change if I were evaluating them for a web application.

I didn't talk about things like hosting, TypeScript support, MDX support, testing, redirects, or serverless functions. But I found that Gatsby and Next.js compare similarly on those fronts.

Ultimately I chose the tool that felt like it was made specifically for Markdown blogging, the tool that offers plugins to do exactly what I want, and the tool that popularized static sites on the Jamstack.

I stuck with Gatsby.

October 07, 2018

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 ¹. 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.

Gatsby Markdown Relationships

More writing?

Gatsby Js Markdown Tutorial

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.

Gatsby Js Markdown Free

1. 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.↩