factorial-io / eleventy-plugin-twig Goto Github PK

At the moment @11ty/eleventy-utils and debug are dev dependencies:

Both should be normal dependencies.

For easier extension of the image shortcode later, it may be useful to switch to an object-based configuration like this:

{{ image({src: "test.jpg", alt: "Hello World", classes: ["test"]}) }}

Instead of a single additionalAttributes property, we can collect all “unknown” properties and “spread” them onto the image element.

I build something similar here: https://github.com/mvsde/website/blob/d8c67a2b7333d8ddd36993cfdd9a9dade6558769/.eleventy/shortcode-image.js#L22

This keeps the shortcode options uniform and reflects how attributes work in “normal” HTML.

The images aren’t necessarily located in the base path in the source folder. For example they could also be directly in src/images if the source folder has a more “flat” folder structure. The above code forces you to put images in root/base/images.

Instead of a “two tier” folder structure where root and base are basically two ways to specify the asset’s root folder, we can use something similar to the fstack configuration.

Just one userOptions.assets.root option that can point to src/assets for example, or for those who want to put the assets directly into src, it can just be src.

For the output there can be a separate userOptions.assets.output that gets concatenated with Eleventy’s dir.output. This would keep input and output folder structure independent from each other (like in fstack with rootFolder and distFolder).

Maybe add a readme section about changing the default markdown template engine? Eleventy’s markdown pre-processing is quite the nice feature for certain use cases.

// .eleventy.js

module.exports = function (eleventyConfig) {
  return {
    markdownTemplateEngine: 'twig'
  }
}

eleventy-img caches hashed images to avoid unnecessary regeneration.

If eleventy runs in watch mode everything is perfectly fine on initial build, the image folder is filled with hashed images, but those are deleted and not regenerated again on file change.

Setting useCache: false in eleventy-img options fixes the problem. But as caching is relevant for large amounts of images this couldn't be a permanent solution.

Setting one global widths seems a bit restrictive. Shouldn’t this be part of the options passed to the image shortcode? The needed widths for an image depend on how and where an image is used.

When rendering a partial that relies on some async content I get a twig error

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering twig template ./src/foo.twig (via TemplateContentRenderError)
[11ty] 2. You are using Twig.js in sync mode in combination with async extensions. (via TwigException)

The function is an asyc/await node-fetch function to get some remote data (navigation entries) and add them as global Data to the partial.

const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

async function get() {
  const response = await fetch('http://localhost/api/routes');
  return response.json();
}
module.exports = (async function(){
  var navigation = await get();
  return navigation;
})();

Is async/await supported by this plugin?

When running the development server with eleventy --serve, files that are included don’t refresh their content.

Repository with basic reproduction: https://github.com/mvsde/eleventy-twig-fstack.

The folder src/components has two files that are included in src/layouts/default.twig. Once the dev server is started, the included files are "frozen".

You can try by changing something in those files vs. changing something in the layout file.

At the moment Twig.js is a dev dependency:

It should be a peer dependency and the readme should include twig as part of the install command:

e.g.

npm install --save-dev @factorial/eleventy-plugin-twig twig