Community Plugin
View plugin on GitHubGatsby 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