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.