Introduce debug feature

What is this?

file source information

This PR will introduce the debug mode which output the source file name into data-separ-component attribute.

After landing this PR, Spear will generate the following HTML

<!DOCTYPE html>
<html lang="en" data-spear-page="/index">

...

<body>
  <header><img src="./images/logo.png">
    <div class="spear-description">
        <pre><code class="html">
          &lt;section&gt;
            &lt;first-component&gt;&lt;/first-component&gt;
          &lt;/section&gt;
          </code></pre>
      </div>
    </section>
  </main>
</body>

</html>

content information

This PR will make the Spear to generate the cms content information into attribute as well.

If original code has cms-item or cms-list attribute, spear will generate the following html with data-spear-content-type and data-spear-content attribute.

<body>
    <header><img src="./images/logo.png">
        <div class="spear-description">
            <p><span>Welcome spear-cli</span> powered by Spearly CMS🚀</p>
        </div>
        <div data-spear-content-type="test" data-spear-content="raaa">
            <h1>test</h1>
        </div>
    </header>
</body>

An above example, <div data-spear-content-type="test" data-spear-content="raaa"> figure that:

This original code specified the element has cms-item attribute
The content type is "test"
The content id (alias) is "raaa"

unimal-jp / spear