Lume 1.15.0 - Release notes

The version 1.15.0 is full of exciting new features.

Archetypes

Hugo has a nice feature called archetypes, templates used when creating new content. The most obvious example is a post: instead of creating a new markdown file from scratch everytime you want to create a new post, you can run an archetype that creates the post file for you with a preconfigured front matter and content.

In Lume, an archetype is just a JavaScript or TypeScript file that export a function returning an object with the file path and the file content. The archetype must be saved in the _archetypes directory, inside the src folder. For example:

// _archetypes/example.js

export default function () {
  return {
    path: "/pages/example.md",
    content: "Content of the file",
  };
}

The archetypes are invoked with the command deno task lume new [archetype-name] (or lume new [archetype-name] with the new Lume CLI). If you run lume new example to run this archetype, the file /pages/example.md will be created.

See the archetypes documentation to learn more about how to generate different formats, pass arguments or create multiple files.

Tailwindcss

Tailwind support is a recurring request for Lume. Until now it was not possible to use Tailwind in Deno, so the only alternative available was Windi CSS.

The support of npm: packages in Deno allowed to use many NPM packages that until now only work on Node. Still, there were errors in Tailwind due the acorn-node dependency that doesn't work on Deno.

The @lumeland organization in NPM contains modified versions of the packages that don't work in Deno. @lumeland/tailwindcss is the same code as tailwindcss but replacing that dependency. When this is fixed in the official library, this modified version will be deprecated.

The Tailwindcss plugin depends on postcss, so you need to use both plugins in this exact order:

import lume from "lume/mod.ts";
import tailwind from "lume/plugins/tailwindcss.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site.use(tailwind());
site.use(postcss());

export default site;

Context data

The function site.data() allows to insert arbitrary data in your site from the _config.ts file:

site.data("layout", "main.njk");

The context of this data is global: is available to all pages of the site. It's equivalent to having a _data.* file in the root of your site. As of Lume 1.15.0, it's possible to specify the directory of the data in the third argument, for example:

site.data("layout", "main.njk", "/posts");

Now, the layout value is available only to the pages inside the /posts directory. Equivalent to creating a /posts/_data.yml file with this value.

You can assign data not only to directories but also to specific files:

site.data("layout", "main.njk", "/posts/hello-world.md");

💣 Breaking changes in the plugin date

The date plugin use the Deno version of date_fns to transform the dates. That version wasn't updated in 2 years so I decided to switch to the Node version. Everything should work fine, the only difference is the locales configuration, that need to be imported from npm in the _config file. For example, if you have this configuration:

site.use(date({
  locales: ["gl", "pt"],
}));

You need to change it to:

import gl from "npm:date-fns/locale/gl/index.js";
import pt from "npm:date-fns/locale/pt/index.js";

//...
site.use(date({
  locales: { gl, pt },
}));

Other changes

• The sass plugin uses now a modified version of the official NPM package.
• The relations plugin has been improved and there are some breaking changes in the configuration API. See the plugin page for the updated documentation.
• Dependency update and bugfixes.

See the CHANGELOG.md file for the full list of changes.