npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-transformer-mdx-data

v1.0.0

Published

A Gatsby plugin to transform MDX files so they can be rendered without requiring a page to be created. An example use case is using MDX files as a basic CMS.

Downloads

2

Readme

Description

A Gatsby plugin to transform MDX files so they can be rendered without requiring a page to be created. An example use case is using MDX files as a basic CMS.

The plugin creates a Data<Type> node for every Mdx node that is created for files in the provided data directories in addition to registering an mdx resolver for these nodes to render markdown. This allows for the Data<Type> nodes to be queried as a basic CMS.

For example, using gatsby-transformer-mdx-data you could create a src/data/products folder to store product data in .mdx format and then query the products using allDataProduct and dataProduct.

Why?

Following some changes to gatsby-plugin-mdx, in order to support MDX v2 the html node was removed and it was no longer possible to render markdown outside of a page (see the v2 discussion, question about including HTML in feeds and complaint about not being able to render multiple markdown items).

I recently rewrote my website to use the latest version of Gatsby with Typescript and wanted to use .mdx files as a rudimentary CMS. Following a suggestion on one of the Gatsby GitHub issues, I managed to get it working for my own purposes and decided to make it a plugin both to help others and for my own learning.

DISCLAIMER: This is the first Gatsby plugin I have created and I know very little about the inner workings of bundlers and module resolution. This approach may have worked for me by sheer fluke!

Install

npm

npm i gatsby-transformer-mdx-data @mdx-js/react gatsby-plugin-mdx react

yarn

yarn add gatsby-transformer-mdx-data @mdx-js/react gatsby-plugin-mdx react

How to use

Changes to gatsby config

First, make sure you have gatsby-plugin-mdx and gatsby-source-filesystem correctly configured.

module.exports = {
  // ... more config
  plugins: [
    // ... more plugins
    'gatsby-plugin-mdx',
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'products',
            path: './src/data/products',
        },
        __key: 'products',
    },
  ],
}

You should be able to see the nodes returned with the following GraphQL query.

{
  allMdx {
    nodes {
      internal {
        contentFilePath
      }
    }
  }
}

Then add the plugin to gatsby-config.js (or gatsby-config.ts) and set jsxRuntime:

const path = require('path')
module.exports = {
  // ... more config
  plugins: [
    // ... more plugins
    {
      resolve: `gatsby-transformer-mdx-data`,
      options: {
        // Provide a list of absolute file paths of where data files live
        dataDirs: [
            path.resolve(__dirname, 'src/data/products'),
            path.resolve(__dirname, 'src/data/stores'),
        ],
      },
    },
  ],
  jsxRuntime: 'automatic',
}

Create data files

e.g. src/data/products/product1.mdx

---
title: Some product
price: 1234
---

Some _markdown_ about my **product**

Query data

Once configured the data nodes can be queried using allData<TYPE> and data<TYPE> - e.g. using the above example you would have the additional queries of allDataProduct, dataProduct, allDataStore and dataStore. The standard filter and sorting arguments work.

Each data node has an mdx field to return the markdown ready to pass to the MDX component. Any data in "frontmatter" will be copied directly onto the node.

{
    products: allDataProduct(limit: 10) {
        nodes {
            id
            title
            mdx
            price
        }
    }
    bestProduct: dataProduct(name: { eq: "BestProduct" }) {
        id
        title
        mdx
        price
    }
}

Render data

Once you have the mdx data, pass the result to the MDX component to render markdown.

import Mdx from 'gatsby-transformer-mdx-data';

const ProductPage = ({ mdx }) => <Mdx>{mdx}<Mdx>;

Use the MdxProvider to provide components for HTML elements rendered by Markdown. gatsby-transformer-mdx-data exports it as a convenience (import { MDXProvider } from 'gatsby-transformer-mdx-data';) or import from @mdx-js/react.

Available options

| Option | Type | Description | Default | Required | | ------ | ---- | ----------- | ------- | -------- | | dataDirs | string array | A list of absolute file paths of where data MDX files are stored | [] | Yes |

Examples of usage

There are 2 examples in the examples directory, one using JavaScript and one using TypeScript - the usage is essentially the same.

An example page using queried data might look like:

import { graphql } from 'gatsby';
import Mdx, { MDXProvider } from 'gatsby-transformer-mdx-data';

const IndexPage = ({ data }) => {
    return (
        <MDXProvider components={{
            SomeTag: ({ children }) => <div style={{ color: 'red'}}>{children}</div>
        }}>
            {data.products.nodes.map(({ id, title, mdx }) => (
                <div key={id}>
                    <h1>{title}</h1>
                    <Mdx>{mdx}</Mdx>
                </div>
            ))}
        </MDXProvider>
    );
};

export default IndexPage;

export const query = graphql`
    {
        products: allDataProduct {
            nodes {
                id
                title
                mdx
            }
        }
    }
`;

How to run tests

// TODO

How to develop locally

// TODO

How to contribute

// TODO