Wondering what’s next for npm?Check out our public roadmap! »

    htmlbilder

    2.0.2 • Public • Published

    This is a tool for converting a directory of Handlebars templates into one .html file.

    It recursively does the following:
    If it finds an index.hbs file in a directory, it renders the template and passes all the .htm files in that directory (direct children) to the template as a context object, using name of the file as key and contents of the file as value.
    If no index.hbs file is found in a directory, it just concatenates the .htm files in that directory.

    You can configure it to use different name patterns or extension for files.

    Usage:

    If we have the following directory:

    somedir/
    ├─ index.hbs
    ├─ header.htm
    └─ footer.htm
    

    and our index.hbs contained:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        {{{ header }}}
     
        {{{ footer }}}
      </body>
    </html>

    and contents of the header.htm file were:

    <header>
      <h1>Header</h1>
    </header>

    and the footer.htm file looked like this:

    <footer>
      <h3>Footer</h3>
    </footer>

    then after running: htmlbilder somedir our index.html would look like this:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <header>
          <h1>Header</h1>
        </header>
     
        <footer>
          <h1>Footer</h1>
        </footer>
      </body>
    </html>

    CLI:

    Usage: htmlbilder somedir [-o page.html -t main.hbs -e .html -w]
    
    A tool for converting a directory of Handlebars templates into one HTML file.
    
    Options:
      -r, --rootDir [value]          Templates directory path. Ignored if
                                     hyphenless arg is provided. (default: "./")
      -o, --outFile [value]          The output file. (default: "./index.html")
      -t, --tempFile [value]         Filename pattern for the template files.
                                     (default: "index.hbs")
      -e, --dataFileExt [value]      The file extension that should be considered
                                     as a data file. (default: ".htm")
      -i, --indentChar [value]       Indent character for indenting the output HTML
                                     file. options: tab|space (default: "tab")
      -c, --indentCharCount [value]  How many indentChar? maximum value: 8
                                     (default: 1)
      -w, --watch                    Watch for changes and recreate the output file
                                     on changes.
      -v, --version                  Show version number.
      -h, --help                     Show help.
    

    More examples:

    A directory containing a template:

    somedir/
    ├─ index.hbs
    ├─ sidebar.htm
    └─ header/
       ├─ index.hbs
       ├─ user.htm
       └─ nav.htm
    <!-- somedir/index.hbs -->
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        {{{ header }}}
     
        {{{ sidebar }}}
      </body>
    </html>
     
    <!-- somedir/sidebar.htm -->     <div id="sidebar"></div>
    <!-- somedir/header/index.hbs -->
    <header>
      {{{ nav }}}
      {{{ user }}}
    </header>
    <!-- somedir/header/user.htm --> <div id="user-info"></div>
    <!-- somedir/header/nav.htm -->  <nav id="navigation"></nav>

    index.html after running htmlbilder somedir:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <header>
          <nav id="navigation"></nav>
          <div id="user-info"></div>
        </header>
     
        <div id="sidebar"></div>
      </body>
    </html>

    A directory not containing a template:

    When a directory does not contain a template, all the data files inside it (if there's any) or inside any subsequent folders will be concatenated.

    somedir/
    ├─ index.hbs
    ├─ sidebar.htm
    └─ modals/
       ├─ confirm.htm
       ├─ alert.htm
    └─ prompts/
       ├─ age.htm
       └─ job.htm
    
    <!-- somedir/index.hbs: --> 
    <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        {{{ sidebar }}}
     
        {{{ modals }}}
      </body>
    </html>
     
    <!-- somedir/sidebar.htm -->            <div id="sidebar"></div>
    <!-- somedir/modals/confirm.htm -->     <div class="modal">confirm</div>
    <!-- somedir/modals/alert.htm -->       <div class="modal">alert</div>
    <!-- somedir/modals/prompts/age.htm --> <div class="modal">prompt age</div>
    <!-- somedir/modals/prompts/job.htm --> <div class="modal">prompt job</div>

    index.html after running htmlbilder somedir:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <div id="sidebar"></div>
     
        <div class="modal">confirm</div>
        <div class="modal">alert</div>
        <div class="modal">prompt age</div>
        <div class="modal">prompt job</div>
      </body>
    </html>

    Install

    npm i htmlbilder

    DownloadsWeekly Downloads

    2

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar