JSPM

gatsby-remark-source-name

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 234
  • Score
    100M100P100Q86011F
  • License MIT

Add a custom sourceName field to remark nodes

Package Exports

  • gatsby-remark-source-name

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-remark-source-name) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gatsby-remark-source-name

Add a custom sourceName field to Remark nodes to filter them easily.

Install

yarn add gatsby-remark-source-name

How to use

First add the plugin to your gatsby-config.js.

plugins: [`gatsby-remark-source-name`];

Next you define a name for the group of markdown files in the filesystem source plugin:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/_posts`,
    name: 'blog', // -> name of the group
  }
}

You can then query the source name in GraphQL:

// example of gatsby-node.js

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;

   // create pages
  const PostTemplate = path.resolve('src/templates/post.js');


  const query = graphql(`
    query {
      allMarkdownRemark() {
        edges {
          node {
            excerpt(pruneLength: 250)
            html
            fields {
              sourceName
            }
          }
        }
      }
    }
  `);

  return query.then(result => {
    if (result.errors) {
      return Promise.reject(result.errors);
    }

    // filter by source instance name
    const posts = result.data.allMarkdownRemark.edges.filter(
      single => single.node.fields.sourceName === 'blog' // we use the source name to filter nodes
    );

    posts.forEach(({ node }) => {
      createPage({
        path: `/blog/${node.frontmatter.slug}`,
        component: PostTemplate,
        context: {
          slug: node.frontmatter.slug,
        },
      });
    });
  });
});