Ez-pz-template-squeezy NPM

EZPZ-Template-Squeezy

A VS Code Extension for creating reusable HTML-components without the need to know JavaScrips or similar.

0. Install EZ-PZ-Template-Squeezy

npm i ez-pz-template-squeezy

1. Getting Started

Run ez-pz init to create a component and src folder

ez-pz squeeze

2. Create HTML-Components

Create "HTML-Components" in separate HTML-files in a components directory

<!-- Example ./components/MainMenu.html file -->
<nav>
  <a href="/">
    <img src="/assets/logos/logotype.svg" alt="example logotype" />
  </a>
  <ul>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Conact</a></li>
    <li><a href="/services.html">Services</a></li>
  </ul>
</nav>

3. Use your components

Inject the components in your HTML-Files in a src directory

<!-- Example ./src/index.html file -->
<!DOCTYPE html>
<html>
  <head>
    <title>Ez PZ Template Squeezy</title>
  </head>
  <body>
    <ez-pz component="MainMenu"></ez-pz>
    <!-- ... -->
    <ez-pz component="Footer"></ez-pz>
  </body>
</html>

4. Generate HTML-Files

Squeeze your files to generate your ready-to-publish HTML-files:

ez-pz squeeze

A output directory will be created with your ready-to-publish HTML-files

<!-- Example output in ./output/index.html file -->
<!DOCTYPE html>
<html>
  <head>
    <title>Ez PZ Template Squeezy</title>
  </head>
  <body>
    <!-- Start of MainMenu -->
    <header>
      <nav>
        <a href="/">
          <img src="/assets/logos/logotype.svg" alt="example logotype" />
        </a>
        <ul>
          <li><a href="/about.html">About</a></li>
          <li><a href="/contact.html">Conact</a></li>
          <li><a href="/services.html">Services</a></li>
        </ul>
      </nav>
    </header>
    <!-- End of MainMenu -->

    <!-- ... -->

    <!-- Start of Footer -->
    <footer>
      <h2>Footer</h2>
      <p>© Example Company | All Rights Reserved</p>
    </footer>
    <!-- End of Footer -->
  </body>
</html>

Built in Dev-Server

Creating a dev-server for your files is EZ-PZ!

ez-pz dev

optional - Specify port

ez-pz dev 4040

Watch for file changes

Rebuild files on file change in ./src/*.html

ez-pz squeeze watch

Rebuild files and update server on file change in ./src/*.html - (Reload of browser still needed currently)

ez-pz dev watch

html template-engine template templating

cheerio chokidar express htmlparser2 prettier

@everything-registry/sub-chunk-1640

1.0.1

2 years ago

1.0.0

2 years ago