ChristopherBiscardi / gatsby-mdx

Gatsby+MDX • Transformers, CMS UI Extensions, and Ecosystem Components for ambitious projects
https://gatsby-mdx.netlify.com/
715 stars 100 forks source link

Support excerpt_separator config option #386

Closed flyinggrizzly closed 5 years ago

flyinggrizzly commented 5 years ago

Is your feature request related to a problem? Please describe.

I'm in the process of migrating from Jekyll, and all of my posts have an explicit separator break defined with <!-- more -->.

I usually make sure that my excerpts stand on their own, so falling back to truncated text is frustrating.

Describe the solution you'd like

It would be good to be able to set an excerpt_separator config option for gatsby-mdx:

{
  resolve: `gatsby-mdx`,
  options: {
    excerpt_separator: `<!-- more -->`,
    ...
  }
}

Describe alternatives you've considered

Increasing the pruned excerpt from 150 to 250/400/etc doesn't work because of the variability of excerpts.

I'm currently trying to work around this by scanning the HTML and creating a custom field in gatsby-node.js:

const excerpt = // scan until we find the separator
createNodeField({ name: 'exerpt', node, value: excerpt })

but this feels a little unpredictable.

Additional context

This is a gray-matter supported option, and adding an excerpt_separator config option to gatsby-mdx config mirrors the gatsby-transformer-remark implementation.

ChristopherBiscardi commented 5 years ago

This is a gray-matter supported option,

Well if it's supported by gray-matter we should probably just pass-through the gray-matter options via a gatsby-mdx option like:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-mdx`,
      options: {
        grayMatter: {
          excerpt_separator: "<<<my-separator>>>"
        }
      }
    }
  ]
};

Then when we return the excerpt in GraphQL we probably want to keep the current behavior by default and if there's an excerpt defined in the grayMatter parsing then we use that.

I'd accept a PR for this

flyinggrizzly commented 5 years ago

Cool. This is a necessary feature for me, and I imagine it would be for others. I'll pick up the PR, though it probably won't be fast.

jmolivas commented 5 years ago

@flyinggrizzly for a quick workaround we did something like this using gray-matter library

const matter = require('gray-matter');

...
//  Extract markdown excerpt 
const content = matter(node.internal.content, { excerpt: true } );

// If you only want to create a field containing markdown 
createNodeField({
    name: `excerpt`,
    node,
    value: content.excerpt,
})

// If you want to create a text/markdown node 
const textNode = {
  id: `${node.id}-MarkdownBody`,
  parent: node.id,
  dir: path.resolve("./"),
  internal: {
    type: `${node.internal.type}MarkdownBody`,
    mediaType: "text/markdown",
    content: content.excerpt,
    contentDigest: digest(content.excerpt),
  },
}
createNode(textNode)

// Create markdownBody___NODE field
createNodeField({
  node,
  name: "markdownBody___NODE",
  value: textNode.id,
})

For info about gray-matter: https://github.com/jonschlinkert/gray-matter/blob/master/README.md#optionsexcerpt

ChristopherBiscardi commented 5 years ago

moved to https://github.com/gatsbyjs/gatsby/issues/16865