Merge branch 'SLING-8588'
diff --git a/src/main/jbake/assets/res/css/site.css b/src/main/jbake/assets/res/css/site.css
index 1ad1354..bdf41af 100644
--- a/src/main/jbake/assets/res/css/site.css
+++ b/src/main/jbake/assets/res/css/site.css
@@ -1,206 +1,65 @@
 body {
-    background-color: #ffffff;
+    background-color: #fcfcfc;
     color: #3b3b3b;
-    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-size: 10pt;
-    line-height: 140%
-}
-
-h1,h2,h3,h4,h5,h6 {
-    font-weight: normal;
-    color: #000000;
-    line-height: 100%;
-}
-
-.tocHeading {
-	font-size:120%;
-	font-weight:bold;
-}
-
-h1 {
-    font-size: 200%;
-    font-weight: bold;
-    border-bottom: solid #EEE 1px;
-    border-top: solid #EEE 1px;
-    padding-top:.2em;
-    padding-bottom:.2em;
-}
-
-h2 {
-    font-size: 200%;
-    margin-top: 1em;
-    font-weight: normal;
-    border-top: solid #e0e0e0 1px;
-    padding-top: 0.45em;
 }
 
 h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited {
-	color:black;
+	color:#3b3b3b;
 	text-decoration:none;
 }
 
-h3 {
-    font-size: 150%
-}
-
-h4 {
-    font-size: 140%
-}
-
-h5 {
-    font-size: 130%
-}
-
-h6 {
-    font-size: 120%
-}
-
-a {
-    color: #1980af
-}
-
-a:visited {
-    color: #1980af
-}
-
 a:hover {
     color: #1faae9
 }
 
