Is there a way to have variables in the markdown pages which will get replaced with values? I am writing documentation about a service which as a URL. The URL is in a couple of markdown files and I'd like to not have to find and replace incase it changes.
Is my best option to add in a custom component in Markdown? It seems heavy handed for this.
You can write a little custom helper for this (or use something like lodash.template
https://lodash.com/docs/4.17.11#template)
Here's a quick and dirty solution:
Given a markdown file sample.md
with the following contents:
---
title: Sample
---
## Hello World
This is a [link](%URL%/sub-path), and so is [this](%URL%/sub-path)
You can create a file (let's call it src/utils/template.js
) and write something like this
export default function template(content, data) {
return content.replace(/%(.+)%/g, (match, key) => {
const value = data[key]
if (typeof value !== 'undefined') {
return value
}
return match // guards against some unintentional prefix
});
}
Now wiring it all together, you'll just need to _use_ this template function to replace your content. The data
object can be whatever you want and can be pulled from wherever (e.g. graphql, some constants file, environment variables, etc.).
import React from 'react'
import template from '../utils/template';
const URL = 'https://google.com'; // this can be from wherever
export default function SomeMarkdownPage({ data }) {
// data is from GraphQL, presume the parent is data.markdown
return (
<div dangerouslySetInnerHTML={{
__html: template(data.markdown.html, {
URL
})
}} />
)
}
Does this make sense? This could be a fairly useful gatsby-remark- plugin as well, but I'm not sure that exists! If you have any interest in writing that, that'd be cool, but for now, this will certainly work for your use case!
Going to close this as answered, but please feel free to re-open if any of us can help further. Thanks for using Gatsby!
Most helpful comment
You can write a little custom helper for this (or use something like
lodash.template
https://lodash.com/docs/4.17.11#template)Here's a quick and dirty solution:
Given a markdown file
sample.md
with the following contents:You can create a file (let's call it
src/utils/template.js
) and write something like thisNow wiring it all together, you'll just need to _use_ this template function to replace your content. The
data
object can be whatever you want and can be pulled from wherever (e.g. graphql, some constants file, environment variables, etc.).Does this make sense? This could be a fairly useful gatsby-remark- plugin as well, but I'm not sure that exists! If you have any interest in writing that, that'd be cool, but for now, this will certainly work for your use case!
Going to close this as answered, but please feel free to re-open if any of us can help further. Thanks for using Gatsby!