Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

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.