Shortcode / include invocation count

[stepanzak]

Hi, I'm migrating my Zola site to 11ty, and I need to solve a problem that I solved with a particular Zola feature that 11ty seems to lack. I'll first describe the feature, to see if it's possible to do that in 11ty, and then describe the problem, to see if there is some better 11ty solution for it.

The feature: nth, Ordinal

Zola has a variable named nth that you can access inside shortcodes.

Every shortcode context is passed in a variable named nth that tracks how many times a particular shortcode has been invoked in the current Markdown file. Given a shortcode true_statement.html template:

{{ value }} is equal to {{ nth }}.

It could be used in our Markdown as follows:

{{ true_statement(value=1) }}
{{ true_statement(value=2) }}

docs: https://www.getzola.org/documentation/content/shortcodes/#nth-invocation-count

Hugo has a similar feature:

The Ordinal method returns the zero-based ordinal of the shortcode in relation to its parent. If the parent is the page itself, the ordinal represents the position of this shortcode in the page content.

docs: https://gohugo.io/methods/shortcode/ordinal/

My usecase

From Hugo docs:

This method is useful for, among other things, assigning unique element IDs when a shortcode is called two or more times from the same page.

That's basically what I'm trying to accomplish.
I have Zola shortcode for embedding a Mastodon feed. It takes input arguments and renders HTML with them, so I think in 11ty, it would be better to use liquid's {% render %} than a shortcode.

Here's the shortcode

The important part is this JavaScript inside a <script> tag:

window.addEventListener("load", () => {
   const mastoTimeline{{ nth }} = new MastodonTimeline.Init({
   mtContainerId: "mt-container{{ nth }}",

   ...

}

and this HTML tag:

<div id="mt-container{{ nth }}" class="mt-container">
   ...
</div>

The {{ nth }} is replaced with 1 in the first shortcode on the page, 2 in the second shortcode, and so on.
This way, each Mastodon feed container has a unique id, and a script with the passed arguments knows the id and loads the feed inside the correct container.

I don't need the nth variable in this case, although I think it might be useful for other things. It just happens to be ideal for id that I can be sure is unique on the page. I might use some kind of randomization in 11ty instead, but I don't like that because:

• there's a small chance it still won't be unique
• the id would change on every build, even if the source file did't change at all

Is there any way to implement the nth variable in 11ty, or any other way you would solve this problem? Thanks

[dwkns]

Personally I would go for unique ID's. If you use something like uuid you're pretty much guaranteed to have a unique ID each time. That doesn't solve your second point though, they would be different on each build. Unless your JS uses these unique id's to create an id="uniqueID" in your HTML that someone can link to, it probably won't be an issue.

That said, you could do what you want with something like this;

export default (eleventyConfig) => {
   // Set a counter for the instances of the shortcode.
  let instanceCount = 0;

  // Reset the counter before each build otherwise they will continue to increment. 
  eleventyConfig.on("eleventy.before", async ({ directories, runMode, outputMode }) => {
    instanceCount = 0;
  });

  // Define the shortcode.
  eleventyConfig.addShortcode("insertMasterdonTimeline", function () {
    instanceCount += 1;
    // Return whatever JS code you want to insert into the template with the counter value.
    // You will need to wrap in the code below in <script> for it to output JS into the template.
    // It is left out here so you can see the output in HTML for clarity.
    return `
        window.addEventListener("load", () => {
          const mastoTimeline${instanceCount} = new MastodonTimeline.Init({
          mtContainerId: "mt-container${instanceCount}"
          }) 
        })
     `
  }
  );
}

And then in your template

<p>{% insertMasterdonTimeline %}</p>
<p>{% insertMasterdonTimeline %}</p>
<p>{% insertMasterdonTimeline %}</p>
<p>{% insertMasterdonTimeline %}</p>
<p>{% insertMasterdonTimeline %}</p>

This will work for a single page. If you're using the shortcode on multiple pages you'd need to pass the page name into the shortcode. And instanceCount would need to be a object or array of all the pages/instance counts. But it should be doable.

[Ryuno-Ki]

In those cases, some seedable RNG like nanoid could work as well.

[stepanzak]

Thank you, I'll try that. When I think about it, there's probably nothing wrong about the ids changing on each build, except for my brain not liking it for some reason.

[cypressSap]

This will work for a single page. If you're using the shortcode on multiple pages you'd need to pass the page name into the shortcode. And instanceCount would need to be a object or array of all the pages/instance counts. But it should be doable.

Shortcodes have access to page data (among others), so you shouldn't even need to pass in the page name - you could just use e.g. this.page.url as the key.

[dwkns]

Good catch. I forgot about access to this.

Using page.url for the key is smart too as a template could be used to generate multiple pages.

I’d still go for UUID’s though.