Kit
Kit copied to clipboard
bdkjones
Retain indenting of include file
Would like to render include content at the indent level of @import reference. Since an actual template delivery to client most likely would be the rendered source and not the set of .kit files, it'd be ideal to give them less-mangled markup.
Include Contents:
<!-- #nav -->
<nav>
<ul>
<li><a href="link.html">Lorem </a></li>
<li><a href="link.html">Ipsum</a></li>
<li><a href="link.html">Dolor</a></li>
</ul>
</nav>
<!-- /nav -->
Input:
<body>
<header>
<!-- @import "header.html" -->
</header>
</body>
Current Kit Output:
<body>
<header>
<!-- #nav -->
<nav>
<ul>
<li><a href="link.html">Lorem </a></li>
<li><a href="link.html">Ipsum</a></li>
<li><a href="link.html">Dolor</a></li>
</ul>
</nav>
<!-- /nav -->
</header>
</body>
Desired Kit Output:
<body>
<header>
<!-- #nav -->
<nav>
<ul>
<li><a href="link.html">Lorem </a></li>
<li><a href="link.html">Ipsum</a></li>
<li><a href="link.html">Dolor</a></li>
</ul>
</nav>
<!-- /nav -->
</header>
</body>
@indrekpaas,
Ah, but includes reused elsewhere at a different indent level will be out of sync.
Suppose contents of thing.kit is indeed indented...
<ul class="thing">
<li><a href="link.html">Ipsum</a></li>
<li><a href="link.html">Dolor</a></li>
</ul>
...that may work for...
<body>
<div>
<!-- @import "thing.kit" -->
</div>
</body>
...but not for...
<body>
<div>
<div>
<div>
<!-- @import "thing.kit" -->
</div>
</div>
</div>
</body>
...which will compile as...
<body>
<div>
<div>
<div>
<ul class="thing">
<li><a href="link.html">Ipsum</a></li>
<li><a href="link.html">Dolor</a></li>
</ul>
</div>
</div>
</div>
</body>
I see the reasoning behind the request. If you're assembling a page out of a bunch of Kit includes and you want to use the web inspector to look at the final result, it helps if its all indented properly.
In theory, all that needs to happen is to count the number of spaces a particular special comment was indented and then add that number of spaces to every line in the imported file, recursively.
It's a simple solution, but the way the Kit compiler is written right now makes it tough to implement. I plan to overhaul Kit to do some other cool things like basic If-else support, so this will make it in at that time.
@bdkjones, This would be outstanding.
"...and you want to use the web inspector to look at the final result, it helps if its all indented properly."
Inspectors already indents properly. The use case is more for a clean compiled output. For example, I most likely deliver that compiled result without any Kit references to the client (or otherwise downstream recipient). That is, well-formatted HTML which was built by Kit.
+1
I take it if/when this is implemented it will only be for CodeKit 2? or 1 as well (please)?
Could the same effect not be achieved by a post process using something like http://www.html-tidy.org ?
@dwkns Yes, I'm currently using a grunt watch task (https://www.npmjs.com/package/grunt-prettify) to go around this, I guess something similar embedded in Codekit would solve the issue ( cc @bdkjones )
True, although personally I find grunt much more convenient than messing with AppleScript or Bash, since I use it for other tasks as well.
FWIW, even though I opened this issue, I'm no longer interested in it. As @vmasto mentions Grunt has taken over my process and I use grunt-prettify.
Same for much of what The KIT Language does, e.g. grunt-simple-include and grunt-bake are the ones I've used so far.
@bdkjones This is still happening as of CodeKit 2.5.1. I have to say it's a bit annoying, specially for a indent freak like me. Any planned workarounds or fixes on this?
I have a workaround...which also works to document the included file:
index.kit:
<html>
<head>
...
</head>
<body>
<!-- @include widget -->
</body>
</html>
_widget.kit
<!-- This is my widget -->
<!-- @c!
You can put whatever you want in this comment, and CodeKit will
remove it (see issue #9). For example, you can document what variables
are used by this import, etc. This comment is not needed, but since you
are anal about indentation (like I am), you are probably equally anal about
making sure your code is properly documented (also - like me)!
-->
<p>
This paragraph is indented properly according to the parent file. It
doesn't make much sense for components that can be included at
arbitrary indentation, but works fine when including site navigation
items, etc.
</p>
Output will be:
<html>
<head>
...
</head>
<body>
<!-- This is my widget -->
<p>
This paragraph is indented properly according to the parent file. It
doesn't make much sense for components that can be included at
arbitrary indentation, but works fine when including site navigation
items, etc.
</p>
</body>
</html>
There only key to getting this to work correctly is to include a "plain" HTML comment that is non-indented. It will then be indented properly
