Image Processing in Gatsby

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • rehype-react

    plugin to transform to preact, react, vue, etc

    import React from 'react' import { graphql } from 'gatsby' import RehypeReact from 'rehype-react' const MyGatsbyPage = ({ data }) => { /* AST renderer we use at Anvil: https://github.com/rehypejs/rehype-react */ const renderAst = new RehypeReact({ createElement: React.createElement, }).Compiler return (

    {data.frontmatter.title}

    {data.frontmatter.date}

    By ${data.frontmatter.author}

    {data.frontmatter.summary}

    {renderAst(data.htmlAst)}
    ) } export default MyGatsbyPage export const pageQuery = graphql` query BlogPostByPath($slug: String!) { site { siteMetadata { siteName title description keywords } } markdownRemark(frontmatter: { path: { eq: $slug } }) { htmlAst frontmatter { date title summary author image { publicURL childImageSharp { gatsbyImageData } } } } } `

  • sanity

    Sanity Studio – Rapidly configure content workspaces powered by structured content

    Most static sites are article-based. But how do you host your content? Do you opt for a CMS like WordPress, Sanity, or Contentful? Or what if you want something simple, like keeping your content in markdown alongside your code? There are many places for your content to live, and the questions above are only for static content. Many more questions arise when user-specific, dynamic content is involved, likely requiring a database.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • sharp

    High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

    Now that we know about Gatsby's data layer and plugin system, let's add image processing to our Super Sophisticated™ site. Sharp is a Node.js image processing library that Gatsby uses for its plugins. It resizes and compresses images, as well as converts them to web-optimal formats (WebP and AVIF).

  • foundation

    GraphQL Foundation Charter and Legal Documents (by graphql)

    GraphQL is how you access your data from Gatsby's data layer. There are two ways to query for data:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts