From ac8e89cc1904d25e118c41b441bbb4008583b78a Mon Sep 17 00:00:00 2001 From: Jasper Van der Jeugt Date: Sat, 2 Jan 2010 19:57:12 +0100 Subject: Added another tutorial. --- examples/hakyll/css/default.css | 5 +- examples/hakyll/examples/rssblog.zip | Bin 0 -> 6493 bytes examples/hakyll/hakyll.hs | 2 + examples/hakyll/index.markdown | 5 +- examples/hakyll/templates/default.html | 3 +- examples/hakyll/tutorial2.markdown | 3 + examples/hakyll/tutorial3.markdown | 123 +++++++++++++++++++++ examples/hakyll/tutorials.markdown | 12 ++ examples/rssblog/css/default.css | 17 +++ examples/rssblog/hakyll.hs | 34 ++++++ examples/rssblog/index.html | 14 +++ examples/rssblog/posts.html | 4 + .../rssblog/posts/2009-11-05-a-first-post.markdown | 21 ++++ .../rssblog/posts/2009-11-10-another-post.markdown | 15 +++ .../rssblog/posts/2009-11-28-a-third-post.markdown | 19 ++++ .../posts/2009-12-04-this-blog-aint-dead.markdown | 12 ++ .../posts/2009-12-23-almost-christmas.markdown | 13 +++ examples/rssblog/templates/default.html | 22 ++++ examples/rssblog/templates/post.html | 4 + examples/rssblog/templates/postitem.html | 4 + examples/rssblog/templates/rss.xml | 9 ++ examples/rssblog/templates/rssitem.xml | 5 + 22 files changed, 340 insertions(+), 6 deletions(-) create mode 100644 examples/hakyll/examples/rssblog.zip create mode 100644 examples/hakyll/tutorial3.markdown create mode 100644 examples/hakyll/tutorials.markdown create mode 100644 examples/rssblog/css/default.css create mode 100644 examples/rssblog/hakyll.hs create mode 100644 examples/rssblog/index.html create mode 100644 examples/rssblog/posts.html create mode 100644 examples/rssblog/posts/2009-11-05-a-first-post.markdown create mode 100644 examples/rssblog/posts/2009-11-10-another-post.markdown create mode 100644 examples/rssblog/posts/2009-11-28-a-third-post.markdown create mode 100644 examples/rssblog/posts/2009-12-04-this-blog-aint-dead.markdown create mode 100644 examples/rssblog/posts/2009-12-23-almost-christmas.markdown create mode 100644 examples/rssblog/templates/default.html create mode 100644 examples/rssblog/templates/post.html create mode 100644 examples/rssblog/templates/postitem.html create mode 100644 examples/rssblog/templates/rss.xml create mode 100644 examples/rssblog/templates/rssitem.xml (limited to 'examples') 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 new file mode 100644 index 0000000..c2d9ab1 Binary files /dev/null and b/examples/hakyll/examples/rssblog.zip differ 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 @@ 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} + + + + The SimpleBlog + http://example.com/ + Simple blog in hakyll + + Title goes here + http://example.com/post.html + + A description is optional. + + + + +~~~~~ + +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} + + + + The SimpleBlog + http://jaspervdj.be/ + Simple blog in hakyll + $items + + +~~~~~ + +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} + + $title + http://example.com/$url + $title by $author + +~~~~~ + +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 \ tags](http://www.w3.org/QA/Tips/use-links) to your +documents, so we'll do this. In `templates/default.html`: + +~~~~~~{.html} + + SimpleBlog - $title + + + +~~~~~~ + +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 @@ +
+

Recent posts

+
    + $posts +
+ All posts... +
+ +
+

About

+

+ This is a sample blog for educational purposes. +

+
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 @@ +

All posts

+ 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 @@ + + + + + SimpleBlog - $title + + + + +

SimpleBlog - $title

+ + + $body + + 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 @@ +

$title

+by $author on $date + +$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 @@ +
  • + $title + - $date - by $author +
    • 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 @@ + + + + The SimpleBlog + http://example.com + Simple blog in hakyll + $items + + 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 @@ + + $title + http://example.com/$url + $title by $author + -- cgit v1.2.3