Redo blog index page

src/blog/index.html.pm

@@ -1,8 +1,10 @@
 #lang pollen
 
-◊(require pollen/pagetree
+◊(require pollen/core
+          pollen/pagetree
           pollen/file
-          racket/path)
+          racket/path
+	  racket/list)
 
 ◊(define here-path (select-from-metas 'here-path metas))
 ◊(define ptree (get-pagetree (build-path
@@ -14,13 +16,12 @@
 ◊(define (get-posts)
    (children 'blog))
 
-◊for/splice[((post (get-posts)))]{
-    ◊let[((src (get-source (path->string (path->complete-path (symbol->string post))))))]{
-        ◊div{
-	    ◊title{◊(select 'h1 src)}
-	    ◊published-date[(select-from-metas 'published src)]
-	    ◊excerpt[post]
-	    ◊link[#:href (symbol->string post)]{Read more...}
-	}
-    }
-}
+◊(define (render-post post)
+   (let ((src (get-source (path->string (path->complete-path (symbol->string post))))))
+     (div (title (select 'h1 src))
+          (published-date (select-from-metas 'published src))
+          (excerpt post)
+          (link "Read more..." #:href (symbol->string post)))))
+
+◊(let ((rendered-posts (add-between (map render-post (get-posts)) (divider))))
+   `(div ,@rendered-posts))

src/index.ptree

@@ -5,5 +5,6 @@ index.html
 ◊`(blog
    ,@(map string->symbol
 	  (remove "index.html"
-		  (filter (lambda (p) (string-suffix? p ".html"))
-			  (map path->string (directory-list "blog"))))))
+		  (map (lambda (s) (substring s 0 (- (string-length s) 3)))
+		       (filter (lambda (p) (string-suffix? p ".html.pm"))
+			       (map path->string (directory-list "blog")))))))

src/stylesheet.css.pp

@@ -9,6 +9,7 @@
 ◊(define link-hover-color "midnightblue")
 ◊(define link-visited-color "purple")
 ◊(define nav-hover-color "#707070")
+◊(define divider-color "#EFEFEF")
 
 body {
     height: 100%;
@@ -42,6 +43,18 @@ a {
     text-decoration: none;
 }
 
+img {
+    width: 100%;
+}
+
+hr {
+    background-color: ◊|divider-color|;
+    border-color: ◊|divider-color|;
+    color: ◊|divider-color|;
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+}
+
 a:visited {
     color: ◊|link-visited-color|;
 }