index.html

{% extends "layouts/master.html" %}
{%- if DEV %}
  {% set baseurl = '' %}
{% else %}
  {% set baseurl = '/swig' %}
{% endif -%}

{% block title %}{% parent %} - A Node.js and Browser JavaScript Template Engine{% endblock %}

{% block page_content %}

<section class="content">
  <h1>Swig</h1>

  <div class="row guttered">
    <p class="span6">A simple, powerful, and extendable JavaScript Template Engine.</p>
    <p class="span6">Current Version: <strong>{{ version }}</strong>. <a href="{{ baseurl }}/docs/previous/">Looking for an older version?</a></p>
  </div>

  <hr class="small">

  <div class="row guttered">

    <section class="span6">
      <h2>Super Quick Start</h2>

      <p>For a more in-depth intro, check out the <a href="{{ baseurl }}/docs/">Getting Started docs</a>.</p>

      <h3>Install Swig</h3>
      <pre><code>npm install swig --save</code></pre>

      <h3>Create Your Template</h3>
      <pre><code data-language="swig">{% raw %}&lt;h1&gt;{{ pagename|title }}&lt;/h1&gt;
&lt;ul&gt;
{% for author in authors %}
  &lt;li{% if loop.first %} class="first"{% endif %}&gt;
    {{ author }}
  &lt;/li&gt;
{% endfor %}
&lt;/ul&gt;{% endraw %}</code></pre>

      <h3>Render Your Template</h3>
      <pre><code data-language="javascript">var swig  = require('swig');
swig.renderFile('/path/to/template.html', {
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});</code></pre>

      <h3>The End Result</h3>
      <pre><code data-language="html">&lt;h1&gt;Awesome People&lt;/h1&gt;
&lt;ul&gt;
  &lt;li class="first"&gt;Paul&lt;/li&gt;
  &lt;li&gt;Jim&lt;/li&gt;
  &lt;li&gt;Jane&lt;/li&gt;
&lt;/ul&gt;</code></pre>
    </section>

    <section class="span6">
      <h2>Features</h2>
      <ul>
        <li>Available for node.js <em>and</em> major web browsers!</li>
        <li>Uses similar methodologies as Django, Jinja2, and Twig template engines.</li>
        <li><a href="http://expressjs.com/">Express</a> compatible.</li>
        <li>Object-Oriented template inheritance.</li>
        <li>Apply filters and transformations to output in your templates.</li>
        <li>Automatically escapes all output for safe HTML rendering.</li>
        <li>Lots of iteration and conditionals supported.</li>
        <li>Robust without the bloat.</li>
        <li>Extendable and customizable.</li>
        <li>Great <a href="{{ baseurl }}/coverage.html">code coverage</a>.</li>
      </ul>

      <hr class="small">

      <h2>Download For the Browser</h2>
      <p>Swig also works in all major browsers. Just download the following file and follow the <a href="{{ baseurl }}/docs/#browser">Documentation</a>.</p>
      <p class="download">
        <a href="{{ baseurl }}/js/swig.min.js" class="btn">Download {{ version }}</a><br><br>
        <a href="{{ baseurl }}/js/swig.js">Development</a> | <a href="{{ baseurl }}/js/swig.min.js">Production</a> (<a href="{{ baseurl }}/js/swig.js.map">source map</a>)
      </p>

      <hr class="small">

      <h2>Resources</h2>

       <ul>
         <li><a href="https://groups.google.com/forum/#!forum/swig-templates">Mailing List</a></li>
         <li><a href="https://travis-ci.org/paularmstrong/swig/builds">Travis CI Build History</a></li>
         <li><a href="https://github.com/paularmstrong/swig/issues">Bug Reports</a></li>
         <li><a href="http://stackoverflow.com/questions/tagged/swig-template">Stack Overflow Questions</a></li>
         <li><a href="https://github.com/jonschlinkert/sublime-swig">Syntax Highlighting for Sublime Text</a></li>
       </ul>

    </section>

  </div>
</section>
{% endblock %}