Socket
Socket
Sign inDemoInstall

ez-pz-template-squeezy

Package Overview
Dependencies
93
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    ez-pz-template-squeezy

Create re-usable HTML-elements for static pages almost like React.js but without the need to know any other language than HTML.


Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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

Keywords

FAQs

Last updated on 02 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc