PERFORMANCE

Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Transform Carbonara

Convert files into to code screenshots using carbonara.

Getting Started

yarn add gatsby-transform-carbonara

Setting Up

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: path.join(__dirname, "src", "code-examples"),
        name: "code-examples",
      },
    },
    {
      resolve: "gatsby-transform-carbonara",
      options: {
        sourceInstanceName: "code-examples",
        carbonaraOptions: {
          backgroundColor: "rgba(255, 0, 0, 1)",
        },
        carbonaraUrl: "https://carbonara.vercel.app/api/cook",
      },
    },
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
  ],
};

Querying

import { graphql } from "gatsby";

export const pageQuery = graphql`
  query Carbonara {
    allFile(filter: { sourceInstanceName: { eq: "code-examples" } }) {
      edges {
        node {
          id
          absolutePath
          childImageSharp {
            id
            fixed {
              srcSet
            }
          }
        }
      }
    }
  }
`;

Hiring

Uplift is hiring! Work on fun projects with us! Apply

© 2023 Gatsby, Inc.