Deep Dive

“The fastest auto dealership site in the world” How relentless optimization 8xed conversions

ContactSign Up for Free
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

© 2022 Gatsby, Inc.