Adding Images

2020 August 10th

I'm not posting about the react-live section because I don't think I'll ever actually use it. However, it looks like a very cool library, so I encourage you to read about it.

If there's one thing I hate about Gatsby, it's the image API. Don't get me wrong: I do love the way Gatsby automatically handles images and makes them responsive by default. But it seems like the API could be much simpler. I had to add four packages, a graphql query, and code in the component to get it all to work. Regardless, I can now add cover images to my blog posts, so that's cool.

So I added lines 13-20 for the cover in the frontmatter to the graphql query:

1export const query = graphql`
2  query SITE_INDEX_QUERY {
3    allMdx(
4      sort: { fields: [frontmatter___date], order: DESC }
5      filter: { frontmatter: { published: { eq: true } } }
6    ) {
7      nodes {
8        id
9        excerpt(pruneLength: 250)
10        frontmatter {
11          title
12          date(formatString: "YYYY MMMM Do")
13          cover {
14            publicURL
15            childImageSharp {
16              sizes(maxWidth: 2000, traceSVG: { color: "#639" }) {
17                ...GatsbyImageSharpSizes_tracedSVG
18              }
19            }
20          }
21        }
22        fields {
23          slug
24        }
25      }
26    }
27  }
28`;

What I quickly learned is that one of the markdown files had to have a cover image for this query to work. Otherwise it chokes on the cover key. I also noticed that I can't highlight individual lines. The ability to do so may require the addition of another Gatsby plugin. I'm pleased with the progress overall, however.

Update: I've since figured out how to configure things so that I can highlight lines in the code snippets. However, I've since discovered the gatsby-remark-vscode library which can not only highlight lines but also display diffs. Once everything is set up, I'll be pulling out old code and setting things up to use it instead of prism-react-renderer.

Update 2: gatsby-remark-vscode did not work the way I wanted it to, so so it's back to rolling my own solution for now

Update 3, 2021-05-22: I just migrated everything from Gatsby2 to Gatsby 3. As a result, I had to make the following change in my (as yet unused) image query

1cover {
2  publicURL
3  childImageSharp {
4-    sizes(maxWidth: 2000, traceSVG: { color: "#639" }) {
5-      ...GatsbyImageSharpSizes_tracedSVG
6+    fluid(maxWidth: 2000, traceSVG: { color: "#639" }) {
7+      ...GatsbyImageSharpFluid_tracedSVG
8    }
9  }
10}