bdkjones / kit Goto Github PK

View Code? Open in Web Editor NEW

77.0 77.0 6.0 107 KB

The Kit Compiler, as implemented in CodeKit

Objective-C 100.00%

kit's People

Contributors

Stargazers

Watchers

Forkers

mralexgray mtco calvinjuarez python3pkg rimaterra hannahbellelee

kit's Issues

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>

Ability to use variable in variable value

It would be nice to be able to do the following:

<!-- $name = World -->
<!-- $message = Hello, $World -->
<!-- $message -->

Currently, this prints out "Hello, $World". I understand that this is not as straightforward of an issue as it seems at first (what if I wanted to set , for example) - and that this sort of functionality may better be suited for another language such as Jade or Haml, but this sort of functionality would be extremely helpful for building up reusable kit language components.

Feature Request: More Flexible Handling Of THE Space In Imports

In the CodeKit help for .kit files, it says:

The syntax is flexible. You can use @include instead of @import if you prefer. Quotes and spaces are totally optional (except for the space after the @import statement; that one you need).

Cool, cool. So, I'm doing some multiple imports, because hell yes those are helpful and nice to have. And if I do them this way, it works:

<!-- @import pages/companies.kit,
    pages/people.kit,
    pages/person.kit,
    pages/tests.kit
-->

But, oh man, the parser is pretty strict. It really wants that space after the @import statement to be a SPACE. So, this cleaner, nicer-looking alternative most certainly does not work.

<!-- @import
    pages/companies.kit,
    pages/people.kit,
    pages/person.kit,
    pages/tests.kit
-->

I'm going to assume this is one of those NP Hard problems, and take my lumps. But if, on the off chance, a tiny tweak to the parser ends up in a future version that allows this, I'm going to take a video of myself doing the happy dance, and hold my phone up to the very Sun itself to show it just how happy I am.

As this project been updated to Swift?

Hello,

I'm looking into using the project on my own, and I wondered if it has been converted to Swift?

Thanks

feature request: yielding

it would be nice to support yielding:

basic example

layout.kit

<!doctype html>
<html>
<head>
  <title>yield ftw</title>
</head>
<body>
  <!-- @yield -->
</body>
</html>

content.kit

<!-- @layout layout -->
<p>content row 1</p>
<p>content row 2</p>
<p>content row 3</p>

result

<!doctype html>
<html>
<head>
  <title>yield ftw</title>
</head>
<body>
<p>content row 1</p>
<p>content row 2</p>
<p>content row 3</p>
</body>
</html>

a more flexible example

layout_extended.kit

<!doctype html>
<html>
<head>
  <title>yield ftw</title>
</head>
<body>
  <header>
    <!-- @yield header -->
  </header>
  <div class="content">
    <!-- @yield main -->
  </div>
</body>
</html>

content_extended.kit

<!-- @layout layout_extended -->

<!-- @content header -->
<h1>title</h1>
<p>subtitle</p>

<!-- @content main -->
<!-- @include content -->

(optionally we can close content sections with an )

result

<!doctype html>
<html>
<head>
  <title>yield ftw</title>
</head>
<body>
  <header>
<h1>title</h1>
<p>subtitle</p>
  </header>
  <div class="content">
<p>content row 1</p>
<p>content row 2</p>
<p>content row 3</p>
  </div>
</body>
</html>

or with resolved #3

<!doctype html>
<html>
<head>
  <title>yield ftw</title>
</head>
<body>
  <header>
    <h1>title</h1>
    <p>subtitle</p>
  </header>
  <div class="content">
    <p>content row 1</p>
    <p>content row 2</p>
    <p>content row 3</p>
  </div>
</body>
</html>

As a user I want a loop function so that I don't have to repeat code

Hi Jones,

It would be really nice with some kind of loop function e.g.

ul
@loop = 4
li-element
/@loop
ul

Keep up the good work!

Feature Request: Standardized Kit Comment Syntax

Issue

Currently, I'm using the following to make a comment that Kit removes, but also doesn't store a variable:

<!-- @c! Some Comment -->

This works perfectly, but feels a little hack-y. It'd be nice to have a defined syntax for a comment that Kit should remove, but wouldn't store a variable or do anything that may affect the output.

Possible Pattern

