Modules Installed

Use ESM and TypeScript modules to create pages, layouts, and store data.

Options See on deno.land

extensions string[]: The list of extensions this plugin applies to
Default:
[ ".js", ".ts" ]
pageSubExtension string: Optional sub-extension for page files
Default:
".page"
includes string: Custom includes path
Default:
site.options.includes

Description

Lume is built on top of Deno, so it has native support for JavaScript and TypeScript modules. This plugin allows you to use JavaScript and TypeScript to create pages, layouts, and data files.

Creating _data files

Create _data.js or _data/*.js (or the TypeScript equivalent _data.ts or _data/*.ts) files to save shared data.

export const users = [
  {
    name: "Oscar",
    surname: "Otero",
  },
  {
    name: "Michael",
    surname: "Jackson",
  },
];

To create pages using JavaScript or TypeScript, create a file with the extension .page.js or .page.ts (the .page subextension is required to differentiate JavaScript/TypeScript files that generate HTML pages from other JavaScript files to be executed in the browser). To export the variables, use named exports and to export the main content you can use the default export.

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default "This is my first post using lume. I hope you like it!";

The default export can be a function. It will be executed by passing all the available data in the first argument and the filters in the second argument:

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data, filters) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data: Lume.Data, helpers: Lume.Helpers) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

JavaScript/TypeScript allows generating multiple pages from the same file. See Pagination for more info.

Creating layouts

It's possible to create layouts using JavaScript/TypeScript. Just create .js or .ts files inside the _includes directory.

export default ({ title, content }, filters) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

export default ({ title, content }: Lume.Data, helpers: Lume.Helpers) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

Configure VSCode

You can use some extensions for VS Code for template string syntax highlight:

ES6 String HTML: highlight HTML with Js comment /*html*/

export default (params) => /*html*/ `<p>It's work!</p>`;

lit-html: highlight HTML with Js tag function

// utilities.ts
export const html = (str: string[], ...val: unknown[]): string =>
  String.raw({ raw: str }, ...val);

import { html } from "utilities.ts";

export default (params) => html`<p>It's work!</p>`;