factorial-io / eleventy-plugin-twig Goto Github PK
View Code? Open in Web Editor NEWTwig.js for Eleventy
Twig.js for Eleventy
At the moment @11ty/eleventy-utils
and debug
are dev dependencies:
eleventy-plugin-twig/package.json
Lines 28 to 29 in 3fc7c23
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 include
d 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:
eleventy-plugin-twig/package.json
Line 37 in 3fc7c23
It should be a peer dependency and the readme should include twig
as part of the install command:
eleventy-plugin-twig/README.md
Line 33 in 3fc7c23
e.g.
npm install --save-dev @factorial/eleventy-plugin-twig twig
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.