Can i use mermaid gatsby-plugin in this theme?
havefunatcode opened this issue · 2 comments
havefunatcode commented
While using the starter portfolio theme you worked on, I wanted to add mermaid to my blog post, so I found gatsby-plugin page for mermaid(https://www.gatsbyjs.com/plugins/gatsby-remark-mermaid/), and I set gatsby-config.js to apply it.
I attach my code.
module.exports = {
plugins: [
{
resolve: "gatsby-theme-portfolio-minimal",
options: {
siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
manifestSettings: {
favicon: "./content/images/favicon.png", // Path is relative to the root
siteName: "My Minimal Portfolio", // Used in manifest.json
shortName: "Portfolio", // Used in manifest.json
startUrl: "/", // Used in manifest.json
backgroundColor: "#FFFFFF", // Used in manifest.json
themeColor: "#000000", // Used in manifest.json
display: "minimal-ui", // Used in manifest.json
},
contentDirectory: "./content",
blogSettings: {
path: "/blog", // Defines the slug for the blog listing page
usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
},
// googleAnalytics: {
// trackingId: "UA-XXXXXX-X",
// anonymize: true, // Default true
// environments: ["production", "development"] // Default ["production"]
// }
},
},
{
resolve: `gatsby-remark-mermaid`,
options: {
launchOptions: {
executablePath: './content'
},
svgo: {
plugins: [{ name: 'removeTitle', active: false }]
},
mermaidOptions: {
theme: 'neutral',
themeCSS: '.node rect { fill: #fff; }'
}
}
},
],
};
I hope it's work. but it doesn't.
I'm a junior java developer, so I'm very inexperienced with js. Could you please advise how to apply it?
konstantinmuenster commented
Hey @havefunatcode!
I am not sure if this will work out of the box. At first glance, you could try two things:
- Replace the current plugin entry with the object below.
- Try to find the right executablePath for puppeteer (e.g. this issue)
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: `gatsby-remark-mermaid`,
options: {
launchOptions: {
executablePath: 'path/to/chrome/executable'
},
svgo: {
plugins: [{ name: 'removeTitle', active: false }]
},
mermaidOptions: {
theme: 'neutral',
themeCSS: '.node rect { fill: #fff; }'
}
}
}
]
}
}
havefunatcode commented