Replaces custom tags with HTML comments without React or Gatsby stripping them off. Good for SSI comments and others.
npm install gatsby-plugin-html-commentsWhen trying to add HTML comments to Gatsby, they get removed or encoded as string.
This plugin adds comments after Gatsby's build process finishes, replacing specificied custom tags with whatever code the user needs.
This was created after the need to insert SSI comments inside Gatsby
yarn add gatsby-plugin-html-comments or npm install gatsby-plugin-html-comments
Add the plugin to your gatsby-config.js file, preferably at the last, after (almost) every other plugin.
``javascriptgatsby-plugin-html-comments
module.exports = {
{
resolve: ,
options: {
files: ['./public/*/.html', './public/*.html'],
comment: [
{
regexp: /
comment: ,`
},
]
}
}
}
- files: Array of filepaths. The replacer will look on each of these and replace the custom tag with the comment.
- comment: Array of objects.
- regexp: Regular expression with a chosen custom tag. Important: always lowercase and hyphen separated to avoid issues.
- comment: The comment or code you want to insert in the final file.
You can add as many objects as you see fit, depending on how many substitutions you need to make.
Original code:
`javascript`
return (
Hello World
)
Result: or the comment gets fuzzy...
`html`
%3C%21--%20keep%20this%20comment%21%20--%3E
Hello World
or the comment gets removed entirely.
Config in gatsby-config.js:
`javascriptgatsby-plugin-html-comments
module.exports = {
{
resolve: ,
options: {
files: ['./public/*/.html', './public/*.html'],
comment: [
{
regexp: /
comment: ,`
},
]
}
}
}
Original code:
`javascript`
return (
Hello World
)
Result:
`html``
Hello World
... are accepted through Github, from improvements on the code itself to making this readme better.