Eleventy: Access to raw file content (before any processing)

Created on 22 May 2020  ·  11Comments  ·  Source: 11ty/eleventy

I know from the page object I can access content and within a collection I can use templateContent to get the rendered output, but is it possible to get just the markdown input?

I could just read the file from the page's inputPath, but then I also get the frontmatter... it's easy enough to make a quick shortcode to return what I'm after, but I wanted to make sure there wasn't something built-in that I was missing...

enhancement

Most helpful comment

I agree it would be useful to access the raw Markdown for instances where you might wat to port/copy content to another system that speaks Markdown, but not HTML.

All 11 comments

I think frontMatter.content holds the markdown, without the frontmatter part.

@MiloCasagrande I didn't see that anywhere, would you have an example?

@nhoizey If you meant an example in the docs, I didn't see any in there.
This is what gives me the markdwon from within a collection. I assume that whatever the looping mechanism the same data is available:

pagination:
  data: collections.post
  size: 10
  alias: posts
---
{% for post in posts %}
  {{ post.template.frontMatter.content | log }}
{% endfor %}

Thanks, it works in loops indeed! 👍

But I can't make it work in a content's template. Any idea how to access it?
I tried page.template.frontMatter.content and multiple others…

Also, I guess it should be documented, if we want it to keep working in the future… 😅

@nhoizey unfortunately not, I was only able to access it from within the pagination loop.

Those data structures should be documented somewhere, I also fear that they might disappear in the future.

Ok.

@zachleat can we expect this to stay in the future? Also, is there a way to access the same value in a content's template/layout?

I agree it would be useful to access the raw Markdown for instances where you might wat to port/copy content to another system that speaks Markdown, but not HTML.

Another vote for this here https://twitter.com/rob_dodson/status/1321554550671618048 from @robdodson

yep, here's how we use this in web.dev to build our algolia index
https://github.com/GoogleChrome/web.dev/blob/master/src/site/_data/lib/algolia.js#L62

but I feel a little nervous using an undocumented API 😅

Interesting, thanks for sharing @robdodson. We are about to use the following in a custom collection for https://github.com/webwewant/webwewant.fyi:

  eleventyConfig.addCollection("wantsBySubmissionDate", collection => {
    return collection.getAll()
             .filter( item => item.inputPath.match(/\/wants\/.*\.md/) !== null )
             .sort( (a, b) => b.date - a.date )
             // append the raw content
             .map( item => {
               item.data.rawMarkdown = item.template.frontMatter.content || "";
               return item;
             } );
  });

Note that in the map() we’re appending it to the item’s data object as rawMarkdown.

@robdodson I didn't think about using the raw Markdown as a source for Algolia after cleaning, well done. I'm currently cleaning the rendered HTML with cheerio. I guess using remove-markdown would be much faster.

I'm also using item.template.frontMatter.content in a collection, to extract hashtags as tags: https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/_11ty/collections/notes.js#L12

I guess having the raw Markdown everytime, in any collection, would be useful.

Was this page helpful?
0 / 5 - 0 ratings