https://github.com/elboman/gatsby-remark-source-name

Add a custom sourceName field to remark nodes
https://github.com/elboman/gatsby-remark-source-name

gatsby gatsby-plugin gatsby-remark gatsby-source-filesystem gatsbyjs source sourcename

Last synced: 4 months ago
JSON representation

Add a custom sourceName field to remark nodes

• Host: GitHub
• URL: https://github.com/elboman/gatsby-remark-source-name
• Owner: elboman
• License: mit
• Created: 2018-05-12T13:02:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-19T08:52:48.000Z (almost 4 years ago)
• Last Synced: 2024-09-28T14:01:21.324Z (4 months ago)
• Topics: gatsby, gatsby-plugin, gatsby-remark, gatsby-source-filesystem, gatsbyjs, source, sourcename
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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`.

```javascript

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

```

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

```javascript

{

  resolve: `gatsby-source-filesystem`,

  options: {

    path: `${__dirname}/src/_posts`,

    name: 'blog', // -> name of the group

  }

}

```

You can then query the source name in GraphQL:

```js

// 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,

        },

      });

    });

  });

});

```