<!-- $! Some Comment -->
<!-- @! Some Comment -->

The $ or @ would mean it would match the current Special Comment check, and the ! feels like an concise (and HTML-ish) way to indicate a comment.

Variables Prefixed with @ or $ fail to render. Should they?

I noticed variables which are immediately preceded by the @ or $ fail to render. Adding a space between the symbol and variable allows it to works as expected. Is this a bug or known issue, and is there a workaround?

Fails

    $<!-- $price -->
    @<!-- $username -->

Works

    $ <!-- $price -->
    @ <!-- $username -->

.kit — Code is not being inserted by CodeKit.

I am having trouble making kit to work. Right now I am trying to import test.kit into the body, however after the build I only have the comment and not the HTML from the import. Do I need to activate any settings in CodeKit to compile this properly?

The files are at the same level, in the root of the folder.

Thank you in advance.

test.kit

<div>
  <h1>Hello world</h1>
</div>

index.html

<body>
  <!-- @import test.kit -->
</body>

Feature Request: Conditionals (or Empty/Unset Vars)

For example:

page.kit

<!DOCTYPE html>
<!-- @page = Page -->
<html>
<head>...</head>
<body>
    <nav>
<!-- @import nav.kit -->
    </nav>
    ...
</body>
</html>

nav.kit

        <ul>
            <li <!-- @page == Home ? class="active" -->>
                <a href="/">Home</a>
            </li>
            <li <!-- @page == Page ? class="active" -->>
                <a href="/page.html">Page</a>
            </li>
            <li <!-- @page == Other ? class="active" -->>
                <a href="/other.html">Other</a>
            </li>
        </ul>

page.html

<!DOCTYPE html>
<html>
<head>...</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            <li class="active">
                <a href="/page.html">Page</a>
            </li>
            <li>
                <a href="/other.html">Other</a>
            </li>
        </ul>
    </nav>
    ...
</body>
</html>

Capital-lettered variables get included in the output

A variable defined with a capital letter  will get included in the compiled html, whereas  and  behave as expected.

Is it possible to use a variable in an import/include?

As Kit can't do conditionals, I was hoping to use variables in file path to include a file. I tried:

<!-- $content: content.kit -->
<!-- @include source/shared/$content -->

<!-- $path: one -->
<!-- @include source/shared/$path/content.kit -->

Neither works. Perhaps there is a different syntax?

Feature request: compression

Since working with modular structure and source files, it would be nice to get to compress the HTML output to remove the whitespace where appropriate.

JavaScript version for integration with, e.g., Grunt or Brunch?

Wondering if anyone's started a project to create a JavaScript version of the CodeKit .kit "compiler" that could be integrated into Grunt or Brunch. As much as I like using .kit files, the lack of an OS-agnostic, command-line compiler pretty much rules it out.

Feature Request: File Globbing for Imports

I'd like to be able to import all the files in a given directory to a certain place with one comment.

<!-- @import 'files/*' -->
<!-- @import 'kit-files/*.kit' -->

Or even more simply, just "import a directory" (meaning everything inside) so there's no need for * pattern matching.

<!-- @import files/ -->

Kit: Import entire folder?

Is it possible to import an entire folder or html files ala  like SCSS?

This would be extremely helpful for templated systems that have variable # of includes / files.

Accept empty var

I would love to see the possibility to declare empty variables, which would be useful in some situation like this one: (you want a prev/nav button but not on the index for ex.)

index.kit

<!-- $navigation -->
<!--@import header.kit -->

somePage.kit

<!-- $navigation <nav><a href="nextpage.html">Next Page</a></nav> -->
<!--@import header.kit -->

header.kit

<h1>My Awesome Site</h1>
<!--$navigation-->

Can we use gulp to compile it?

Documentation: Fix incorrect statement about variable scope

For example, I'd love to define all my localization strings as variables in a single file (strings.en.kit) and then be able to use them in the parent file (and every other file that the parent imports).

I think that the default behavior should be like it is right now, when you do , but perhaps I suggest a  or something similar (perhaps even to ONLY allow variables when doing @importGlobal...and maybe the file format is just:

$var1: value1
@var2 = value2

Or call the command @importVars or something...I'm not too worried about syntax - I just think it might be nice to have a single include for importing all variables (at least the default values).