Access to raw file content (before any processing)

[sjml]

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

[MiloCasagrande]

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

[nhoizey]

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

[MiloCasagrande]

@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 %}

[nhoizey]

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… 😅

[MiloCasagrande]

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

[nhoizey]

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?

[aarongustafson]

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.

[zachleat]

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

[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 😅

[aarongustafson]

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.

[nhoizey]

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

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[mtsknn]

My hacky way of achieving this:

// .eleventy.js
config.setLibrary('md', { render: (markdown) => markdown })

Now Markdown files don't get automatically converted to HTML, so content properties (or templateContent; see #882) are raw Markdown. In layouts, I can manually convert Markdown to HTML by calling markdown-it's render method.

A downside is that if a page is rendered multiple times (e.g. once on its own and once when rendering an RSS feed), markdown-it's render method is called multiple times. I tried to "cache" the value like this:

// eleventyComputed.js
module.exports = {
  html: (data) => markdownIt.render(data.content),
}

...but it doesn't work because content/templateContent is not available in computed properties (see #971).

[zachleat]

Cross link to https://twitter.com/JasonBayton/status/1569974215868022784

[boehs]

Cross link: https://fosstodon.org/@eleventy/109831381492142746

I use it to extract wikilinks, and it's not working in 2.0! 😱

I'm probably just going to stick on 2.0.0-canary.20 for now, there might be a newer working version, but /shrug

Issue from this file:

eleventy/src/TemplateContent.js

Line 127 in 05c6263

"Unfortunately you’re using code that monkey patched some Eleventy internals and it isn’t async-friendly."

[zachleat]

Shipping with Eleventy v3.0.0-alpha.1 as the rawInput property on Eleventy programmatic API calls (e.g. toJSON) and collection items.

[zachleat]

I think we’ll add page.rawInput too in v3.0.0-alpha.5! Stay tuned!

(see the rest of page here: https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable)

[edwardhorsford]

Will it be possible to read rawInput before the other page variables like content?

I've got a collection I want to make that is derived based on the content of existing pages. Pre-1.0 I read through the templateContent of each post looking for a string match. 1.0 and later, I get a tried to read templateContent too early error. My solution is to use the page.filePath with fs.readFileSync to manually read the files to search their contents.

[zachleat]

@edwardhorsford yeah, I think so—it should be available long before content in the order of operations

[zachleat]

Docs for page.rawInput shipping to https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable