├── index.js ├── package.json ├── gatsby-node.js ├── LICENSE └── README.md /index.js: -------------------------------------------------------------------------------- 1 | // noop 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-plugin-mdx-frontmatter", 3 | "version": "0.0.3", 4 | "description": "Utility to parse Markdown frontmatter with MDX in Gatsby using GraphQL Schema customization", 5 | "author": "Zach Schnackel ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "gatsby", 9 | "gatsby-plugin", 10 | "mdx", 11 | "frontmatter" 12 | ], 13 | "homepage": "https://github.com/zslabs/gatsby-plugin-mdx-frontmatter#readme", 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/zslabs/gatsby-plugin-mdx-frontmatter.git" 17 | }, 18 | "peerDependencies": { 19 | "gatsby": ">=2.21.33", 20 | "gatsby-plugin-mdx": ">=1.2.7", 21 | "@mdx-js/mdx": ">=1.6.1", 22 | "@mdx-js/react": ">=1.6.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | exports.createSchemaCustomization = ({ 2 | actions: { createFieldExtension }, 3 | createContentDigest, 4 | }) => { 5 | createFieldExtension({ 6 | name: 'mdx', 7 | extend() { 8 | return { 9 | type: 'String', 10 | resolve(source, args, context, info) { 11 | // Grab field 12 | const value = source[info.fieldName] 13 | if (typeof value === 'undefined') { 14 | return null; 15 | } 16 | // Isolate MDX 17 | const mdxType = info.schema.getType('Mdx') 18 | // Grab just the body contents of what MDX generates 19 | const { resolve } = mdxType.getFields().body 20 | 21 | return resolve( 22 | { 23 | rawBody: value, 24 | internal: { 25 | contentDigest: createContentDigest(value), // Used for caching 26 | }, 27 | }, 28 | args, 29 | context, 30 | info 31 | ) 32 | }, 33 | } 34 | }, 35 | }) 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Zach Schnackel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-plugin-mdx-frontmatter 2 | 3 | Utility to parse Markdown frontmatter with MDX in Gatsby using [GraphQL Schema customization](https://www.gatsbyjs.org/docs/schema-customization/) 4 | 5 | _This package encompasses the work shared in [this blog post](https://zslabs.com/articles/mdx-frontmatter-in-gatsby/)._ 6 | 7 | ## Installation 8 | 9 | ```bash 10 | yarn add gatsby-plugin-mdx-frontmatter 11 | ``` 12 | 13 | ## Usage 14 | 15 | Add following to your `gatsby-config.js`: 16 | 17 | ```js 18 | plugins: [ 19 | { 20 | resolve: 'gatsby-plugin-mdx-frontmatter' 21 | }, 22 | ... 23 | ] 24 | ``` 25 | 26 | Example markdown file we want to attach MDX to: 27 | 28 | ```md 29 | --- 30 | title: My article 31 | items: 32 | - value: >- 33 | Item 1 **value** 34 | - value: >- 35 | Item 2 36 | 37 | - value: >- 38 | Item 3 __value__ 39 | content: >- 40 | Here's a **cool** graph! 41 | 42 | 43 | --- 44 | 45 | Article content. 46 | ``` 47 | 48 | We can use the provided `mdx` resolver to attach to each field in your `gatsby-node.js`: 49 | 50 | ```js 51 | exports.createSchemaCustomization = ({ actions: { createTypes } }) => { 52 | createTypes(` 53 | type Mdx implements Node { 54 | frontmatter: MdxFrontmatter 55 | } 56 | 57 | type MdxFrontmatter { 58 | items: [ItemValues] 59 | content: String @mdx 60 | } 61 | 62 | type ItemValues { 63 | value: String @mdx 64 | } 65 | `); 66 | }; 67 | ``` 68 | 69 | You can then use `` and `` as normal for these fields: 70 | 71 | ```js 72 | import { MDXProvider } from "@mdx-js/react"; 73 | import { MDXRenderer } from "gatsby-plugin-mdx"; 74 | import Button from "../components/Button"; 75 | import Graph from "../components/Graph"; 76 | 77 | const Article = ({ frontmatter, body }) => ( 78 | 79 |
80 |

{frontmatter.title}

81 | 82 |
    83 | {frontmatter.items.map((item) => ( 84 |
  • 85 | {item.value} 86 |
    • 87 | ))} 88 |
89 | 90 | {frontmatter.content} 91 | 92 | {body} 93 |
94 | 95 | ); 96 | ``` 97 | 98 | ## License 99 | 100 | [MIT](LICENSE) 101 | --------------------------------------------------------------------------------