Rendering Liquid in a Shortcode

[miklb]

To be honest I'm not sure how to word the question.

What I want to do is render an HTML table built using _data by passing a shortcode that defines which data file to use.

eleventyConfig.addShortcode('table', function(metric) {

        return `<table>
        <thead>
          <tr>
            <th>City</th>
            <th>2012</th>
            <th>2013</th>
            <th>2014</th>
            <th>2015</th>
            <th>2016</th>
            <th>2017</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020</th>
            <th>2021</th>
          </tr>
        </thead>
        <tbody>
          {% for city in ${metric} %}
            <tr>
              <td>{{ city.city }}</td>
              {% for data in city.data %}
                <td>{{ data.amount }}</td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>`;
    });

and then in my liquid template I have {% table "income" %}

The table renders but the liquid is returned raw.

{% for city in income %} {% for data in city.data %} {% endfor %} {% endfor %}

Anyone know what I'm missing?

[pdehaan]

LiquidJS in JavaScript is possible, but not exactly easy. You could use the Render plugin and renderTemplate() as a JavaScript function, but then need to do a bit of management to set whatever data object you need to pass to the renderer.

Why not use JavaScript loop? Maybe something like this pseudo code:

const tbody = [];
for (const city of metric) {
  tbody.push(`<tr><td>${city.city}</td><td>${...}</td></tr>`);
}

return `<table><thead>...</thead>${tbody.join("\n")}</table>`;

Will need a bit more tweaking to work with the nested for loop, and passing the correct metric data (you're passing a string "income" but then trying to loop over the string in a for loop, which probably won't do what you're hoping for.

[pdehaan]

eleventy.config.js

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode('table', function(metric) {
    const tbody = [];
    for (const { city, data } of metric) {
      const amounts = data
        .map(({ amount }) => `<td>${ amount }</td>`)
        .join("");
      tbody.push(`<tr><td>${ city }</td>${ amounts }</tr>`);
    }

    return `<table>
      <thead>
        <tr>
          <th>City</th>
          <th>2012</th>
          <th>2013</th>
          <th>2014</th>
          <th>2015</th>
          <th>2016</th>
          <th>2017</th>
          <th>2018</th>
          <th>2019</th>
          <th>2020</th>
          <th>2021</th>
        </tr>
      </thead>
      <tbody>
        ${tbody.join("\n")}
      </tbody>
    </table>`;
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

src/_data/income.js

module.exports = [
  {city: "Atlanta", data: [{amount: 5}, {amount: 15}, {amount: 49}, {amount: 55}]},
  {city: "Boston", data: [{amount: 15}, {amount: 115}, {amount: 149}, {amount: 155}]},
  {city: "Chicago", data: [{amount: 25}, {amount: 215}, {amount: 249}, {amount: 255}]},
];

src/index.liquid

---
title: Income
---

<main>
  <h1>{{ title }}</h1>
  {% table income %}
</main>

OUTPUT

<main>
  <h1>Income</h1>
  <table>
    <thead>
      <tr>
        <th>City</th>
        <th>2012</th>
        <th>2013</th>
        <th>2014</th>
        <th>2015</th>
        <th>2016</th>
        <th>2017</th>
        <th>2018</th>
        <th>2019</th>
        <th>2020</th>
        <th>2021</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Atlanta</td>
        <td>5</td>
        <td>15</td>
        <td>49</td>
        <td>55</td>
      </tr>
      <tr>
        <td>Boston</td>
        <td>15</td>
        <td>115</td>
        <td>149</td>
        <td>155</td>
      </tr>
      <tr>
        <td>Chicago</td>
        <td>25</td>
        <td>215</td>
        <td>249</td>
        <td>255</td>
      </tr>
    </tbody>
  </table>
</main>

[miklb]

Amazing. Thank you. It didn't dawn on me that the liquid template wasn't processing the returned shortcode.

[pdehaan]

My 100% guess is that since the shortcodes are written in JavaScript, they wouldn't know what templating engine to use (Liquid? Nunjucks? Other?).

Other solutions (if you don't like JavaScript loops and prefer LiquidJS) would be an include file. LiquidJS added the {% render %} tag in v9.2.0 and lets you render an include file and lets you pass variables to isolate scopes a bit better.
So that solution would look something like this:

src/_includes/tableinc.liquid

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>2012</th>
      <th>2013</th>
      <th>2014</th>
      <th>2015</th>
      <th>2016</th>
      <th>2017</th>
      <th>2018</th>
      <th>2019</th>
      <th>2020</th>
      <th>2021</th>
    </tr>
  </thead>
  <tbody>
    {% for city in metric %}
      <tr>
        <td>{{ city.city }}</td>
        {% for data in city.data %}
          <td>{{ data.amount }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>

src/index.liquid

---
title: Income
---

<main>
  <h1>{{ title }}</h1>
  {% render "tableinc.liquid", metric: income %}
</main>

[pdehaan]

Or if you were generally curious about the renderTemplate() solution, something like this should work (although potentially confusing to have LiquidJS/Nunjucks in JavaScript templates:

const { EleventyRenderPlugin } = require("@11ty/eleventy");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyRenderPlugin);

  eleventyConfig.addShortcode('table', function(metric) {
    const { renderTemplate } = eleventyConfig.javascriptFunctions;
    const tmpl = `<table>
        <thead>
          <tr>
            <th>City</th>
            <th>2012</th>
            <th>2013</th>
            <th>2014</th>
            <th>2015</th>
            <th>2016</th>
            <th>2017</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020</th>
            <th>2021</th>
          </tr>
        </thead>
        <tbody>
          {%- for city in metric %}
            <tr>
              <td>{{ city.city }}</td>
              {%- for data in city.data %}
                <td>{{ data.amount }}</td>
              {%- endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>`;
    return renderTemplate(tmpl, "liquid", { metric });
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

Usage is the same as the previous shortcode business:

---
title: Income
---

<main>
  <h1>{{ title }}</h1>
  {% table income %}
</main>

---

Or you can use renderFile() instead of renderTemplate(), with the caveat that you need the fully qualified path to the include file:

  eleventyConfig.addShortcode('table', function(metric) {
    const { renderFile } = eleventyConfig.javascriptFunctions;
    return renderFile("./src/_includes/tableinc.liquid", { metric });
  });

[miklb]

I appreciate the expanded options. For this project the first solution you provided works great. The render option was something I explored, I think I just had the syntax wrong. Again, I greatly appreciate the help.