Unexpected whitespace from `{{#content}}` block

amimas commented 4 years ago

Not sure if this is a bug. This is the first time I'm trying this for logical structure and layout of handlebar templates. Here is what I have so far:

layout.hbs:

<!DOCTYPE html>
<html lang="en">
  <head>
    {{> document-head }}
  </head>

  <body>
    {{> header }}
    {{#block "main"}}{{/block}}
    {{> footer }}
  </body>
</html>

document-head.hbs (partial):

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

header.hbs (partial):

<header>
  <h1>Sample page</h1>
</header>

footer.hbs (partial):

<footer>
  <p>Sample footer</p>
</footer>

index.hbs:

{{#extend "layout"}}

  {{#content "main"}}
    <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>
  {{/content}}

{{/extend}}

Here is the output of index.html generated from index.hbs. Notice the extra whitespace in front of <div class="container">.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <header>
      <h1>Sample page</h1>
    </header>
        <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>

    <footer>
      <p>Sample footer</p>
    </footer>
  </body>
</html>

shannonmoeller commented 4 years ago

Not a bug, just an unfortunate consequence of using a templating language. All examples in the README are prettified for legibility, but most templating languages, including handlebars, will output less than ideal formatting. If this is undesirable, you'll need to pass the output through another tool that can reformat it for you.

amimas commented 4 years ago

Thanks for the quick reply. The above mentioned whitespace issue only seems to happen when using {{content}}. So maybe there's a room for enhancing this so that additional reformatting tool is not needed. Or maybe it's not as simple as I imagine. I am relatively new to templating language.

As a workaround, I updated my content to add an extra blank line after {{content}}. That seems to be good enough for now. For example use the following in index.hbs instead of the one I posted above:

{{#extend "layout"}}

  {{#content "main"}}

    <div class="container">
      <div id="menu"></div>
      <div id="content">
        <p>Hello world!!</p>
      </div>
    </div>
  {{/content}}

{{/extend}}

shannonmoeller / handlebars-layouts

Unexpected whitespace from `{{#content}}` block #49