Skip to content

Latest commit

 

History

History
344 lines (278 loc) · 5.33 KB

README.md

File metadata and controls

344 lines (278 loc) · 5.33 KB
Raw

ejs2html

A simple CLI for making HTML files from EJS templates.

Install:

npm i ejs2html -g

Usage:

ejs2html [options] <config> [dest]

Options:

-h, --help                  output usage information
-V, --version               output the version number
-r, --read <variable_name>  Read contents from stdin, if available, and pipe to a given global variable name in the config.

Config

Everything runs off of the config file. It looks something like this.

{
  "files": [
    {
      "dest": "index.html",
      "template": "layout",
      "locals": {
        "title": "Home",
        "message": "Welcome to my app."
      }
    },
    {
      "dest": "about/index.html",
      "template": "layout.ejs",
      "locals": {
        "title": "About",
        "message": "This is the about page."
      }
    }
  ],
  "globals": {
    "app_name": "My App"
  }
}

At the root level of the config should be:

  • files: An array of objects for each file that you want to create.
  • global: Variables that are available to all files.

Each file object inside of files should include:

  • template: The EJS template to use to create the file (.ejs extension is optional).
  • locals: (Optional) Variables that are scoped to this page.
  • dest: The filepath of the output file.
    • Note: This is relative to the dest param from the command line.
    • Full path will look like this: [cli-dest]/[file-dest][.html].
    • .html extension is optional

Reading stdin

Using the -r, --read <var_name> option allows you to receive piped data and set the data to a global variable that can be used in your templates. Without declaring this option, ejs2html will not do anything with the piped data.

So this will set a new global variable called message to the contents of hello.txt:

cat hello.txt | ejs2html config.json --read message

However, the piped data will be ignored in this example:

cat hello.txt | ejs2html config.json

Example:

cat hello.txt | ejs2html config.json --read message

"hello.txt"

Hello world!

"layout.js"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p><%- message %></p>
</body>
</html>

"config.json"

{
  "files": [
    {
      "dest": "index.html",
      "template": "layout",
    }
  ],
  "globals": {
    "title": "My Site",
    "message": ""
  }
}

The result would be:

"index.html"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
</head>
<body>
  <h1>My Site</h1>
  <p>Hello world!</p>
</body>
</html>

Examples

One File

_"src/ejs/config.json"

{
  "files": [
    {
      "dest": "index.html",
      "template": "layout",
      "locals": {
        "title": "Home",
        "message": "Welcome to my app."
      }
    }
  ],
  "globals": {
    "app_name": "My App"
  }
}

_"src/ejs/layout.ejs"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= app_name %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p><%= message %></p>
</body>
</html>

Running...

ejs2html _src/ejs/config.json

Yields...

"index.html"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <h1>Home</h1>
  <p>Welcome to my app.</p>
</body>
</html>

===

Partials

  • The paths for the partials should be relative to the file in which they are being included.

_"src/ejs/partials/header.ejs"

<h1><%= title %></h1>

_"src/ejs/partials/body.ejs"

<p><%= message %></p>

_"src/ejs/layout.ejs"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= app_name %></title>
</head>
<body>
  <%- include('partials/header') %>
  <%- include('partials/body') %>
</body>
</html>

Running the following with same config as above would yield the same result as the previous example...

ejs2html _src/ejs/config.json

===

Multiple Templates

_"src/ejs/config.json"

{
  "files": [
    {
      "dest": "index.html",
      "template": "layout",
      "locals": {
        "title": "Home",
        "message": "Welcome to my app."
      }
    },
    {
      "dest": "about/index.html",
      "template": "layout",
      "locals": {
        "title": "About",
        "message": "This is the about page."
      }
    }
  ],
  "globals": {
    "app_name": "My App"
  }
}

_"src/ejs/layout.ejs"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= app_name %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p><%= message %></p>
</body>
</html>

Running...

ejs2html _src/ejs/config.json

Yields...

"index.html"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, excepturi.</p>
</body>
</html>

"about/index.html"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <h1>About</h1>
  <p>This is the about page.</p>
</body>
</html>

Scripts

sample

npm run sample

Runs some example stuff inside of /example.