access front matter item in shortcode

[btrem]

I can access some page items in a shortcode, e.g., this.page.date or this.page.fileSlug. Can I access front matter items? So given

---
myItem: foo
myThing: bar
---

can I get myItem and myThing in a shortcode? I've tried this.page.data.myItem and this.data.myItem but neither worked. (They are undefined.)

[pdehaan]

@btrem I don't think shortcodes have access to frontmatter/collections/data directly (outside of this.page data), so you'd need to pass the frontmatter values to the shortcode manually.

[jjkress]

@btrem @pdehaan I hit the same thing today and after a bit of searching and inspecting, I found that you can indeed access the frontmatter data by using this.ctx.myItem -- but #1584 indicates that this may only work when using Nunjucks templates.

Leaving this answer here, so others may find the answer sooner 😉

[pdehaan]

Ah, good callout @jjkress!
Yes, this.ctx is Nunjucks specific, but LiquidJS should have a similar this.ctx.environments variable. I couldn't find anything similar for a JavaScript/.11ty.js template though, so it still might be better to explicitly pass data to shortcodes depending on your project.

So if you want a shortcode that should work for LiquidJS and Nunjucks (and fail semi-gracefully for others), you might need to do some nullish coalescing magic, like:

// Look for LiquidJS `this.ctx.environments` variable first, then fallback to Nunjucks' `this.ctx`, then fallback to an empty object.
const _ctx = this.ctx?.environments ?? this.ctx ?? {};

const { inspect } = require("node:util");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("imashortcode", function (abc) {
    console.log(inspect(this, { sorted: true }));
    const _ctx = this.ctx?.environments ?? this.ctx ?? {};
    return `
      <h1>abc=${ abc }</h1>
      <pre>${ inspect(_ctx, { sorted: true })}</pre>
    `;
  });

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

LiquidJS Example

---
title: LiquidJS test
---

<main>
{% imashortcode title %}
</main>

OUTPUT

<main>
      <h1>abc=LiquidJS test</h1>
      <pre>{
  collections: { all: [ [Object], [Object], [Object] ] },
  eleventy: {
    env: {
      config: '/private/tmp/11ty-2337/eleventy.config.js',
      isServerless: false,
      root: '/private/tmp/11ty-2337',
      runMode: 'build',
      source: 'cli'
    },
    generator: 'Eleventy v2.0.1',
    version: '2.0.1'
  },
  page: {
    date: 2023-09-15T15:40:36.758Z,
    filePathStem: '/liquid',
    fileSlug: 'liquid',
    inputPath: './src/liquid.liquid',
    outputFileExtension: 'html',
    outputPath: 'www/liquid/index.html',
    templateSyntax: 'liquid',
    url: '/liquid/'
  },
  pkg: {
    author: 'Peter deHaan <peter@deseloper.com>',
    description: '',
    devDependencies: { '@11ty/eleventy': '^2.0.1' },
    keywords: [],
    license: 'MPL-2.0',
    main: 'index.js',
    name: '11ty-2337',
    scripts: {
      build: 'eleventy',
      test: 'echo "Error: no test specified" && exit 1'
    },
    version: '1.0.0'
  },
  title: 'LiquidJS test'
}</pre>
    
</main>

11ty.js Example

class EleventyTest {
  data() {
    return {
      title: "Eleventy",
    };
  }

  async render(data) {
    return `<main>${this.imashortcode(data.title)}</main>`;
  }
}

module.exports = EleventyTest;

OUTPUT

<main>
      <h1>abc=Eleventy</h1>
      <pre>{}</pre>
    </main>

[btrem]

When you posted this answer, I tried ctx and couldn't get it to work. Lo these many months (> 1year!) later, and I went back the problem, and found that it works perfectly. Thanks.