Harp produces a lot of whitespace

welblaud commented 8 years ago

I run a blog on Harp. Everything works like a charm but one thing I can’t achieve (and don’t understand). The whole project uses EJS. The problem is in the produced source (HTML) there is a lot of additional whitespace. I’ve tried to reduce it like in case of menus but that did not work.

I would expect reducing of line breaks at least. Typically I use something like this:

<li id="nav1" class="main-menu-li-current"><a class="menu-link-current" href="/">home</a></li><!--
    --><li id="nav2" class=""><a class="menu-link" href="/ebooks">ebooks</a></li><!--
    --><li id="nav3" class=""><a class="menu-link" href="/coding">coding</a></li><!--

But the problem is in parts dynamically served by EJS, there this does not work, the code looks ugly:

<div class="categories"><!--

           --><span class="category"><a class="category-link" href="/ebooks">ebooks</a></span>

Is there any way how to deal with that? If I use minified LESS, I would like to use minified (or at least reasonably looking) HTML as well!

Example code:

    <div class="categories">
      <% var categories = public.articles._data[slug].categories %>
      <% if (categories !== undefined) { %>
         <% for (var i = 0; i < categories.length; i++) { %>
           <% if (categories[i] !== "vim tips") { %>
             --><span class="category"><a class="category-link" href="/<%= categories[i]  %>"><%= categories[i] %></a></span>
            <% } else { %>
              <span class="category"><a class="category-link" href="/vim">vim tips</a></span>
            <% } %>
          <% } %>
        <% } %>
      </div>

matteo-bombelli commented 8 years ago

remember that ejs is "like" php if you write:

   <div class="categories">
      <% var categories = public.articles._data[slug].categories;
      if (categories !== undefined) {
         for (var i = 0; i < categories.length; i++) {
           if (categories[i] !== "vim tips") { %>
             <span class="category"><a class="category-link" href="/<%= categories[i]  %>"><%= categories[i] %></a></span>
            <% } else { %>
              <span class="category"><a class="category-link" href="/vim">vim tips</a></span>
            <% }
          }
       } %>
      </div>

You will get a lot of less whitespace: new lines inside of <% %> will be not send to the html

welblaud commented 8 years ago

Thanks a lot, it explains everything! Solved.

matteo-bombelli commented 8 years ago

welcome :smile: ! Really happy to be usefull!

sintaxi / harp

Harp produces a lot of whitespace #544