Glueman NPM | npm.io

Glueman

Breaking down files of any text format into components and then reassemble them.

Install

npm install glueman --save

Why Using Glueman

We mainly built Glueman to break down static websites into components without using anything else than plain HTML. No webpack or grunt or gulp configuration shenanigans. Just break down your static website into component using plain HTML, then reference them into your main HTML pages using their path and THAT'S IT!!! It looks something like this:

This could be an HTML page that references one of your new component:

<p>A lot of HTML stuff here</p>
<div>
  <glue src="relativepath/components/yourcomponent.html" someparam="a_picture_for_example.png">
    <someothervar>
      <p>Hello, I'm a lot of other HTML<p/>
    </someothervar>
  </glue>
</div>
<p>Another heaps of other HTML stuff here</p>

yourcomponent.html loacated under relativepath/components/

<div>
  <img src="./static/img/<glue.someparam/>">
  <div>
    <glue.someothervar/>
  </div>
</div>

How To use It

To use Glueman, you must: 1. Break down some source files into components, and then 2. Run a command to reassemble them.

Breaking Down Your Source Files To Be Reassembled

Let's just imagine the following source folder under the my_website folder:

  my_website/
  |
  |__src/
      |
      |__img/
      |   |
      |   |__cat.jpg
      |
      |__components/
      |      |
      |      |__base.html
      |      |
      |      |__header.html
      |
      |__home.html
      |
      |__about.html

where the files base.html and header.html are components files written in plain HTML, and home.html and about.html are HTML files referencing the component files:

base.html

<!DOCTYPE html>
<html>
<head>
  <title><glue.title/></title>
</head>
<body>
  <glue.body/>
</body>
</html>

This will be our base template that all HTML files will be using. Notice the special tags <glue.title/> and <glue.body/>. Glueman uses the reserved tag to either:
Reference a parameter (e.g. <glue.someparam/>)
Reference another file (e.g. ) In the above example, <glue.title/> and <glue.body/> means that the base.html component expects 2 parameters called respectively title and body. More about this below.

header.html

<h1><glue.title/></h1>
<h2>CONTENT</h2>
<div>
  <img src="<glue.root/>/img/cat.jpg"/>
  <p>
    <glue.propwhatever/>
  </p>
</div>

Very similar to the base.html component above. Here we have 3 parameters that can be passed: title, root and propwhatever.

home.html

<glue src="./components/base.html" title="Welcome Home!">
  <body>
    <glue src="./components/header.html" root="." title="A Cat!?">
      <propwhatever>This is some <strong>serious gluing</strong> here.</propwhatever>
    </glue>
  </body>
</glue>

The home.html file uses both the base.html and the header.html components. Notice:
To reference a component, you need to use the src attribute of the tag.
There are 2 ways of passing parameters to a component. (a) using an attribute (e.g. title="Welcome Home!") (b) using a tag named like the parameter (e.g. and ). The recommendation is to use attributes for short parameter value, and tags for big values like text or HTML content.

about.html

<glue src="./components/base.html" title="About Us">
  <body>
    <glue src="./components/header.html" root="." title="About a Cat!?">
      <propwhatever>We're serious about cats!</propwhatever>
    </glue>
  </body>
</glue>

Very similar to the above home.html.

Commands

Browse to the my_website folder, and run one of the following command:

glue run ./src ./dst

This will copy the entire content of the ./src folder into the ./dst folder. The difference between ./src and ./dst is that all files under ./dst will have been reassembled.

To automatically reassemble all files under ./dst each time a change to a files is made inside ./src, you can run the following:

glue start ./src ./dst

In both cased, using the example above, you'll end up with this:

  my_website/
  |
  |__dst/
  |   |
  |   |__img/
  |   |   |
  |   |   |__cat.jpg
  |   |
  |   |__components/
  |   |      |
  |   |      |__base.html
  |   |      |
  |   |      |__header.html
  |   |
  |   |__home.html
  |   |
  |   |__about.html
  |
  |__src/

Notice the new dst folder. It looks exactly like the src folder, except that all the files have been reassembled:

home.html

<!DOCTYPE html>
<html>
<head>
  <title>Welcome Home!</title>
</head>
<body>
  
    <h1>A Cat!?</h1>
    <h2>CONTENT</h2>
    <div>
      <img src="./img/cat.jpg"/>
      <p>
        This is some <strong>serious gluing</strong> here.
      </p>
    </div>
    
  
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
  <title>About Us</title>
</head>
<body>
  
    <h1>About a Cat!?</h1>
    <h2>CONTENT</h2>
    <div>
      <img src="./img/cat.jpg"/>
      <p>
        We're serious about cats!
      </p>
    </div>
    
  
</body>
</html>

This Is What We re Up To

We are Neap, an Australian Technology consultancy powering the startup ecosystem in Sydney. We simply love building Tech and also meeting new people, so don't hesitate to connect with us at https://neap.co.

License

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
Neither the name of Neap Pty Ltd nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL NEAP PTY LTD BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

glue assemble files templates builder

chokidar colors commander glob lodash ncp readline replace rimraf shortid

@infinitebrahmanuniverse/nolb-glu @everything-registry/sub-chunk-1772

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago