Add template content to computed data

[nhoizey]

I love the new Computed Data feature! 👍

However, it would be even more awesome if it could also use templateContent, at least as a data source.

My use case is the following:

I would like to write some of my content just like tweets, with #hashtags, and extract them with a filter in computed data to generate the tags list for the content.

[nhoizey]

Got something strange when I console.dir(templateContent) in my computed data function… 😅

{
  page: {
    url: '(((((hi(((((page.url)))))hi)))))',
    outputPath: '(((((hi(((((page.outputPath)))))hi)))))'
  },
  tags: '(((((hi(((((tags)))))hi)))))'
}

[nhoizey]

Might be better using content instead of templateContent here, by the way… I don't know.

[nhoizey]

Here's what I would like to be able to do.

I have a Markdown file which content includes some #hashtags:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/notes/2020/01/01/social-posse/index.md

---
date: 2020-01-01 00:00:00 +01:00
tags: [POSSE, Twitter, Mastodon]
---

I'm starting sharing my quick thoughts on my own site instead of Twitter, and then #POSSE them on #Twitter, #Mastodon and others, following [repeated advice from Tantek Çelik](https://tantek.com/2020/001/t1/10-years-notes-my-site).

Instead of duplicating these hashtags into the YFM tags property, I would like to extract the hashtags to generate this tags property with Eleventy Computed Properties.

Here's what I could put in the directory data file:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/notes/notes.11tydata.js

const twitter = require('twitter-text');

module.exports = {
  layout: "note",
  permalink: "/notes/{{ page.date | notePermalinkDate }}-{{ page.fileSlug }}/",
  eleventyComputed: {
    tags: data => {
      if (data.content === undefined) {
        return data.tags || [];
      }

      let tags = twitter.extractHashtags(twitter.htmlEscape(data.content));
      if (data.tags !== undefined) {
        // merge and deduplicate
        tags = [...new Set([].concat(...tags, ...data.tags))]
      }
      return tags;
    }
  }
};

This currently doesn't do what I want because data.content is undefined.

[TigersWay]

Anything on this one?

I am having the exact same problem: every function in "eleventyComputed" is called twice; via a console.dir() I can see these loads of (((())))) as you described earlier, and then the second time I have a clean object with everything I need.

First:

{
  page: {
    url: '(((((11ty(((((page.url)))))11ty)))))',

    outputPath: '(((((11ty(((((page.outputPath)))))11ty)))))'
  },
  test: '(((((11ty(((((test)))))11ty)))))',
...

And then:

{
  site: {
    url: 'https://11ty-netlify-xxxxxxxxxxx.netlify.com/',

    featured: '/static/images/2018/12/couverture1.jpg',
    defaultLocale: 'fr',
    locales: [Object],
    twitter: [Object]
  },
  pkg: {
    name: '11ty-netlify-xxxxxx',
    version: '0.5.0',
...

[zachleat]

Unfortunately Computed Data requires two runs to establish correct order of execution with dependencies. I tried real hard to use proxies for this but some template languages (Nunjucks is one) visited every key in the data object so unfortunately it wasn’t feasible there :(

Might be able to do some additional optimizations on this later to avoid double runs in some cases.

[zachleat]

Also going to have to put this one into the enhancement queue, unfortunately. It would not be a quick task to reorder the cascade to support this.

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 👍!

[TigersWay]

For now, I'm using this and it seems to be working nicely

...
module.exports = {
  permalink: '{{ page | permalink }}',
  eleventyComputed: {
    layout: data => (data.pkg) ? layout(data.page) : undefined
  }
};

[nhoizey]

@TigersWay looks like it works indeed.

Would you be able to explain where this test on data.pkg comes from? 😅

[TigersWay]

😅 It was - during beta-2 - the quick way to know "data" was something interesting.... It's all working now.

But in fact it's worse now as "eleventyComputed" seems to have the highest priority wich lead me to

module.exports = {
  eleventyComputed: {
    permalink: data => (data.permalink) ? data.permalink : permalink(data.page),
    layout: data => (data.layout) ? data.layout : layout(data.page)
  }
};

I am right now working on a "complex" and hierachical set of documents.

[nhoizey]

Ok, so now you say it is computed first, so we keep the value if it's already there. Right?

[TigersWay]

It seems to be. To be honest, I am a little bit out of reach trying to understand that part of Eleventy code.
So yes, to have some "business rules" and not destroy exceptions I found it easier to write it like that; a permalink function to build a smart permalink, and same for layout.

"Mon coté français, peut-être"......

[nhoizey]

"Mon coté français, peut-être".....

😅

I'll try like you did.

However, my own need is to compute tags from content. It works for current content (I can list tags of a note without having a static tags array in YFM.

But I still don't know how to get these tags in the global tags collection…

[TigersWay]

We are somehow leaving the main topic of this issue 😷

I would try something like what I did with my buildNavigation (https://github.com/TigersWay/11ty-netlify-playground/blob/master/_11ty/filters/navigation.js), add a collection which would be just meant to modify the main one.
The last committed version is full of bug, but you may get the idea.

[nhoizey]

@TigersWay I was leaving the main topic indeed… 😅

I like how you compute branches and leaves! 👍
Do you have a live example of this hierarchical navigation?

Back to the main topic, I managed to add tags from the content to the tags Front Matter:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/notes/notes.11tydata.js

But I still didn't find the way to list these contents in the collection of the tag. It might need another issue, through.

[TigersWay]

I like how you compute branches and leaves! 👍
Do you have a live example of this hierarchical navigation?

I'm working.. slowly these days ... on a plugin about this exactly: eleventy-plugin-ancestry

[nhoizey]

@TigersWay awesome!

[joshcanhelp]

If you want to get the raw content of the file being processed, you can read it in a JS data file:

// _content/posts/posts.11tydata.js
const fs = require('fs');
module.exports = {
  eleventyComputed: {
    someData: async data => {
      const filePath = data.page.inputPath.replace("./_content/posts", __dirname);
      const fileContent = await fs.readFileSync(filePath, 'utf8');
      return fileContent;
    }
  }
}

This did not seem to have any impact on processing speed with 108 small files but all the usual caveats about I/O bottlenecks apply.

[nhoizey]

I now use the template content to get hashtags in the collection creation directly.

Look for note.template.frontMatter.content here:
https://github.com/nhoizey/nicolas-hoizey.com/blob/d75019bac6e9f698c80062f8e90e50c1dad2ca6d/src/_11ty/collections/notes.js#L8

I could copy the full template content in the collection item, but I only need the hashtags in this site.

[zachleat]

Related to #4029

[zachleat]

Cross-link to #3458 (comment) (request specific to Eleventy Layouts)