Frontmatter as Page Context (gatsbyjs#56)

Use frontmatter in page-plugin context so people can make queries based on it
ChristopherBiscardi · Jun 27, 2019 · 2404878 · 2404878
1 parent ca0fb4f
commit 2404878
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/packages/gatsby-plugin-mdx/gatsby-node.js b/packages/gatsby-plugin-mdx/gatsby-node.js
@@ -1,6 +1,9 @@
 const path = require("path");
+const fs = require("fs-extra");
+const merge = require("lodash/merge");
 const escapeStringRegexp = require("escape-string-regexp");
 const defaultOptions = require("./utils/default-options");
+const extractExports = require("./utils/extract-exports");
 const mdx = require("./utils/mdx");
 
 /**
@@ -13,6 +16,37 @@ exports.onCreateNode = require("./on-create-node");
  */
 exports.setFieldsOnGraphQLNodeType = require("./extend-node-type");
 
+/**
+ * Add frontmatter as page context for MDX pages
+ */
+exports.onCreatePage = async ({ page, actions }, pluginOptions) => {
+  const { createPage, deletePage } = actions;
+  const { extensions, ...options } = defaultOptions(pluginOptions);
+  const ext = path.extname(page.component);
+
+  if (extensions.includes(ext)) {
+    const content = await fs.readFile(page.component, "utf8");
+    const code = await mdx(content, options);
+
+    // grab the exported frontmatter
+    const { frontmatter } = extractExports(code);
+
+    deletePage(page);
+    createPage(
+      merge(
+        {
+          context: {
+            frontmatter: {
+              ...frontmatter
+            }
+          }
+        },
+        page
+      )
+    );
+  }
+};
+
 /**
  * Add the webpack config for loading MDX files
  */

diff --git a/packages/gatsby-plugin-mdx/on-create-node.js b/packages/gatsby-plugin-mdx/on-create-node.js
@@ -1,5 +1,4 @@
 const crypto = require("crypto");
-const merge = require("lodash/merge");
 const defaultOptions = require("./utils/default-options");
 const mdx = require("./utils/mdx");
 const extractExports = require("./utils/extract-exports");
@@ -36,17 +35,7 @@ module.exports = async (
   const code = await mdx(nodeContent, options);
 
   // extract all the exports
-  const nodeExports = extractExports(code);
-
-  // grab the frontmatter
-  const classicFrontmatter = nodeExports._frontmatter || {};
-  const exportFrontmatter = nodeExports.frontmatter || {};
-
-  // // delete the frontmatter from the exports
-  delete nodeExports._frontmatter;
-  delete nodeExports.frontmatter;
-
-  const frontmatter = merge(classicFrontmatter, exportFrontmatter);
+  const { frontmatter, ...nodeExports } = extractExports(code);
 
   const mdxNode = {
     id: createNodeId(`${node.id} >>> Mdx`),

diff --git a/packages/gatsby-plugin-mdx/package.json b/packages/gatsby-plugin-mdx/package.json
@@ -18,6 +18,7 @@
     "babel-plugin-pluck-imports": "0.0.1",
     "debug": "^3.1.0",
     "escape-string-regexp": "^1.0.5",
+    "fs-extra": "^7.0.0",
     "gray-matter": "^4.0.1",
     "json5": "^1.0.1",
     "lodash": "^4.17.10",

diff --git a/packages/gatsby-plugin-mdx/utils/create-mdx-node.js b/packages/gatsby-plugin-mdx/utils/create-mdx-node.js
@@ -1,5 +1,4 @@
 const crypto = require("crypto");
-const merge = require("lodash/merge");
 const mdx = require("./mdx");
 const extractExports = require("./extract-exports");
 
@@ -13,17 +12,7 @@ module.exports = async (
   const code = await mdx(nodeContent, options);
 
   // extract all the exports
-  const nodeExports = extractExports(code);
-
-  // grab the frontmatter
-  const classicFrontmatter = nodeExports._frontmatter || {};
-  const exportFrontmatter = nodeExports.frontmatter || {};
-
-  // // delete the frontmatter from the exports
-  delete nodeExports._frontmatter;
-  delete nodeExports.frontmatter;
-
-  const frontmatter = merge(classicFrontmatter, exportFrontmatter);
+  const { frontmatter, ...nodeExports } = extractExports(code);
 
   const mdxNode = {
     id: createNodeId(`${node.id} >>> ${node.internal.type}Mdx`),

diff --git a/packages/gatsby-plugin-mdx/utils/extract-exports.js b/packages/gatsby-plugin-mdx/utils/extract-exports.js
@@ -13,18 +13,18 @@ module.exports = code => {
 
   const exportedVariables = gatherExports.results();
 
-  // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/src/on-node-create.js#L22
-  // Convert date objects to string. Otherwise there's type mismatches
-  // during inference as some dates are strings and others date objects.
-  // if (data.data) {
-  //   data.data = _.mapValues(data.data, v => {
-  //     if (_.isDate(v)) {
-  //       return v.toJSON()
-  //     } else {
-  //       return v
-  //     }
-  //   })
-  // }
+  // grab the frontmatter
+  const {
+    _frontmatter: classicFrontmatter = {},
+    frontmatter: exportFrontmatter = {},
+    ...newExportedVariables
+  } = exportedVariables;
 
-  return exportedVariables;
+  // add the merged frontmatter to the exports
+  newExportedVariables.frontmatter = {
+    ...classicFrontmatter,
+    ...exportFrontmatter
+  };
+
+  return newExportedVariables;
 };