-img {
-    max-width: 100%;
-    border: solid 1px #EEE;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    padding: 0.5em
-}
-
-ul {
-    margin-block-end: 0em;
-    margin-inline-end: 0em;
-}
 
 .title {
-    position: absolute;
-    left: 1px;
-    right: 1px;
-    top: 25px;
-    height: 81px;
-    background:
-        url(https://sling.apache.org/site/media.data/gradient.png)
-        repeat-x;
-    background-position: bottom;
+    border-bottom: solid #EEE 1px;
+    border-top: solid #EEE 1px;
+    padding-top:.2em;
+    padding-bottom:.2em;
 }
 
-.title img {
-    width: auto;
-    border: none;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    padding: 0px;    
-}
 
 .logo {
-    position: absolute;
     width: 15em;
     height: 81px;
-    text-align: center;
 }
 
 .logo img {
     height: 63px;
 }
 
-.header {
-    text-align: right;
-    margin-right: 20pt;
-}
 
-.menu {
+.sidemenu {
     border-top: 10px solid #f9bb00;
-    position: absolute;
-    top: 107px;
-    left: 1px;
-    width: 15em;
-    bottom: 0px;
-    padding: 0px;
     background-color: #fcfcfc
 }
 
-.menu ul,.menu p {
-    background-color: #fdf5d9;
-    list-style: none;
-    padding-left: 1em;
-    margin-top: 0px; 
-    padding-bottom: .5em;
-    margin-left: 0px;
+.sidemenu ul,.sidemenu p {
     color: #4a4a43
 }
 
-.menu > ul {
-    padding-top: 1em;
-    margin-block-end: 0px;
-    margin-inline-end: 0px;
-}
-
-.menu p {
-    font-size: 90%;
-    margin: 0px;
-    padding: 1px;
-    padding-left: 1em;
-    padding-bottom: 1em;
-}
-
-.menu a {
-    text-decoration: none;
+.sidemenu a {
     color: #4a4a43
 }
 
-.menu img {
-    display: block;
-}
-
 .main {
-    position: absolute;
     border-top: 10px solid #cde0ea;
-    top: 107px;
-    left: 15em;
-    right: 1px;
-    margin-left: 2px;
-    padding-right: 4em;
-    padding-left: 1em;
-    padding-top: 1em;
 }
 
-.preformatted {
-    color: black;
-    background-color: #eeeeee;
-    border: solid 1px black;
-    padding: 0.5em
-}
-
-.preformattedContent pre {
-    margin: 0em
-}
 
 table {
     border-collapse: collapse;
-    margin: 5px;
 }
 
 th {
     background-color: #FDF5D9;
     border: 1px solid #DDD;
-    padding: 3px 4px;
-    text-align: left;
-    font-weight:bold;
-    font-size:90%;
-    padding: 3px 4px;
 }
 
 td {
     border: 1px solid #DDD;
-    padding: 3px 4px;
 }
 
 .note
@@ -273,23 +132,6 @@
     text-align: left;
 }
 
-blockquote {
-    font-style: italic;
-    margin: 0;
-    padding-left: 1em;
-    border-left: 1px solid black;
-}
-
-pre {
-    color: black;
-    background-color: #f0f0f0;
-    border: solid 1px #f5f5f5;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    padding: 0.5em;
-    width: 100%;
-}
-
 .draft {
 	font-size:150%;
 	font-weight:bold;
@@ -297,54 +139,18 @@
     text-align:center;
 }
 
-.footer {
-    padding-top: 1em; 
+.menu-list a {
+    padding: 0em;
 }
 
-.badge {
-    border-radius: 2px;
-    background-color: #EEE;
-    text-align: center;
-    padding-left: 3px;
-    padding-right: 3px;
-	margin-left: 3px;
-	display:inline-block;
+code {
+    color: #000000;
 }
 
-.pagenav {
-    overflow:hidden
-    font-size: 70%;
-    clear:both;
-    padding-bottom:1em;
+.content pre {
+    background-color: #fcfcfc;
 }
 
-.breadcrumb {
-    float:left;
+.content pre code {
+    border: 1px solid #cde0ea;
 }
-
-.breadcrumb a {
-    text-decoration: none;
-}
-
-.breadcrumb a:not(:last-child):after {
-    padding-left: .4em;
-    padding-right: .4em;
-    content : "\BB";
-    color: #000;
-    display:inline-block;
-}
-
-.tags {
-    float:right;
-}
-
-.tags .tag {
-    background-color: #EEE;
-	padding: 0.2em;
-    margin-left: 0.2em;
-	text-decoration: none;
-}
-
-.tags .tag:not(:last-child)  {
-    padding-right:0.5em;
-}
\ No newline at end of file
diff --git a/src/main/jbake/content/documentation/bundles/commons-html-utilities.md b/src/main/jbake/content/documentation/bundles/commons-html-utilities.md
index 24696a2..49bf685 100644
--- a/src/main/jbake/content/documentation/bundles/commons-html-utilities.md
+++ b/src/main/jbake/content/documentation/bundles/commons-html-utilities.md
@@ -4,4 +4,13 @@
 tags=html,commons
 ~~~~~~
 
-The Apache Sling Commons HTML Utilities bundle provides an HTML parser which can be used to parse HTML and either generate a DOM or SAX events out of the HTML. Therefore the parser transforms the HTML into proper XHTML.
+The Apache Sling Commons HTML Utilities bundle provides multiple HTML parsers which can be used to parse HTML and generate a `Document` or events based on the type of Parser used.
+
+== Document Generation
+
+== TagSoup Based Parser
+
+
+
+
+
diff --git a/src/main/jbake/content/index.md b/src/main/jbake/content/index.md
index 33bbf18..fbe994f 100644
--- a/src/main/jbake/content/index.md
+++ b/src/main/jbake/content/index.md
@@ -3,6 +3,7 @@
 status=published
 tags=community
 expandVariables=true
+tableOfContents=false
 ~~~~~~
 
 Apache Sling™ is a ${sling_tagline}.
diff --git a/src/main/jbake/templates/breadcrumbs-brick.tpl b/src/main/jbake/templates/breadcrumbs-brick.tpl
index d66318e..c328167 100644
--- a/src/main/jbake/templates/breadcrumbs-brick.tpl
+++ b/src/main/jbake/templates/breadcrumbs-brick.tpl
@@ -1,7 +1,11 @@
 div(class:"breadcrumb") {
-    U.getSortedParents(content, published_content).each { item ->
-        a (href:"${config.site_contextPath}${item.value.uri}") {
-            yield item.value.title
+    ul() {
+        U.getSortedParents(content, published_content).each { item ->
+            li(){ 
+                a (href:"${config.site_contextPath}${item.value.uri}") {
+                    yield item.value.title
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/main/jbake/templates/header.tpl b/src/main/jbake/templates/header.tpl
index 4695e8a..a876bc2 100644
--- a/src/main/jbake/templates/header.tpl
+++ b/src/main/jbake/templates/header.tpl
@@ -1,9 +1,10 @@
 head {
 	meta("http-equiv":"Content-Type", content:"text/html;charset=UTF-8") newLine()
-	title("${config.blog_title} :: ${content.title}") newLine()
+	title("${config.blog_title} :: ${content.title?:tag}") newLine()
 
 	// For now, try to reproduce the layout of the current website, to be able to compare pages
 	link(rel:"icon", href:"${config.site_contextPath}res/favicon.ico") newLine()
+	link(rel:"stylesheet", href:"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css") newLine()
 	link(rel:"stylesheet", href:"${config.site_contextPath}res/css/site.css") newLine()
 	
 	// highlightjs.org
diff --git a/src/main/jbake/templates/layout/main.tpl b/src/main/jbake/templates/layout/main.tpl
index c100119..6ff626f 100644
--- a/src/main/jbake/templates/layout/main.tpl
+++ b/src/main/jbake/templates/layout/main.tpl
@@ -1,39 +1,45 @@
 yieldUnescaped '<!DOCTYPE html>'
 html(lang:'en'){
-
-	include template: "header.tpl"
-
+    include template: "header.tpl"
     body() {
-        include template: 'logos.tpl'
-        include template: 'menu.tpl'
-
-		div(class:"main") {
-            div(class:"pagenav") {
-                breadcrumbs()
-                newLine()
-                tags()
-                newLine()
+    div(class:"section"){
+        div(class:"level is-marginless") {
+            include template: 'logos.tpl'
+        }
+        div(class:"columns is-gapless") {
+            div(class:"column is-narrow sidemenu") {
+                include template: 'menu.tpl'
             }
-			
-			if(content && content.title) {
-				h1(class:"pagetitle") {
-					yield "${ content.title }"
-				}
-			}
-			
-            if (content && !"false".equals(content.tableOfContents)) {
-			    tableOfContents()
-			    newLine()
-		    }
-			bodyContents()
-			newLine()
+            div(class:"column main") {
+                div(class:"box is-shadowless is-marginless"){
+                    div(class:"level") {
+                        div(class:"pagenav") {
+                            breadcrumbs()
+                        }
+                        tags()
+                    }
 
-            footer(class:"footer") {
-                lastModified()
-                include template: 'footer.tpl'
+                    if( content ) {
+                        if(content.title) {
+                            h1(class:"title") {
+                                yield "${ content.title }"
+                            }
+                        }
+                        if (!"false".equals(content.tableOfContents)) {
+                            tableOfContents()
+                        }
+                        div(class:"content is-marginless"){
+                            bodyContents()
+                        }
+                    }
+                }
             }
-			newLine()
+        }//columns
+        footer(class:"footer") {
+            lastModified()
+            include template: 'footer.tpl'
         }
     }
+    }//body
 }
-newLine()
+
diff --git a/src/main/jbake/templates/logos.tpl b/src/main/jbake/templates/logos.tpl
index 8a22ecf..ba7ac09 100644
--- a/src/main/jbake/templates/logos.tpl
+++ b/src/main/jbake/templates/logos.tpl
@@ -1,4 +1,4 @@
-div(class:"title") {
+
     div(class:"logo") {
         a(href:"${config.site_host}") {
             img(border:"0", alt:"Apache Sling", src:"${config.site_contextPath}res/logos/sling.svg")
@@ -9,4 +9,3 @@
             img(border:"0", alt:"Apache", src:"${config.site_contextPath}res/logos/apache.png")
         }
     }
-}
diff --git a/src/main/jbake/templates/menu.tpl b/src/main/jbake/templates/menu.tpl
index e8b594b..bee9be5 100644
--- a/src/main/jbake/templates/menu.tpl
+++ b/src/main/jbake/templates/menu.tpl
@@ -1,82 +1,98 @@
 // TODO read links from a Markdown or other definition file?
-nav(class:"menu"){
-    
-    ul() {
-        li(){
-            strong("Documentation")
-            ul() {
-                li(){a(href:"${config.site_contextPath}documentation.html", "Overview")}
-                li(){a(href:"${config.site_contextPath}documentation/getting-started.html", "Getting Started")}
-                li(){a(href:"${config.site_contextPath}documentation/the-sling-engine.html", "The Sling Engine")}
-                li(){a(href:"${config.site_contextPath}documentation/development.html", "Development")}
-                li(){a(href:"${config.site_contextPath}documentation/bundles.html", "Bundles")}
-                li(){a(href:"${config.site_contextPath}documentation/tutorials-how-tos.html", "Tutorials &amp; How-Tos")}
-                li(){a(href:"${config.site_contextPath}components/", "Maven Plugins")}
-                li(){a(href:"${config.site_contextPath}documentation/configuration.html", "Configuration")}
+div(class:"container") {
+    nav(class:"menu"){
+        ul(class:"menu-list box is-shadowless is-marginless") {
+            li(){
+                p(class:"menu-label") {
+                    strong("Documentation")
+                }
+                ul() {
+                    li(){a(href:"${config.site_contextPath}documentation.html", "Overview")}
+                    li(){a(href:"${config.site_contextPath}documentation/getting-started.html", "Getting Started")}
+                    li(){a(href:"${config.site_contextPath}documentation/the-sling-engine.html", "The Sling Engine")}
+                    li(){a(href:"${config.site_contextPath}documentation/development.html", "Development")}
+                    li(){a(href:"${config.site_contextPath}documentation/bundles.html", "Bundles")}
+                    li(){a(href:"${config.site_contextPath}documentation/tutorials-how-tos.html", "Tutorials &amp; How-Tos")}
+                    li(){a(href:"${config.site_contextPath}components/", "Maven Plugins")}
+                    li(){a(href:"${config.site_contextPath}documentation/configuration.html", "Configuration")}
+                }
+            }
+            li(){
+                p(class:"menu-label") {
+                    strong("API Docs")
+                }
+                ul() {
+                    li(){a(href:"${config.site_contextPath}apidocs/sling11/index.html", "Sling 11")}
+                    li(){a(href:"${config.site_contextPath}apidocs/sling10/index.html", "Sling 10")}
+                    li(){a(href:"${config.site_contextPath}apidocs/sling9/index.html", "Sling 9")}
+                    li(){a(href:"${config.site_contextPath}documentation/apidocs.html", "All versions")}
+                }
+            }
+            li(){
+                p(class:"menu-label") {
+                    strong("Support")
+                }
+                ul() {
+                    li(){a(href:"https://s.apache.org/sling.wiki", "Wiki")}
+                    li(){a(href:"https://s.apache.org/sling.faq", "FAQ")}
+                    li(){a(href:"${config.site_contextPath}sitemap.html", "Site Map")}
+                }
+            }
+            li(){
+                p(class:"menu-label") {
+                    strong("Project Info")
+                }
+                ul() {
+                    li(){a(href:"${config.site_contextPath}downloads.cgi", "Downloads")}
+                    li(){a(href:"https://www.apache.org/licenses/", "License")}
+                    li(){a(href:"${config.site_contextPath}news.html", "News")}
+                    li(){a(href:"${config.site_contextPath}releases.html", "Releases")}
+                    li(){a(href:"https://issues.apache.org/jira/browse/SLING", "Issue Tracker")}
+                    li(){a(href:"${config.site_contextPath}links.html", "Links")}
+                    li(){a(href:"${config.site_contextPath}contributing.html", "Contributing")}
+                    li(){a(href:"${config.site_contextPath}project-information.html", "Project Information")}
+                    li(){a(href:"${config.site_contextPath}project-information/security.html", "Security")} 
+                }
+            }
+            li(){
+                p(class:"menu-label") {
+                    strong("Source")
+                }
+                ul() {
+                    li(){a(href:"https://github.com/apache/?utf8=%E2%9C%93&q=sling", "GitHub")}
+                    li(){a(href:"https://gitbox.apache.org/repos/asf?s=sling", "Git at Apache")}
+                }
+            }
+            li(){
+                p(class:"menu-label") {
+                    strong("Apache Software<br>Foundation")
+                }
+                ul() {
+                    li(){a(href:"https://www.apache.org/foundation/thanks.html", "Thanks!")}
+                    li(){a(href:"https://www.apache.org/foundation/sponsorship.html", "Become a Sponsor")}
+                    li(){a(href:"https://www.apache.org/foundation/buy_stuff.html", "Buy Stuff")}
+                }
             }
         }
-        li(){
-            strong("API Docs")
-            ul() {
-                li(){a(href:"${config.site_contextPath}apidocs/sling11/index.html", "Sling 11")}
-                li(){a(href:"${config.site_contextPath}apidocs/sling10/index.html", "Sling 10")}
-                li(){a(href:"${config.site_contextPath}apidocs/sling9/index.html", "Sling 9")}
-                li(){a(href:"${config.site_contextPath}documentation/apidocs.html", "All versions")}
-            }
-        }
-        li(){
-            strong("Support")
-            ul() {
-                li(){a(href:"https://s.apache.org/sling.wiki", "Wiki")}
-                li(){a(href:"https://s.apache.org/sling.faq", "FAQ")}
-                li(){a(href:"${config.site_contextPath}sitemap.html", "Site Map")}
-            }
-        }
-        li(){
-            strong("Project Info")
-            ul() {
-                li(){a(href:"${config.site_contextPath}downloads.cgi", "Downloads")}
-                li(){a(href:"https://www.apache.org/licenses/", "License")}
-                li(){a(href:"${config.site_contextPath}news.html", "News")}
-                li(){a(href:"${config.site_contextPath}releases.html", "Releases")}
-                li(){a(href:"https://issues.apache.org/jira/browse/SLING", "Issue Tracker")}
-                li(){a(href:"${config.site_contextPath}links.html", "Links")}
-                li(){a(href:"${config.site_contextPath}contributing.html", "Contributing")}
-                li(){a(href:"${config.site_contextPath}project-information.html", "Project Information")}
-                li(){a(href:"${config.site_contextPath}project-information/security.html", "Security")} 
-            }
-        }
-        li(){
-            strong("Source")
-            ul() {
-                li(){a(href:"https://github.com/apache/?utf8=%E2%9C%93&q=sling", "GitHub")}
-                li(){a(href:"https://gitbox.apache.org/repos/asf?s=sling", "Git at Apache")}
-            }
-        }
-        li(){
-            strong("Apache Software Foundation")
-            ul() {
-                li(){a(href:"https://www.apache.org/foundation/thanks.html", "Thanks!")}
-                li(){a(href:"https://www.apache.org/foundation/sponsorship.html", "Become a Sponsor")}
-                li(){a(href:"https://www.apache.org/foundation/buy_stuff.html", "Buy Stuff")}  
-                li(){a(href:"https://www.apache.org/events/current-event.html") {
+    }
+    div(class:"columns is-centered"){
+        div(class:"column"){
+                a(href:"https://www.apache.org/events/current-event.html", class:"column") {
                     img(
                         border:"0",
                         alt:"Current ASF Events",
                         src:"https://www.apache.org/events/current-event-125x125.png",
                         width:"125"
                     )
-                }}
-                li(){a(href:"https://apache.org/foundation/contributing.html") {
+                }
+                a(href:"https://apache.org/foundation/contributing.html",class:"column") {
                     img(
                         border:"0", 
                         alt:"Support the Apache Software Foundation!", 
                         src:"${config.site_contextPath}res/images/SupportApache-small.png",
                         width:"125"
                     )
-                }}
-            }
+                }
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/src/main/jbake/templates/page.tpl b/src/main/jbake/templates/page.tpl
index 3a6eef4..099e103 100644
--- a/src/main/jbake/templates/page.tpl
+++ b/src/main/jbake/templates/page.tpl
@@ -11,8 +11,8 @@
         },
         bodyContents: contents {
             div(class:"row"){
-                div(class:"small-12 columns"){
-                    section(class:"wrap"){
+                div(){
+                    section(){
                         yieldUnescaped U.processBody(content, config)
                     }
                 }
diff --git a/src/main/jbake/templates/tags.tpl b/src/main/jbake/templates/tags.tpl
index a6c764c..f194da4 100644
--- a/src/main/jbake/templates/tags.tpl
+++ b/src/main/jbake/templates/tags.tpl
@@ -12,16 +12,22 @@
                     }
                 }
             }
-            div(class:"tags"){
-                h2("All tags")
+            
+            h2("All tags")
+            newLine()
+            div(class:"field is-grouped is-grouped-multiline"){
                 alltags.sort().each { tag ->
                     tag = tag.trim()
                     def count = all_content.findAll { p -> p.tags && p.tags.contains(tag) }.size()
-                    span(class:"tag") {
-                        a(href:"${config.site_contextPath}tags/${tag.replace(' ', '-')}.html"){
-                            yield "$tag"
-                            span(class:"badge","${count}")
+                    div(class:"control"){
+                    div(class:"tags has-addons") {
+                        span(class:"tag") {
+                            a(href:"${config.site_contextPath}tags/${tag.replace(' ', '-')}.html"){
+                                yield "$tag"
+                            }
                         }
+                        span(class:"tag","${count}")
+                    }
                     }
 					newLine()
                 }
diff --git a/src/main/jbake/templates/toc-brick.tpl b/src/main/jbake/templates/toc-brick.tpl
index b7d8feb..e4eb1e7 100644
--- a/src/main/jbake/templates/toc-brick.tpl
+++ b/src/main/jbake/templates/toc-brick.tpl
@@ -1,6 +1,14 @@
 // Temporary (?) ToC generation, until we get markdown support for that
 // using https://github.com/nghuuphuoc/tocjs
-div(id:"generatedToC") {}
+nav(class:"menu"){
+    ul(class:"menu-list box is-shadowless is-paddingless"){
+        li(id:"generatedToC") {
+            p(class:"menu-label") {
+                strong("Table of Contents")
+            }
+        }
+    }
+}
 yieldUnescaped "<script src='/res/jquery-3.2.1.min.js' type='text/javascript'></script>"
 yieldUnescaped "<script src='/res/tocjs-1-1-2.js' type='text/javascript'></script>"
-yieldUnescaped "<script type='text/javascript'>\$(document).ready(function() { \$('#generatedToC').toc({'selector':'h1[class!=pagetitle],h2,h3'}); } );</script>"
+yieldUnescaped "<script type='text/javascript'>\$(document).ready(function() { \$('#generatedToC').toc({'selector':'h1[class!=title],h2,h3','ulClass':'menu-list'}); } );</script>"