Support graymatter data in asciidoc files

examples/using-asciidoc/gatsby-config.js

@@ -10,7 +10,14 @@ module.exports = {
         path: `${__dirname}/src`,
       },
     },
-    `gatsby-transformer-asciidoc`,
+    {
+      resolve: `gatsby-transformer-asciidoc`,
+      options: {
+        attributes: {
+          'skip-front-matter': true
+        }
+      }
+    },
     {
       resolve: `gatsby-plugin-typography`,
       options: {

examples/using-asciidoc/src/pages/front-matter.adoc

@@ -0,0 +1,16 @@
+---
+:layout: post
+source: halkeye
+---
+= Testing front matter
+Doc Writer <[email protected]>
+
+An introduction to http://asciidoc.org[AsciiDoc].
+
+== First Section
+
+* item 1
+* item 2
+
+[source,ruby]
+puts "Hello, World!"

examples/using-asciidoc/src/templates/article.js

@@ -66,6 +66,21 @@ class Article extends React.Component {
             </tbody>
           </table>
         )}
+        {this.props.data.asciidoc.frontmatter && (
+          <table>
+            <thead>
+              <tr>
+                <td colSpan="2">Frontmatter</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th>frontmatter.source</th>
+                <td>{this.props.data.asciidoc.frontmatter.source}</td>
+              </tr>
+            </tbody>
+          </table>
+        )}
         <div
           dangerouslySetInnerHTML={{ __html: this.props.data.asciidoc.html }}
         />
@@ -98,6 +113,9 @@ export const pageQuery = graphql`
         authorInitials
         email
       }
+      frontmatter {
+        source
+      }
     }
   }
 `

packages/gatsby-transformer-asciidoc/README.md

@@ -85,6 +85,22 @@ In the asciidoc file you can insert your image just by using:
 - In case a `pathPrefix` is set it will altered the images location.
 - In case you want to be able to override the defined imagesdir inside of your asciidoc file you have to end the path with a `@` (e.g. `/images@`).
 
+## Support front/graymatter
+
+```javascript
+// In your gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-transformer-asciidoc`,
+    options: {
+      attributes: {
+        "skip-front-matter": true,
+      },
+    },
+  },
+]
+```
+
 ## How to query
 
 A sample GraphQL query to get AsciiDoc nodes:

packages/gatsby-transformer-asciidoc/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "asciidoctor": "^2.2.5"
+    "asciidoctor": "^2.2.5",
+    "gray-matter": "^4.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",

packages/gatsby-transformer-asciidoc/src/gatsby-node.js

@@ -1,4 +1,5 @@
 const asciidoc = require(`asciidoctor`)()
+const grayMatter = require(`gray-matter`)
 const _ = require(`lodash`)
 
 function unstable_shouldOnCreateNode({ node }, pluginOptions = {}) {
@@ -97,6 +98,12 @@ async function onCreateNode(
       pageAttributes,
     }
 
+    if (doc.getAttribute(`front-matter`)) {
+      asciiNode.frontmatter = grayMatter(
+        `---\n` + doc.getAttribute(`front-matter`)
+      ).data
+    }
+
     asciiNode.internal.contentDigest = createContentDigest(asciiNode)
 
     createNode(asciiNode)