Colors: Light | Dark
Welcome! (login)

Sytes

A Common Lisp library for building websites the easy way.

Tutorial

Sytes

Sytes is a small Common Lisp library for building simple websites. I wouldn't call it a framework—it doesn't deal with any of those things you'd expect frameworks to do, like handling authentication, database abstraction etc. Sytes just implements a template engine with a Lispy syntax and a Hunchentoot dispatcher that maps URLs to templates. Sytes is the PHP of Common Lisp (I hope this doesn't sound like an insult). If you're a Lisper, you might enjoy it.

Template syntax

The templates are HTML (we're not limited to HTML, but that's the common use case) intermixed with Lisp expressions. Sytes implements a parser which transforms your template into S-expressions which are then compiled into Lisp closures. The language is not Common Lisp; it's instead much simpler (think Scheme). Templates are compiled only once, then the main closure is stored and just executed whenever a request comes in. Templates are re-compiled only if the file modification time changed since the cache time.

Here is an example:

;; a semicolon in the first column starts a comment
;; and it's discarded from the output
<h1>{page.title}</h1>

;; show links
<ul class="links">
  {(foreach link '(("http://foo.com" . "The Foo")
                   ("http://bar.com" . "The Bar")
                   ("http://baz.com" . "The Baz"))
     (let ((url (car link))
           (name (cdr link)))
       {<li><a href="{\url}">{\name}</a></li>}))}
</ul>

Essentially, the bracket characters are special, in that they commute the parser mode. But in those cases where you'd rather use brackets for something else (such is the case for this page, where I want to type brackets literally to show you examples) you can customize it using a special directive.

You can read more about the syntax.

The filesystem structure

Templates are stored on disk in a directory structure that resembles the URL shape. Each Syte defines a root directory where templates are stored. Then, for example an URL like "http://.../foo/bar/baz" is mapped to one of the following files, depending on how they are found on disk:

Autohandlers / dhandlers

This is an idea I borrowed from Perl's HTML::Mason module. Autohandlers are a facility to ease including headers/footers in a template. For example in a language like PHP, you would need to include manually header/footer in each template—something I find unpleasant.

Before executing a template, the directory where it resides and any parent directories up to the Syte ROOT are searched for a file named “autohandler.syt”. If that file is found it is executed instead of the template, and inside that file a special function (“call-next”) may be used to execute the actual template. Autohandlers themselves are subject to the same treatment (if a parent autohandler exists, it is executed instead), allowing you to cascade changes to the output into the parent directories; if you want, it's a simple inheritance mechanism.

For an example, here is the main autohandler of this very website:

