Added the hakyll homepage as an example itself.

10 files changed, 447 insertions, 0 deletions

diff --git a/examples/hakyll/about.markdown b/examples/hakyll/about.markdown
new file mode 100644
index 0000000..2091ee8
--- /dev/null
+++ b/examples/hakyll/about.markdown
@@ -0,0 +1,23 @@
+---
+title: About
+---
+## Code
+
+The code for Hakyll is freely available on
+[github](http://github.com/jaspervdj/Hakyll/). Patches and suggestions are
+always very welcome.
+
+## Inspiration
+
+Hakyll is not the only static site generator out there. It was inspired by the
+following awesome projects:
+
+- [yst](http://github.com/jgm/yst)
+- [nanoc](http://nanoc.stoneship.org/)
+- [Jekyll](http://jekyllrb.com/)
+
+## License
+
+Hakyll is available under a BSD license. Note, however, that pandoc is
+released under a GPL license. Since you'll probably use Hakyll with pandoc,
+you will have to license your code under a GPL-compatible license.
diff --git a/examples/hakyll/css/default.css b/examples/hakyll/css/default.css
new file mode 100644
index 0000000..c168243
--- /dev/null
+++ b/examples/hakyll/css/default.css
@@ -0,0 +1,103 @@
+html {
+    padding: 0px;
+    margin: 0px;
+    background-color: white;
+    color: black;
+    font-family: sans-serif;
+}
+
+body {
+    padding: 0px 0px 60px 0px;
+    margin: 0px;
+}
+
+div#header {
+    height: 32px;
+    padding: 20px 0px 20px 60px;
+}
+
+div#header img {
+    display: inline;
+    vertical-align: middle;
+}
+
+div#header h1 {
+    padding-left: 10px;
+    display: inline;
+    text-transform: uppercase;
+    vertical-align: middle;
+}
+
+div#main {
+    margin: 0px auto 0px auto;
+    width: 760px;
+}
+
+div#sidebar {
+    margin-right: 30px;
+    width: 160px;
+    float: left;
+    text-align: right;
+}
+
+div#navigation a {
+    display: block;
+    font-size: 110%;
+    text-decoration: none;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+
+div#content {
+    width: 570px;
+    float: right;
+}
+
+div#footer {
+    padding-top: 30px;
+    clear: both;
+    font-size: 90%;
+    text-align: center;
+}
+
+a {
+    color: black;
+}
+
+h2 {
+    font-size: 120%;
+    text-transform: uppercase;
+}
+
+h3 {
+    font-size: 100%;
+    text-transform: uppercase;
+}
+
+div.column {
+    width: 50%;
+    float: left;
+}
+
+div.column p {
+    padding-right: 15px;
+}
+
+ul {
+    list-style-type: square;
+    list-style-position: inside;
+    padding-left: 0px;
+}
+
+code {
+    background-color: rgb(210, 210, 210);
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+pre code {
+    display: block;
+    background-color: rgb(50, 50, 50);
+    color: white;
+    padding: 8px;
+}
diff --git a/examples/hakyll/css/syntax.css b/examples/hakyll/css/syntax.css
new file mode 100644
index 0000000..3fce223
--- /dev/null
+++ b/examples/hakyll/css/syntax.css
@@ -0,0 +1,20 @@
+/* Generated by pandoc. */
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
+{ margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
+td.lineNumbers { border-right: 1px solid #555555; text-align: right; color: #555555; padding-right: 5px; padding-left: 5px; }
+td.sourceCode { padding-left: 5px; }
+pre.sourceCode { }
+pre.sourceCode span.Normal { }
+pre.sourceCode span.Keyword { color: #ff8fdf; font-weight: bold; } 
+pre.sourceCode span.DataType { color: #6fdfff; }
+pre.sourceCode span.DecVal { color: #bf5f8f; }
+pre.sourceCode span.BaseN { color: #bf5f8f; }
+pre.sourceCode span.Float { color: #bf5f8f; }
+pre.sourceCode span.Char { color: #bf8f5f; }
+pre.sourceCode span.String { color: #bf8f5f; }
+pre.sourceCode span.Comment { color: #9f5f4f; font-style: italic; }
+pre.sourceCode span.Others { color: #ff8fdf; }
+pre.sourceCode span.Alert { color: red; font-weight: bold; }
+pre.sourceCode span.Function { color: #f9d781; }
+pre.sourceCode span.RegionMarker { }
+pre.sourceCode span.Error { color: red; font-weight: bold; }
diff --git a/examples/hakyll/examples/brochure.zip b/examples/hakyll/examples/brochure.zip
new file mode 100644
index 0000000..cdd19cc
--- /dev/null
+++ b/examples/hakyll/examples/brochure.zip
diff --git a/examples/hakyll/hakyll.hs b/examples/hakyll/hakyll.hs
new file mode 100644
index 0000000..b8e9962
--- /dev/null
+++ b/examples/hakyll/hakyll.hs
@@ -0,0 +1,19 @@
+import Text.Hakyll
+import Text.Hakyll.Render
+import Text.Hakyll.Renderables
+import Text.Hakyll.File
+
+import Control.Monad(mapM_)
+
+main = hakyll $ do
+    directory css "css"
+    directory static "images"
+    directory static "examples"
+
+    mapM_ render' [ "about.markdown"
+                  , "index.markdown"
+                  , "tutorial1.markdown"
+                  , "tutorial2.markdown"
+                  ]
+
+    where render' = renderChain ["templates/default.html"] . createPagePath
diff --git a/examples/hakyll/images/lambda.png b/examples/hakyll/images/lambda.png
new file mode 100644
index 0000000..fbf34a8
--- /dev/null
+++ b/examples/hakyll/images/lambda.png
diff --git a/examples/hakyll/index.markdown b/examples/hakyll/index.markdown
new file mode 100644
index 0000000..b8720d9
--- /dev/null
+++ b/examples/hakyll/index.markdown
@@ -0,0 +1,29 @@
+---
+title: Home
+---
+
+## Overview
+
+Hakyll is a [Haskell](http://haskell.org) library for generating static sites.
+It is written in a very configurable way and uses an
+[xmonad](http://xmonad.org)-like DSL for configuration.
+
+## Why static site generators?
+
+- Static sites are extremely fast.
+- You don't have to worry about security issues.
+
+## Features of Hakyll
+
+- Integration with [pandoc](http://johnmacfarlane.net/pandoc/) gives us markdown
+  and TeX support, including syntax highlighting and other goodies.
+- An easy templating system.
+- Hakyll also features a simple http server for previewing your site.
+
+## Getting Started
+
+You can get the latest version from hackage using `cabal install hakyll`. A
+look in the [tutorial](tutorial1.html) is highly recommended. There are a few
+examples available in
+[the github repo](http://github.com/jaspervdj/Hakyll/tree/master/examples/),
+including this site.
diff --git a/examples/hakyll/templates/default.html b/examples/hakyll/templates/default.html
new file mode 100644
index 0000000..2dec2ea
--- /dev/null
+++ b/examples/hakyll/templates/default.html
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+    <head>
+        <title>Hakyll - $title</title>
+
+        <!-- Stylesheets. -->
+        <link rel="stylesheet" type="text/css" href="css/default.css" />
+        <link rel="stylesheet" type="text/css" href="css/syntax.css" />
+
+        <!-- Metadata. -->
+        <meta name="keywords" content="hakyll,static site generator,static,site,generator,haskell"/>
+        <meta name="description" content="Hakyll - A Static Site Generator in Haskell."/>
+    </head>
+    <body>
+        <div id="main">
+            <div id="header">
+                <img src="images/lambda.png" alt="lambda" />
+                <h1>Hakyll - $title</h1>
+            </div>
+            <!-- Sidebar. -->
+            <div id="sidebar">
+                <h2>Navigation</h2>
+                <div id="navigation">
+                    <a href="index.html">home</a>
+                    <a href="about.html">about</a>
+                    <a href="tutorial1.html">tutorial I</a>
+                    <a href="tutorial2.html">tutorial II</a>
+                </div>
+            </div>
+
+            <div id="content">
+                $body
+            </div>
+
+            <div id="footer">
+                Site proudly generated by <a href="http://github.com/jaspervdj/hakyll">hakyll</a>.
+                Hakyll and this site were written by <a href="http://jaspervdj.be/">Jasper Van der Jeugt</a>.
+            </div>
+        </div>
+    </body>
+
+</html>
diff --git a/examples/hakyll/tutorial1.markdown b/examples/hakyll/tutorial1.markdown
new file mode 100644
index 0000000..2e4dcd2
--- /dev/null
+++ b/examples/hakyll/tutorial1.markdown
@@ -0,0 +1,202 @@
+---
+title: Tutorial (Part I)
+---
+
+## Getting started
+
+First, make sure you have Hakyll installed. The recommended way to do this is
+through [hackage](http://hackage.haskell.org/) using
+[cabal-install](http://www.haskell.org/haskellwiki/Cabal-Install). This
+tutorial also assumes you have a basic knowledge of Haskell.
+
+~~~~~
+[jasper@alice ~]$ cabal install hakyll
+~~~~~
+
+## Building a simple static site
+
+As an example to get started with, we're going to develop a so called
+"Brochure Site" for an imaginary company. The first step is to create
+a directory for our new site.
+
+~~~~~
+[jasper@alice Sites]$ mkdir brochure
+[jasper@alice Sites]$ cd brochure/
+[jasper@alice brochure]$
+~~~~~
+
+I have a [zip file](examples/brochure.zip) with the files we need for this
+tutorial available. Please unzip it in the brochure directory we just created.
+We'll first have a look at what we're going to create (because we're curious
+and all that).
+
+~~~~~
+[jasper@alice brochure]$ ghc --make hakyll.hs 
+[1 of 1] Compiling Main             ( hakyll.hs, hakyll.o )
+Linking hakyll ...
+[jasper@alice brochure]$ ./hakyll preview
+Generating...
+Starting hakyll server on port 8000...
+~~~~~
+
+If you now point your browser at [localhost:8000](http://localhost:8000/) you
+should see our simple brochure site.
+
+## hakyll.hs
+
+The main configuration file of a Hakyll site is traditionally called
+`hakyll.hs`. It is nothing special, just a small Haskell program. There is no
+magic going on.
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+main = hakyll $ do
+    putStrLn "I'm in your computer, generating your site!"
+~~~~~
+
+Note how we wrap everyting in the `hakyll` function. This is useful because
+it will generate a very nice main function.
+
+## Pages
+
+An important concept in Hakyll is Pages. Pages are text files that can be
+written in markdown, html or TeX. Furthermore, they can also contain some
+metadata. The metadata is placed in the file header and surrouded by `---`
+lines. Each line should contain a `key: value` pair. Let's have a look at the
+`about.markdown` page.
+
+~~~~~{.markdown}
+---
+title: About
+---
+Nullam imperdiet sodales orci vitae molestie.
+Nunc quam orci, pharetra a rhoncus vitae,
+eleifend id felis. Suspendisse potenti...
+~~~~~
+
+This contains one `key: value` pair, namely `title: About`. The rest of the
+file is treated as markdown by pandoc. If you want to know more about
+markdown, I think [this](http://daringfireball.net/projects/markdown/syntax)
+is a pretty good page.
+
+## Templates
+
+Another concept are the so-called templates. Templates are text files (usually
+html files) containing a number of keys. The syntax for these keys is
+`$identifier`. Our example site contains one template, namely
+`templates/default.html`. Let's have a better look at that.
+
+~~~~~{.html}
+<html>
+  <head>
+    <title>MyAweSomeCompany - $title</title>
+    <link rel="stylesheet" type="text/css"
+          href="css/default.css" />
+  </head>
+  <body>
+    <h1>MyAweSomeCompany - $title</h1>
+    <div id="navigation">
+      <a href="index.html">Home</a>
+      <a href="about.html">About</a>
+      <a href="products.html">Products</a>
+    </div>
+
+    $body
+  </body>
+</html>
+~~~~~
+
+We can see how our `Page` would fit in. When we render the page we saw using
+this template, `$title` would be replaced by `About`, and `$body` would be
+replaced by the body of the about page. `body` is the traditional name for the
+body of any page - that is the convention in Hakyll. Also note that in this
+case, `$body` would be replaced by a chunk of html - the result of the
+markdown-to-html conversion.
+
+## Putting it all together
+
+Now, we'll render the page using the `renderChain` function. This function
+takes a list of templates and a renderable object. In our case, we only have
+one template, and our renderable object is simply a `PagePath`.
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+import Text.Render (renderChain)
+import Text.Renderables (createPagePath)
+main = hakyll $ do
+    renderChain ["templates/default.html"]
+        (createPagePath "about.markdown")
+~~~~~
+
+Or, to render all our three pages:
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+import Text.Render (renderChain)
+import Text.Renderables (createPagePath)
+main = hakyll $ do
+    render "about.markdown"
+    render "index.markdown"
+    render "products.markdown"
+    where render = renderChain ["templates/default.html"]
+                 . createPagePath
+~~~~~
+
+This will create the following files:
+
+~~~~~
+_site/about.html
+_site/index.html
+_site/products.html
+~~~~~
+
+## CSS, images and other static files
+
+Now, we also have a css file we would like to have in the `_site` directory.
+Static files can be rendered using the `static` function in Hakyll. We could
+use:
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+import Text.Render (static)
+main = hakyll $ do
+    static "css/default.css"
+~~~~~
+
+This would work, but let's not forget that Hakyll also has css compression. If
+we want to use that, we would use `css` instead of `static`.
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+import Text.Render (css)
+main = hakyll $ do
+    css "css/default.css"
+~~~~~
+
+If we were to create another css file, we would have to add a line to our
+`hakyll.hs` configuration file. This is pretty stupid, because the whole
+directory `css` contains only css files. That's why Hakyll has a `directory`
+function, which will execute a given function on an entire directory. So,
+our example would become:
+
+~~~~~{.haskell}
+import Text.Hakyll (hakyll)
+import Text.Render (css)
+import Text.File (directory)
+main = hakyll $ do
+    directory css "css"
+~~~~~
+
+## Deploying
+
+To setup your site, simply copy the contents of `_site` to your hosting provider
+using your favorite piece of software.
+
+## That's it!
+
+Now you should fully understand our brochure site example. If you still have
+questions, feel free to ask them on the
+[google discussion group](http://groups.google.com/group/hakyll).
+
+If you feel comfortable with the basics, here is a next tutorial:
+[building a simple blog](tutorial2.html).
diff --git a/examples/hakyll/tutorial2.markdown b/examples/hakyll/tutorial2.markdown
new file mode 100644
index 0000000..e3dbb47
--- /dev/null
+++ b/examples/hakyll/tutorial2.markdown
@@ -0,0 +1,7 @@
+---
+title: Tutorial (Part II)
+---
+
+## Under construction
+
+Coming soon.