diff options
Diffstat (limited to 'examples')
22 files changed, 340 insertions, 6 deletions
diff --git a/examples/hakyll/css/default.css b/examples/hakyll/css/default.css index 2c0e9ab..af75d49 100644 --- a/examples/hakyll/css/default.css +++ b/examples/hakyll/css/default.css @@ -85,8 +85,8 @@ div.column p { ul { list-style-type: square; - list-style-position: inside; - padding-left: 0px; + padding-left: 1em; + margin-left: 1em; } code { @@ -100,4 +100,5 @@ pre code { background-color: rgb(50, 50, 50); color: white; padding: 8px; + margin-bottom: 2em; } diff --git a/examples/hakyll/examples/rssblog.zip b/examples/hakyll/examples/rssblog.zip Binary files differnew file mode 100644 index 0000000..c2d9ab1 --- /dev/null +++ b/examples/hakyll/examples/rssblog.zip diff --git a/examples/hakyll/hakyll.hs b/examples/hakyll/hakyll.hs index b8e9962..66febbe 100644 --- a/examples/hakyll/hakyll.hs +++ b/examples/hakyll/hakyll.hs @@ -12,8 +12,10 @@ main = hakyll $ do mapM_ render' [ "about.markdown" , "index.markdown" + , "tutorials.markdown" , "tutorial1.markdown" , "tutorial2.markdown" + , "tutorial3.markdown" ] where render' = renderChain ["templates/default.html"] . createPagePath diff --git a/examples/hakyll/index.markdown b/examples/hakyll/index.markdown index b8720d9..229f61a 100644 --- a/examples/hakyll/index.markdown +++ b/examples/hakyll/index.markdown @@ -22,8 +22,9 @@ It is written in a very configurable way and uses an ## 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 +You can get the latest version from hackage using `cabal install hakyll`. I +have written a few [tutorials](tutorials.html), and reading them is highly +recommended if you want to get started with hakyll. Also, 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 index 2dec2ea..bb6918f 100644 --- a/examples/hakyll/templates/default.html +++ b/examples/hakyll/templates/default.html @@ -25,8 +25,7 @@ <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> + <a href="tutorials.html">tutorials</a> </div> </div> diff --git a/examples/hakyll/tutorial2.markdown b/examples/hakyll/tutorial2.markdown index 4e00da3..be8fcca 100644 --- a/examples/hakyll/tutorial2.markdown +++ b/examples/hakyll/tutorial2.markdown @@ -159,3 +159,6 @@ Note that the `index.html` in the `renderChain` list is also a template. If you have any more questions, feel free to ask them on the [google discussion group](http://groups.google.com/group/hakyll). + +There is a [next tutorial](tutorial3.html), explaining how to add an RSS feed +to our sample blog. diff --git a/examples/hakyll/tutorial3.markdown b/examples/hakyll/tutorial3.markdown new file mode 100644 index 0000000..0a2a1ff --- /dev/null +++ b/examples/hakyll/tutorial3.markdown @@ -0,0 +1,123 @@ +--- +title: Tutorial (Part III) +--- + +## Adding RSS to our simple blog + +In this tutorial, we're going to add an RSS feed to the blog we wrote in +[the previous tutorial](tutorial2.html). Here is a +[zip file containing the source](examples/rssblog.zip). + +An RSS feed looks like this: + +~~~~~{.xml} +<?xml version="1.0" ?> +<rss version="2.0"> + <channel> + <title>The SimpleBlog</title> + <link>http://example.com/</link> + <description>Simple blog in hakyll</description> + <item> + <title>Title goes here</title> + <link>http://example.com/post.html</link> + <description> + A description is optional. + </description> + </item> + </channel> +</rss> +~~~~~ + +Note that, obviously, there can be more than one item. We're going to use a +template to render this. This is where `templates/rss.xml` comes in: + +~~~~~{.xml} +<?xml version="1.0" ?> +<rss version="2.0"> + <channel> + <title>The SimpleBlog</title> + <link>http://jaspervdj.be/</link> + <description>Simple blog in hakyll</description> + $items + </channel> +</rss> +~~~~~ + +We thus render our feed with the following code (no, I didn't define `rssPage` +yet - I'm going to work from bottom to top here, it's easier to explain it +that way). + +~~~~~{.haskell} +renderChain ["templates/rss.xml"] rssPage +~~~~~ + +This, as you can see, is a regular render chain, once again. We need make a +`Renderable` that "fills in" the `$items` identifier. We're going to do this +using a [custom page](tutorial2.html#custom-pages). + +## Custom pages again + +Note that we do not have to include all posts in the rss feed - only a few +recent ones. We'll settle on the latest three here. + +We want to render every post using the following template, +`templates/rssitem.xml`: + +~~~~~{.haskell} +<item> + <title>$title</title> + <link>http://example.com/$url</link> + <description>$title by $author</description> +</item> +~~~~~ + +Since we build on the previous example, we still have our `renderablePosts` +list. We'll be using it again: + +~~~~~{.haskell} +let recentRSSItems = renderAndConcat "templates/rssitem.xml" + (take 3 renderablePosts) +~~~~~ + +We're using the `renderAndConcat` function again. Note that because of +hakyll/haskell laziness, this action isn't executed directly, and this helps +dependency handling. + +Now, the `rssPage` page. As you might remember, we use the `createCustomPage` +function to create a custom page. We first give the destination url, then a +list of dependencies, and then a list of `(key, value)` pairs. + +~~~~~{.haskell} +let rssPage = createCustomPage + "rss.xml" + ("templates/postitem.html" : take 3 postPaths) + [("items", Right recentRSSItems)] +~~~~~ + +## Adding a link to the feed + +According to the w3 organization, +[you should add \<link\> tags](http://www.w3.org/QA/Tips/use-links) to your +documents, so we'll do this. In `templates/default.html`: + +~~~~~~{.html} +<head> + <title>SimpleBlog - $title</title> + <link rel="stylesheet" type="text/css" href="/css/default.css" /> + <link rel="alternate" + type="application/rss+xml" + title="SimpleBlog" + href="http://example.com/rss.xml" /> +</head> +~~~~~~ + +This makes most browsers see the rss feed, and show it in the address bar. +If you want, you can also add a pretty button to your blog linking to +`rss.xml`. + +## That's it! + +Yep, that's it. Feel free to play with the source code in +[the zip file](examples/rssblog.zip) and extend the blog further. As always, +all questions are welcome on the +[google discussion group](http://groups.google.com/group/hakyll). diff --git a/examples/hakyll/tutorials.markdown b/examples/hakyll/tutorials.markdown new file mode 100644 index 0000000..fa56346 --- /dev/null +++ b/examples/hakyll/tutorials.markdown @@ -0,0 +1,12 @@ +--- +title: Tutorials +--- + +## Tutorials about hakyll + +Here is a list of tutorials I've written about hakyll: + +- [Tutorial 1](tutorial1.html) explains how to create a simple brochure site. +- [Tutorial 2](tutorial2.html) creates a simple blog. +- [Tutorial 3](tutorial3.html) adds an RSS feed to the blog from the previous + tutorial. diff --git a/examples/rssblog/css/default.css b/examples/rssblog/css/default.css new file mode 100644 index 0000000..9ed2b01 --- /dev/null +++ b/examples/rssblog/css/default.css @@ -0,0 +1,17 @@ +body { + width: 600px; + margin: 0px auto 0px auto; +} + +div#navigation { + text-align: center; + border-bottom: 4px solid black; +} + +div#navigation a { + color: white; + text-decoration: none; + background-color: black; + padding: 3px 10px 3px 10px; + margin: 0px 10px 0px 10px; +} diff --git a/examples/rssblog/hakyll.hs b/examples/rssblog/hakyll.hs new file mode 100644 index 0000000..7ed1b8e --- /dev/null +++ b/examples/rssblog/hakyll.hs @@ -0,0 +1,34 @@ +module Main where + +import Text.Hakyll (hakyll) +import Text.Hakyll.Render (renderAndConcat, renderChain, css) +import Text.Hakyll.File (getRecursiveContents, directory) +import Text.Hakyll.Renderables (createPagePath, createCustomPage) +import Data.List (sort) +import Control.Monad (mapM_, liftM) +import Data.Either (Either(..)) + +main = hakyll $ do + -- Static directory. + directory css "css" + + -- Find all post paths. + postPaths <- liftM (reverse . sort) $ getRecursiveContents "posts" + let renderablePosts = map createPagePath postPaths + + -- Render all posts list. + let postItems = renderAndConcat "templates/postitem.html" $ renderablePosts + renderChain ["posts.html", "templates/default.html"] $ + createCustomPage "posts.html" ("templates/postitem.html" : postPaths) + [("title", Left "All posts"), ("posts", Right postItems)] + + -- Render all posts. + putStrLn "Generating posts..." + mapM_ (renderChain ["templates/post.html", "templates/default.html"]) renderablePosts + + -- Render rss feed + let recentRSSItems = renderAndConcat "templates/rssitem.xml" $ take 3 renderablePosts + let rssPage = createCustomPage "rss.xml" + ("templates/postitem.html" : take 3 postPaths) + [("items", Right recentRSSItems)] + renderChain ["templates/rss.xml"] rssPage diff --git a/examples/rssblog/index.html b/examples/rssblog/index.html new file mode 100644 index 0000000..e628bd6 --- /dev/null +++ b/examples/rssblog/index.html @@ -0,0 +1,14 @@ +<div id="posts"> + <h1>Recent posts</h1> + <ul> + $posts + </ul> + <a href="/posts.html">All posts...</a> +</div> + +<div class="about"> + <h1>About</h1> + <p> + This is a sample blog for educational purposes. + </p> +</div> diff --git a/examples/rssblog/posts.html b/examples/rssblog/posts.html new file mode 100644 index 0000000..bc1741b --- /dev/null +++ b/examples/rssblog/posts.html @@ -0,0 +1,4 @@ +<h1>All posts</h1> +<ul> + $posts +</ul> diff --git a/examples/rssblog/posts/2009-11-05-a-first-post.markdown b/examples/rssblog/posts/2009-11-05-a-first-post.markdown new file mode 100644 index 0000000..56b0405 --- /dev/null +++ b/examples/rssblog/posts/2009-11-05-a-first-post.markdown @@ -0,0 +1,21 @@ +--- +title: A first post +author: Julius Caesar +date: November 5, 2009 +--- +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium leo +adipiscing lectus iaculis lobortis. Vivamus scelerisque velit dignissim metus +gravida sit amet dapibus ligula tempor. Quisque sit amet viverra nunc. +Suspendisse cursus elementum ante, ut venenatis nisi dictum eu. Nulla diam +ligula, eleifend in varius quis, malesuada a nibh. Vivamus consequat +pellentesque erat non blandit. Nunc sit amet eros vel massa semper ullamcorper +quis iaculis magna. Vestibulum ullamcorper urna sit amet est elementum +pulvinar. Vestibulum consequat lacus ac quam hendrerit tincidunt. Praesent +bibendum vehicula diam, nec sagittis risus tempus a. Nulla quis odio sit amet +odio vehicula cursus ut id odio. Curabitur semper magna euismod magna mollis +venenatis. Nunc eget eleifend velit. Mauris sed posuere sem. Fusce id nunc +nisi, a aliquam orci. Suspendisse laoreet justo non enim laoreet eget consequat +velit porttitor. Aenean faucibus sodales metus at tincidunt. Donec vestibulum +leo pulvinar erat auctor ac ultrices massa euismod. Phasellus blandit cursus +magna, eget lacinia mi lobortis sed. Suspendisse ultricies enim ligula, vel +scelerisque mauris. diff --git a/examples/rssblog/posts/2009-11-10-another-post.markdown b/examples/rssblog/posts/2009-11-10-another-post.markdown new file mode 100644 index 0000000..69b64c9 --- /dev/null +++ b/examples/rssblog/posts/2009-11-10-another-post.markdown @@ -0,0 +1,15 @@ +--- +title: Another post +author: Marcus Tullius Cicero +date: November 10, 2009 +--- +Vestibulum in ultrices urna. Etiam tempor enim dui, nec malesuada elit. Donec +tempor ligula et quam volutpat quis fermentum eros congue. Sed ut pulvinar sem. +Sed aliquam ipsum id purus sollicitudin vulputate. Cras et mauris dui, vel +hendrerit leo. Ut metus ipsum, fermentum ac malesuada id, tempus pharetra quam. +Donec diam felis, consequat ac scelerisque cursus, gravida non lectus. Sed +faucibus elit dapibus diam elementum id varius nisi tristique. Proin consequat +faucibus neque in aliquam. Vestibulum ligula odio, pulvinar vel hendrerit +vitae, egestas ut nibh. Praesent ut velit elit, in consequat dolor. Praesent +sem enim, commodo in gravida sed, adipiscing vel eros. Lorem ipsum dolor sit +amet, consectetur adipiscing elit. Proin non aliquam nunc. diff --git a/examples/rssblog/posts/2009-11-28-a-third-post.markdown b/examples/rssblog/posts/2009-11-28-a-third-post.markdown new file mode 100644 index 0000000..76b0606 --- /dev/null +++ b/examples/rssblog/posts/2009-11-28-a-third-post.markdown @@ -0,0 +1,19 @@ +--- +title: A third post +author: Publius Ovidius Naso +date: November 28, 2009 +--- +Pellentesque tempor blandit elit, vel ultricies arcu congue egestas. Fusce +vitae rutrum nisl. Fusce id mauris libero, a venenatis tellus. Fusce iaculis, +lorem et ornare molestie, mauris risus mollis nisi, non fermentum lacus lacus +sit amet ipsum. Praesent lobortis ullamcorper dolor, eget convallis ligula +dignissim a. Suspendisse nulla nisi, congue et pharetra vel, convallis non +libero. Ut a nulla ipsum. Phasellus cursus velit id neque viverra ut +pellentesque justo posuere. Curabitur laoreet enim et velit tempor consectetur. +Donec eu pretium urna. Suspendisse vitae nisi at metus vestibulum aliquam in +sit amet nisl. Donec convallis lacinia odio, vestibulum molestie nunc feugiat +a. Suspendisse vehicula, sapien id aliquet consectetur, sem sapien ullamcorper +arcu, scelerisque porttitor elit ipsum posuere ligula. Nulla at velit eu metus +tincidunt auctor ut sit amet enim. Donec placerat dapibus nisi id facilisis. +Maecenas pellentesque pulvinar auctor. Curabitur gravida quam sit amet purus +consectetur blandit. diff --git a/examples/rssblog/posts/2009-12-04-this-blog-aint-dead.markdown b/examples/rssblog/posts/2009-12-04-this-blog-aint-dead.markdown new file mode 100644 index 0000000..015ce8d --- /dev/null +++ b/examples/rssblog/posts/2009-12-04-this-blog-aint-dead.markdown @@ -0,0 +1,12 @@ +--- +title: This blog ain't dead +author: Marcus Antonius +date: December 4, 2009 +--- +Etiam non felis aliquet tellus dictum vestibulum. Aliquam accumsan mauris non +lacus ultricies nec lacinia enim rhoncus. Curabitur vel tortor massa, elementum +tincidunt elit. Maecenas venenatis luctus arcu ut ullamcorper. Donec interdum +dolor eu enim tristique vel vehicula risus mollis. Nunc nec tortor quam. Nulla +a mauris arcu. Phasellus venenatis tortor vel odio tincidunt consequat. Integer +venenatis nibh vitae lectus laoreet eu feugiat nunc pretium. Integer nec turpis +metus, in fermentum lorem. diff --git a/examples/rssblog/posts/2009-12-23-almost-christmas.markdown b/examples/rssblog/posts/2009-12-23-almost-christmas.markdown new file mode 100644 index 0000000..cf24399 --- /dev/null +++ b/examples/rssblog/posts/2009-12-23-almost-christmas.markdown @@ -0,0 +1,13 @@ +--- +title: Almost Christmas! +author: Publius Vergilius Maro +date: December 23, 2009 +--- +Morbi tincidunt eleifend ante, eu gravida ante rutrum vel. Nunc bibendum nulla +tellus, eget egestas sapien. Nam rhoncus interdum libero, eget congue orci +imperdiet eu. Quisque pellentesque fringilla urna, ac venenatis ante ultricies +et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames +ac turpis egestas. Mauris eleifend sagittis ultrices. Quisque ultrices accumsan +nisl, sed pellentesque metus porta vitae. Nulla facilisi. In et nibh tincidunt +mi volutpat pellentesque vitae nec sapien. Integer massa ipsum, pellentesque in +elementum at, cursus sit amet diam. diff --git a/examples/rssblog/templates/default.html b/examples/rssblog/templates/default.html new file mode 100644 index 0000000..21429fa --- /dev/null +++ b/examples/rssblog/templates/default.html @@ -0,0 +1,22 @@ +<?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>SimpleBlog - $title</title> + <link rel="stylesheet" type="text/css" href="/css/default.css" /> + <link rel="alternate" + type="application/rss+xml" + title="SimpleBlog" + href="http://example.com/rss.xml" /> + </head> + <body> + <h1>SimpleBlog - $title</h1> + <div id="navigation"> + <a href="/index.html">Home</a> + <a href="/posts.html">All posts</a> + </div> + + $body + </body> +</html> diff --git a/examples/rssblog/templates/post.html b/examples/rssblog/templates/post.html new file mode 100644 index 0000000..46797a4 --- /dev/null +++ b/examples/rssblog/templates/post.html @@ -0,0 +1,4 @@ +<h1>$title</h1> +by <em>$author</em> on <strong>$date</strong> + +$body diff --git a/examples/rssblog/templates/postitem.html b/examples/rssblog/templates/postitem.html new file mode 100644 index 0000000..a14687b --- /dev/null +++ b/examples/rssblog/templates/postitem.html @@ -0,0 +1,4 @@ +<li> + <a href="/$url">$title</a> + - <em>$date</em> - by <em>$author</em> +</li> diff --git a/examples/rssblog/templates/rss.xml b/examples/rssblog/templates/rss.xml new file mode 100644 index 0000000..be918af --- /dev/null +++ b/examples/rssblog/templates/rss.xml @@ -0,0 +1,9 @@ +<?xml version="1.0" ?> +<rss version="2.0"> + <channel> + <title>The SimpleBlog</title> + <link>http://example.com</link> + <description>Simple blog in hakyll</description> + $items + </channel> +</rss> diff --git a/examples/rssblog/templates/rssitem.xml b/examples/rssblog/templates/rssitem.xml new file mode 100644 index 0000000..48573d2 --- /dev/null +++ b/examples/rssblog/templates/rssitem.xml @@ -0,0 +1,5 @@ +<item> + <title>$title</title> + <link>http://example.com/$url</link> + <description>$title by $author</description> +</item> |