; -*- html -*-
{[define content (call-next)]}~
<!DOCTYPE html>
<html>
  <head>
    <title>{\(or (@attr 'TITLE) "Lisperator.net — to create, to ilisperate")}</title>

    <link href="/atom" type="application/atom+xml" rel="alternate"
          title="Mishoo's blog feed" />

    <link rel="stylesheet" type="text/css" href="{static-file-link "dl/new-theme/default.css"}" />
    <link rel="stylesheet" type="text/css" href="{static-file-link "css/x.css"}" />
    <link rel="stylesheet" type="text/css" href="{static-file-link "css/icons.css"}" />
    <link rel="stylesheet" type="text/css" href="{static-file-link "css/ymacs.css"}" />

    <link rel="stylesheet" media="print" type="text/css"
          href="{static-file-link "css/style-light.css"}" />

    <link class="theme-css" name="light" rel="stylesheet"
          media="screen" type="text/css" href="{static-file-link "css/style-light.css"}" />
    <link class="theme-css" name="dark" rel="stylesheet"
          media="screen" type="text/css" href="{static-file-link "css/style-dark.css"}" />

    {(if-logged-in {<script>LOGGED_IN=true</script>})}

    {(foreach style (reverse (@attr 'STYLES))
       {<link rel="stylesheet" type="text/css" href="{\style}" />})}

    {.SYNTAX "«" "»"}
    <script>//<![CDATA[
      (function(LS){
        var theme = LS && LS.getItem("colorTheme") || "light";
        var a = document.querySelectorAll(".theme-css");
        Array.prototype.slice.call(a).map(function(s){
          s.disabled = s.getAttribute("name") != theme;
        });
        document.documentElement.className = "theme-" + theme;
      })(window.localStorage);
    //]]></script>
    «.SYNTAX "{" "}"»

    <script src="{static-file-link "dl/js/thelib.js"}"></script>
    <script src="{static-file-link "dl/extras/sha1.js"}"></script>
    <script src="{static-file-link "dl/extras/md5.js"}"></script>
    <script src="{static-file-link "ymacs/js/ymacs-min.js"}"></script>

    {if NOT-IN-PRODUCTION {
      <script src="{static-file-link "x/x.js"}"></script>
      <script src="{static-file-link "x/x-datetime.js"}"></script>
      <script src="{static-file-link "x/x-dialog.js"}"></script>
      <script src="{static-file-link "x/x-messages.js"}"></script>
      <script src="{static-file-link "x/x-genericform.js"}"></script>
      <script src="{static-file-link "x/x-confirmdlg.js"}"></script>
      <script src="{static-file-link "x/x-html5upload.js"}"></script>

      <script src="{static-file-link "coloroloc/js/coloroloc.js"}"></script>
      <script src="{static-file-link "coloroloc/js/lang-lisp.js"}"></script>
      <script src="{static-file-link "coloroloc/js/lang-xml.js"}"></script>
      <script src="{static-file-link "coloroloc/js/lang-syt.js"}"></script>
      <script src="{static-file-link "coloroloc/js/lang-js.js"}"></script>
      <script src="{static-file-link "coloroloc/js/lang-lambda.js"}"></script>
      <script src="{static-file-link "js/zepto.min.js"}"></script>

      <script src="{static-file-link "js/init.js"}"></script>
      <script src="{static-file-link "js/editor.js"}"></script>
      <script src="{static-file-link "js/main.js"}"></script>
    }{
      <script src="{static-file-link "js/zepto.min.js"}"></script>
      <script src="{static-file-link "everything.js"}"></script>
    }}

    {(foreach script (reverse (@attr 'SCRIPTS))
       {<script src="{\script}"></script>})}

  </head>
  <body>
    <div class="content">
      <div class="header">
        <canvas class="background" id="bazon-fractal"></canvas>
        <a class="logo" href="/">
          Lisperator.net
          <span class="tagline">You are iLisperated!</span>
        </a>
        <div class="prefs">
          Colors:
          <a href="javascript:setColorTheme('light')">Light</a>
          |
          <a href="javascript:setColorTheme('dark')">Dark</a>

          <br />
          {(if-logged-in
             {Welcome, {\user.name}! (<a href="/@logout">logout</a>)
             <br /><a href="javascript:new_blog_post()">New blog post</a>
             <br /><a href="javascript:edit_last_page()">Edit last page</a>
             {(foreach op (@attr 'OPERATIONS)
                {<br />{op}})}}
             {Welcome! (<a href="javascript:new LoginDialog().show(true)">login</a>)})}
        </div>
      </div>
      {(let ((path (@attr 'PATH))) {
         <div class="breadcrumb">
           <div class="main-links">
             {(page-link "./blog/index.syt" "Blog")}
             {(page-link "./uglifyjs/index.syt" "UglifyJS")}
             {(page-link "./slip/index.syt" "SLip")}
             {(page-link "./sytes/index.syt" "Sytes")}
           </div>
           {(page-link "/" "Home")}
           {(foreach i (reverse path)
              (let ((name (car i))
                    (url (cadr i)))
                { → {(page-link url name)}}))}
         </div>})}
      {(let ((sc (@attr 'SUBCONTENT)))
        (when sc
          {<div class="toc keep-me-fixed">
            {(reverse sc)}
          </div>}))}
      <div class="body">{content}</div>
      <div class="footer">
        © <a href="https://github.com/mishoo">Mihai Bazon</a> 2012 - 2014<br />
        Proudly NOT powered by WordPress.<br />
        {(page-link "./about-this-site.syt" "Humbly powered by Common Lisp")}.
      </div>
      <div id="x-desktop"></div>
    </div><div id="TIME-SPENT"></div>
    {(awhen (@attr 'FORK-ME-ON-GITHUB)
      {<div class="fork-me-on-github"><a href="{\it}"><span class="text">Fork me on Github</span></a></div>})}
  </body>
  <script>ITS_ALIVE_HAHAHA()</script>
  {when (ENABLE-ANALYTICS){
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-169990-8']);
      _gaq.push(['_trackPageview']);
      (function() \{
        var ga = document.createElement('script');
        ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol
                  ? 'https://ssl' : 'http://www')
                 + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      \})();
    </script>}}
</html>
Fork me on Github