npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

modularize-html

v3.1.9

Published

CLI package to create a static website from EJS templates

Downloads

9

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jeroentvbjeroentvb

Keywords

modularhtmlcomponentEJSwebpframeworkmodular-html

Readme

npm version

Modularize html

This CLI package uses ejs to allow building a static website from modular ejs (HTML) files. The main goal is to enable a developers to create a static site in a modular way. It's also meant to be as simple as possible, while applying some best practices at build.
It can also minify js & css, and encode png and jpeg files to webp on build.

Also check out the boiler plate repo which uses this package.

Table of contents

Installation

Install using the following commands

npm install modularize-html

Usage

Add the following lines in your package.json under scripts:

"create-config": "modularize-html create-config",
"dev": "modularize-html serve",
"new-page": "modularize-html new-page",
"build": "modularize-html build"

Next, run npm run create-config. This creates the necessary config file. Ater that you can run npm run dev, and start developing.

Build your website in a folder called src in the root directory of your project. The page templates should go in src/pages. Partials/components can go into any directory. Just link them in your page to use them.

Config

There are a few configurable options for modularize-html in modularize-html-config.json.

build.minify.js

Boolean
Minify the JavaScript files on build.

build.minify.css

Boolean
Minify the CSS files on build.

build.encodeImagesWebp

Boolean
Encode .jpg and .png images to .webp on build. More info here.

build.pageTitle.home

String
<title> for the index.html file.

build.pageTitle.suffix

String
Suffix for the page <title>. Can be empty.

development.removeWebpSources

Boolean
Remove .webp <source> tags from a <picture> element while running the dev server. More info here.

development.staticSite

Boolean
Send message to the browser if the link navigate to doesn't contain .html. That means it's not linked in the html with .html and won't work as a static site.
If you are planning on hosting the pages on a web server, you won't need to do so, because the server should resolve the url.

development.customTemplateVariables

Object
Keys in this object will be made available in your ejs template pages. This way you can pass in your own arrays and objects to the template in order to build the site from the provided data.

sass

Boolean To use scss while developing, set this to true. Entry file is styles.scss.

Development

To develop the website, this app uses a simple express server. To run the dev server enter npm run dev in the terminal.

New page

To create a new page use npm run new-page pagename. Where pagename would be the name of your page. This creates a new template with the head and tail already linked.

Page titles

The page titles are based on the filenames. The only exception being index(.html), which can be set in the config. You can put a suffix behind the title, also found in the config. If you want to use a custom page title, you must add your own <head> and not use the default head.ejs.

webp images

While developing you can enable the options under the webp key in the config to develop your website without having to worry about compiling images to .webp format. This is done in the build step if encodeImages is set to true.
If you'd like to use .webp images in the final build, it's recommended to use the provided image-jpg.ejs or image-png.ejs templates. Alternatively you can link your .webp sources manually.

Linking html files

Linking to another file is the same as you would in a static html file, so link to /index.html.
Also see the development.staticSite config option.

CSS preprocessor

You can use your own css preprocessor if you so desire. Just make sure changes in your source file are being watched and compiled a css file and make sure it's linked in head.ejs, or your custom <head>. Otherwise changes won't show up or be included in the compiled website.

JS minify/transpile

You can use your own js transpiler if you so desire. Just make sure it's compiled and linked in tail.ejs, or anywhere else, before compiling the website.

Build the website

If you are done you can build the website using npm run build. This will copy the assets folder to a newly created dist folder. It also compiles the ejs templates and creates an html file in the dist folder.