Source Quickstarts from JSON and Fetch images

[zstix]

Description

This PR changes how we source (load) the quickstarts into GraphQL so that we can "query" for them in Gatsby. Previously were using gatsby-source-filesystem and gatsby-transformer-json to load the quickstarts.json file directly into GraphQL. This was nice because we didn't need to specifically define all the types for each field in the JSON file (the plugins inferred all the types).

Unfortunately, this came with the limitation that it was very hard to update certain fields to be different types. For example, we have logoUrl in the JSON file, but we actually want to download that image and turn it into a "File" node for use with sharp. Additionally, there are things that we create (such a slug) that don't exist in the JSON file.

This PR introduces a local plugin called gatsby-source-quickstarts. This is the recommended way of getting slightly more complex stuff into the GraphQL instance. We need to define the type(s) ourselves, but this now allows us to do the following:

• Download and built with all the logos and screenshots
• Use sharp to optimize all non-SVG images (we can literally query images by the size we want)
• Generate extra properties not in the JSON file without hacks

Reviewer Notes

Most of the work was done in plugins/gatsby-source-quickstarts/gatsby-node.js. This handles bootstrapping (loading the JSON), type definition, fetching images, and resolving extra properties. The rest of the code changes are adjustments to the files that worked with images to use <GatsbyImage> (sharp).

I took the time to refactor <QuickstartImg> a bit, since we're using it in a few places and the code needed a lot of work to utilize sharp.

There are a few warnings that show up when running this locally about using childImageSharp with SVGs. I haven't found a way to suppress this, but it can be ignored, since we're only using that method on non-SVG images.

Related Ticket(s)

• NR-20529

[gatsby-cloud[bot]]

Gatsby Cloud Build Report

instant-observability-website

:tada: Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

:clock1: Build time: 4m

Performance

Lighthouse report

Metric	Score
Performance	:large_orange_diamond: 29
Accessibility	:green_heart: 100
Best Practices	:green_heart: 92
SEO	:large_orange_diamond: 85

:link: View full report

[nr-opensource-bot]

:tada: This PR is included in version 1.3.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: