docs for interpolate config

ProjectEvergreen · Feb 5, 2022 · b31aaba · b31aaba
1 parent 4906bd3
commit b31aaba
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md
@@ -19,6 +19,7 @@ export default {
     host: 'localhost'
   },
   port: 8080,
+  interpolateFrontmatter: false,
   markdown: {
     plugins: [],
     settings: {}
@@ -55,6 +56,52 @@ export default {
 }
 ```
 
+### Interpolate Frontmatter
+
+To support simple static templating in HTML and markdown pages and templates, the `interpolateFrontmatter` option can be set to `true` to allow the following kinds of simple static substitions using a syntax convention based on JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).
+
+#### Example
+Given some frontmatter in a markdown file:
+```md
+---
+template: post
+title: Git Explorer
+published: 04.07.2020
+description: Local git repository viewer
+author: Owen Buckley
+image: /assets/blog-post-images/git.png
+---
+```
+
+It can be accessed and substited statically in either markdown or HTML.
+
+##### Markdown
+```md
+# My Blog Post
+
+Published: ${globalThis.page.published}
+
+Lorum Ipsum.
+```
+
+##### HTML
+```html
+<html>
+  <head>
+    <title>My Blog - ${globalThis.page.title}</title>
+    <meta name="author" content="${globalThis.page.author}">
+    <meta property="og:title" content="My Blog">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://www.myblog.dev">
+    <meta property="og:image" content="https://www.myblog.dev/${globalThis.page.image}">
+    <meta property="og:description" content="My Blog - ${globalThis.page.description}">
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
 ### Markdown
 You can install and provide custom **unifiedjs** [presets](https://github.com/unifiedjs/unified#preset) and [plugins](https://github.com/unifiedjs/unified#plugin) to further customize and process your markdown past what [Greenwood does by default](https://github.com/ProjectEvergreen/greenwood/blob/release/0.10.0/packages/cli/src/transforms/transform.md.js#L68).  After running an `npm install` you can provide their package names to Greenwood.