Using global data based on front matter???

[rwboyer]

What seems to be simple I cannot seem to make work.

I have multiple identically formatted CSV files that I've added to a site via "addDataExtention" they all work fine in nunjucks templates if I use the file name based reference directly. Ex: "bbtable.csv" to iterate over the rows such as...

<ul class="">
  {%- for s in bbtable %}
    <li class="">Row {{s.data.desc}}</li>
  {%- endfor %}
</ul>

what I need to do is make the global data object variable and specified in the front matter of markdown files that use the nunjucks template to render multiple pages using different CSV files. I cannot get this to work.

.md file

---
title: blah blah
layout: example.njk
csvdata: bbtable
---

example.njk

<ul class="">
  {%- for s in csvdata %}
    <li class="">Row {{s.data.desc}}</li>
  {%- endfor %}
</ul>

I've tried every variation of this without success.
Any suggestions??

[Ryuno-Ki]

Can you share the code you used in addDataExtension?

[rwboyer]

Thanks,

That is what I was trying to do but everything I tried did not work...

The closest I came was obviously a list of objects when I dumped it in the njk but I could not iterate through it no matter what I tried. Every example I looked at using eleventyComputed searched the list with find in the frontmatter and did NOT pass the list to the njk template.

[rwboyer]

Ps. that little bit in the config.js file you see makes a column in the CSV into a list called tags. It doesn't need to be there and it doesn't work as I was trying to use that little piece of code to add all the elements of the CSV into a collection whose name was in the tags file but it appears that this happens way too early and it's not clear how to programmatically add each item into a collection without creating a new collection. I was going to attempt to grab the base file name of the CSV and create a new collection whose contents were the collection of the CSV rows but decided to ask the question here as I thought there has to be a way to do what I illustrated above in a more direct way given I can access the rows directly inside the njk. In other words I am just looking for a "pointer" to that global data inside the njk and it seems there must be a way to do that in front matter... it's just not clear how.

[Ryuno-Ki]

Got something!

The eleventy.config.js:

export default function (eleventyConfig) {
    eleventyConfig.addDataExtension("csv", (contents) => contents);
}

So Eleventy takes care of reading the data files. Put your CSVs in a global subfolder(!): `src/_data/csv/bbtable.csv' etc.

Speaking of, have a global eleventyComputed.js Data file:

import { parse } from "csv-parse/sync";

export default {
    csv: function (data) {
            // Sometimes the object was empty. I cannot explain why
            if (!data.eleventy.directories.data) {
                return "";
            }

            // Here the subfolder comes into play because it creates `data[foldername][filename]` which we can now access dynamically!
            const records = parse(data.csv[data.csvdata], {
              columns: true,
              skip_empty_lines: true,
              relax_column_count: true,
              //delimiter: ";",
              trim: true,
            });

            const itemsWithTags = records.map(item => {
              item.tags = [item.tags];
              return item;
            });

            return itemsWithTags;
    }
}

The Frontmatter than can look like this (no file extension!):

---
layout: example.njk
csvdata: bbtable
---

# Hello, world

The layout file stays largely as proposed:

<ul class="">
  {%- for s in csv %}
    <li class="">Row {{s.desc}}</li>
  {%- endfor %}
</ul>

So the Frontmatter sets the key on the data object that is passed to the eleventyComputed's property csv's argument.

[rwboyer]

Thanks for all this work. Two questions.

1. Why no extension on the markdown file??
2. I understand what you are doing here but would not have thought of it exactly this way. I was looking for a more direct method of substituting those global variables eg "bbtable". This seems sort of like double indirection (a pointer to a pointer) rather than just a pointer for lack of better words... It seems like their "should" be a more direct way. Why isn't that the case?

[Ryuno-Ki]

Re 1. Because of the way Eleventy treats Global Data File: The extension is stripped and turned into a key on the object named after the subfolder. The frontmatter then references that key.

Re 2. I slept over the approach and feel like it should work in the addDataExtension with the drawback that that approach would compute the solution for all CSVs. Using eleventyComputed is rather lazy and only does so for actually invoked CSVs. I don't know the intended use enough to be able to tell which approach fits better. If you want me to, I could look into how the code would need to be adjusted to run in addDataExtension.