Where is allowed to use shortcodes?

[Kapelianovych]

Is templates only place where shortcodes is available? As I can see in files from _includes directory it can not be used :( I use 11ty.js templates.

[carlosjcuevasm]

Hi there. What does it means you use 11.js templates? Is it that you use javascript for templating?

As far as I know, you can use shortcodes for your templates inside _includes. I'm quite sure I've seen them in action, but I have not used them myself yet.

[Kapelianovych]

Hi. Thank you for reply. Yes, I use JavaScript for templating. And I also saw examples when shortcodes was used in templates from _includes folder. But for me it is not working :( Console tells me this.shortcodeName is not a function ... I am very frustrated.

P.S.: I do not use arrow functions.

[pdehaan]

@YevhenKap Do you have a public repo somewhere?

Here's my example which uses custom shortcodes defined in the .eleventy.js file in my foo.11ty.js template:

// .eleventy.js
module.exports = (eleventyConfig) => {
  eleventyConfig.addLayoutAlias("base", "layouts/base.liquid");
  eleventyConfig.addShortcode("myshortcode", (value) => `value=${value}`);
  eleventyConfig.addFilter("localeDate", (d) => new Date(d).toLocaleDateString());

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

// src/home.11ty.js
module.exports = {
  data: {
    title: "HOME",
    layout: "base"
  },

  render(data) {
    return `
      <!-- local data -->
      <h1>${data.title}</h1>
      <p>layout=${data.layout}</p>
      <!-- custom shortcode -->
      <p>shortcode=${this.myshortcode(data.title)}</p>
      <!-- current page metadata -->
      <p>page=${JSON.stringify(this.page, null, 2)}</p>
      <!-- built-in filter -->
      <p>page.url=${this.url(this.page.url)}</p>
      <!-- custom filter -->
      <p>page.date=${this.localeDate(this.page.date)}</p>
    `.trim();
  }
};

And my generated HTML output is:

<main>
      <!-- local data -->
      <h1>HOME</h1>
      <p>layout=base</p>
      <!-- custom shortcode -->
      <p>shortcode=value=HOME</p>
      <!-- current page metadata -->
      <p>page={
  "date": "2021-03-30T07:06:11.103Z",
  "inputPath": "./src/home.11ty.js",
  "fileSlug": "home",
  "filePathStem": "/home",
  "url": "/home/",
  "outputPath": "www/home/index.html"
}</p>
      <!-- built-in filter -->
      <p>page.url=/home/</p>
      <!-- custom filter -->
      <p>page.date=2021-03-30</p>
</main>

[Kapelianovych]

Unfortunately, I do not have public repo.
Yes, inside main templates I can use shortcodes, but what I am trying to say, that templates inside _includes in my project have not access to shortcodes :(
Given your example:

// .eleventy.js
module.exports = (eleventyConfig) => {
  eleventyConfig.addLayoutAlias("base", "layouts/base.liquid");
  eleventyConfig.addShortcode("myshortcode", (value) => `value=${value}`);
  eleventyConfig.addFilter("localeDate", (d) => new Date(d).toLocaleDateString());

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

//_includes/baz.11ty.js
module.exports = function ({ title }) {
   return `
      <!-- custom shortcode -->
      <!-- And here this.myshortcode is not a function -->
      <p>shortcode=${this.myshortcode(title)}</p>
   `;
}

// src/home.11ty.js
const baz = require('./_includes/baz.11ty');

module.exports = {
  data: {
    title: "HOME",
    layout: "base"
  },

  render(data) {
    return `
      <!-- local data -->
      <h1>${data.title}</h1>
      <p>layout=${data.layout}</p>
      ${baz(data)}
      <!-- current page metadata -->
      <p>page=${JSON.stringify(this.page, null, 2)}</p>
      <!-- built-in filter -->
      <p>page.url=${this.url(this.page.url)}</p>
      <!-- custom filter -->
      <p>page.date=${this.localeDate(this.page.date)}</p>
    `.trim();
  }
};

[pdehaan]

Excellent, thanks for the code.

Yeah, it looks like the required files aren't getting the same this context, but we can do workarounds with fn.apply(), fn.bind(), or fn.call():

  render(data) {
    const _baz = baz.bind(this);
    return `
      <!-- bind -->
      ${ _baz(data) }

      <!-- call -->
      ${ baz.call(this, data) }

      <!-- apply -->
      ${ baz.apply(this, [data]) }
  // ...
  `

[Kapelianovych]

I forgot about binding context, thanks for the answer! :)