search

bdkjones / Kit

The Kit Compiler, as implemented in CodeKit
77 stars 6 forks source link

Retain indenting of include file #3

Open francisrupert opened 10 years ago

francisrupert commented 10 years ago

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>
francisrupert commented 10 years ago

Any general response to this? :)

ustange commented 10 years ago

It would be nice to have this.

dbox commented 10 years ago

Just ran into exact issue

dongepulango commented 10 years ago

That would be great!

dbox commented 9 years ago

@indekpass Doesn't work, at least didn't for me

francisrupert commented 9 years ago

@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>
bdkjones commented 9 years ago

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.

vmasto commented 9 years ago

Great to know this is going to be implemented!

francisrupert commented 9 years ago

@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.

dbox commented 9 years ago

+1

I take it if/when this is implemented it will only be for CodeKit 2? or 1 as well (please)?

bdkjones commented 9 years ago

Yea, the implementation will be 2.0+ only.

NazarkinRoman commented 9 years ago

Waiting for feature :)

dwkns commented 9 years ago

Could the same effect not be achieved by a post process using something like http://www.html-tidy.org ?

vmasto commented 9 years ago

@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 )

dwkns commented 9 years ago

You might be able to do this as a hook so you wouldn't need to use grunt.

vmasto commented 9 years ago

True, although personally I find grunt much more convenient than messing with AppleScript or Bash, since I use it for other tasks as well.

francisrupert commented 9 years ago

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.

zehfred commented 8 years ago

@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?

toonetown commented 8 years ago

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