Skip to content

💬 Comment Commands

bernzrdo edited this page Apr 4, 2024 · 3 revisions

HTML comments that are replaced by their result during build time.

<h1>&pi;</h1>
<p>Pi is roughly equal to <!-- #EVAL: Math.PI --></p>

The commands name is a string of capital letters, numbers and underscores. The arguments, if needed, is a string of any characters. This is how you invoke them:

<!-- #[COMMAND]: [arguments] -->

Apart from the system commands, the command name references a file with the same name under the commands directory.

Default commands

Some commands come with the default installation of a lithor project.

TEMPLATE

<!-- #TEMPLATE: [template] -->

Input the name of a file in the templates directory to replace the command with the HTML of that file.

EVAL

<!-- #EVAL: [javascript] -->

Run JavaScript inline. This code will be ran by Node.js during the build.

TITLE

<!-- #TITLE --->

Places the page title indicated by the data object with the project name. Example of how should the EXTENDS comment command look like for this command:

<!-- #EXTENDS: main { title: 'Page Title' } >

System commands

EXTENDS

<!-- #EXTENDS: [template] [data] -->

Wrap the page in a template with the help of the SECTION and the YIELD comment commands. The data is an optional JavaScript object that can be used by comment commands like TITLE. It's good practice

SECTION

<!-- #SECTION: [name] -->

The HTML code between this comment and the next section or the end of the file will be considered as the named section to be used on the parent template called by the EXTENDS comment command.

YIELD

<!-- #YIELD: [section] -->

If you don't use any arguments, it replaced by the HTML of the whole child page, otherwise, it replaced by the HTML of the indicated section.

INCLUDE

<!-- #INCLUDE: [template] [data] -->

This will be replaced by the HTML of the indicated section. Optionally, you can carry data with it, similarly to EXTENDS.

Developing commands

Start by creating a JavaScript or TypeScript file in the commands directory with the command name on the filename. You should only use letters, numbers and underscores. The name is case insensitive.

If you’re using JavaScript, paste this code:

module.exports = function(args, ctx){
    // code
}

If you’re using TypeScript, paste this code:

import { Context } from 'lithor';

export default async function(args: string, ctx: Context){
    // code
}

The function receives two parameters:

  • args: The argument string written in the comment command.
  • ctx: An object that includes:
    • config: The current lithor configuration.
    • data: The object used on the EXTENDS or the INCLUDE comment command.

Commands are run server side during the build meaning you can use everything that Node.js offers.