Question about an un-documented page data value: page.templateSyntax

[minimo-io]

From the Discord server I was pointed to ask this here instead:

So, I was trying to define a conditional html structure based on the template language being used for specific blog posts (some are .md -for simple articles- and some .njk for articles with extra functionality).

I could not find this data value so I created a shortcode that uses the this.page.inputPath value instead, to get the file extensions and with that define the template language being used (which is not a great solution IMO).

But... by dumping all the values for page I could find a page.templateSyntax value that it is not documented here: https://www.11ty.dev/docs/data-eleventy-supplied/
And that contains just the value I need: the templating language as "njk" or "md" string!

I wonder if is it safe to use this value? Is it documented and I just could not find where?

FYI: I am using [email protected].

Thanks a lot. I'm new to 11ty but already a fan! Cheers!

[bobmonsour]

@pdehaan refers to it in this discussion: #2768

He's great at responding to this kind of question. I'm guessing that it is safe to use, but I can't say for sure.

[pdehaan]

I imagine it's safe to use… Or at least still seemed to still be in Eleventy v3.0.0-alpha.5 (via npm i @11ty/eleventy@canary) -- which means it possibly wasn't Edge-template specific.
Although curiously when I checked the templateSyntax for a .md template, it gave me "liquid,md" since it uses LiquidJS to preprocess Markdown files.

grep "templateSyntax:" www-201/*/index.html

www-201/liquid/index.html:  templateSyntax: 'liquid',
www-201/markdown/index.html:  templateSyntax: 'liquid,md',
www-201/nunjucks/index.html:  templateSyntax: 'njk',

Where my src/liquid.liquid template looks like this:

---
title: LiquidJS
---

<pre>
{{ page | inspect }}
</pre>

And my custom inspect filter in my eleventy.config.js file looks like this:

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

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("inspect", function (data) {
    return inspect(data, { sorted: true, depth: 5 });
  });

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

And the output from src/markdown.md (with the same contents as src/liquid.liquid above) looks like this:

<pre>
{
  date: 2024-03-21T23:14:30.052Z,
  filePathStem: '/markdown',
  fileSlug: 'markdown',
  inputPath: './src/markdown.md',
  outputFileExtension: 'html',
  outputPath: 'www/markdown/index.html',
  templateSyntax: 'liquid,md',
  url: '/markdown/'
}
</pre>

[pdehaan]

But yeah, your workaround is exactly what I would have suggested otherwise (parse it from page.inputPath -- which is probably kinda mostly accurate -- unless you're using the Render plugin).

I'm not exactly sure what you are trying to do, or your setup. Personally instead of inspecting templateSyntax or looking at inputPath, I'd probably try and use custom layouts for simple articles vs "fancy" articles. 🤷

[minimo-io]

Thanks a lot for taking the time to answer!

I'm new building with 11ty so mine might not be the best approach. I wanted a solution that could auto-detect whether to wrap the content with some special markup (for "fancy" .njk articles) or not (for simple .md markdown ones), in order to avoid having to add special front-matter stuff.

I will consider are more standard approach or keep it as is, perhaps until the page.templateSyntax value makes its way into the docs so I make sure they will not change (good point about the 'liquid,md' string returned)!

Thanks again for the suggestions and help!