Nice styling for sitemap pages

middleman-core/lib/middleman-core/meta_pages/assets/sitemap.css

@@ -1,5 +1,7 @@
 summary {
     display: block;
+    font-family: "Arvo","andale mono","lucida console",monospace;
+    color: #002B36;
 }
 
 details > details {
@@ -7,9 +9,627 @@ details > details {
 }
 
 details.resource > summary {
-  font-weight: bold;
+    
 }
 
 .resource-details {
     margin-left: 15px;
+}
+
+summary > i {
+    margin-right: 4px;
+}
+
+.resource-details table {
+    margin-left: 1em;
+    font-size: .85em;
+}
+
+.resource-details th, .resource-details td {
+    padding: 0;
+}
+
+.resource-details th {
+    width: .1em;
+    white-space: nowrap;
+    padding-right: 1em;
+    text-decoration: none;
+}
+
+.resource-details td {
+    font-family: "Arvo","andale mono","lucida console",monospace;
+}
+
+details > summary:before {
+    content: "" !important;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-top: 1px;
+    line-height: 14px;
+    margin-right: 4px;
+    vertical-align: text-top;
+    background-image: url("glyphicons-halflings.png");
+    background-repeat: no-repeat;
+    background-position: -456px -72px;
+}
+details.open > summary:before {
+    background-position: -313px -119px;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-top: 1px;
+  *margin-right: .3em;
+  line-height: 14px;
+  vertical-align: text-top;
+  background-image: url("glyphicons-halflings.png");
+  background-position: 14px 14px;
+  background-repeat: no-repeat;
+}
+
+.icon-glass {
+  background-position: 0      0;
+}
+
+.icon-music {
+  background-position: -24px 0;
+}
+
+.icon-search {
+  background-position: -48px 0;
+}
+
+.icon-envelope {
+  background-position: -72px 0;
+}
+
+.icon-heart {
+  background-position: -96px 0;
+}
+
+.icon-star {
+  background-position: -120px 0;
+}
+
+.icon-star-empty {
+  background-position: -144px 0;
+}
+
+.icon-user {
+  background-position: -168px 0;
+}
+
+.icon-film {
+  background-position: -192px 0;
+}
+
+.icon-th-large {
+  background-position: -216px 0;
+}
+
+.icon-th {
+  background-position: -240px 0;
+}
+
+.icon-th-list {
+  background-position: -264px 0;
+}
+
+.icon-ok {
+  background-position: -288px 0;
+}
+
+.icon-remove {
+  background-position: -312px 0;
+}
+
+.icon-zoom-in {
+  background-position: -336px 0;
+}
+
+.icon-zoom-out {
+  background-position: -360px 0;
+}
+
+.icon-off {
+  background-position: -384px 0;
+}
+
+.icon-signal {
+  background-position: -408px 0;
+}
+
+.icon-cog {
+  background-position: -432px 0;
+}
+
+.icon-trash {
+  background-position: -456px 0;
+}
+
+.icon-home {
+  background-position: 0 -24px;
+}
+
+.icon-file {
+  background-position: -24px -24px;
+}
+
+.icon-time {
+  background-position: -48px -24px;
+}
+
+.icon-road {
+  background-position: -72px -24px;
+}
+
+.icon-download-alt {
+  background-position: -96px -24px;
+}
+
+.icon-download {
+  background-position: -120px -24px;
+}
+
+.icon-upload {
+  background-position: -144px -24px;
+}
+
+.icon-inbox {
+  background-position: -168px -24px;
+}
+
+.icon-play-circle {
+  background-position: -192px -24px;
+}
+
+.icon-repeat {
+  background-position: -216px -24px;
+}
+
+.icon-refresh {
+  background-position: -240px -24px;
+}
+
+.icon-list-alt {
+  background-position: -264px -24px;
+}
+
+.icon-lock {
+  background-position: -287px -24px;
+}
+
+.icon-flag {
+  background-position: -312px -24px;
+}
+
+.icon-headphones {
+  background-position: -336px -24px;
+}
+
+.icon-volume-off {
+  background-position: -360px -24px;
+}
+
+.icon-volume-down {
+  background-position: -384px -24px;
+}
+
+.icon-volume-up {
+  background-position: -408px -24px;
+}
+
+.icon-qrcode {
+  background-position: -432px -24px;
+}
+
+.icon-barcode {
+  background-position: -456px -24px;
+}
+
+.icon-tag {
+  background-position: 0 -48px;
+}
+
+.icon-tags {
+  background-position: -25px -48px;
+}
+
+.icon-book {
+  background-position: -48px -48px;
+}
+
+.icon-bookmark {
+  background-position: -72px -48px;
+}
+
+.icon-print {
+  background-position: -96px -48px;
+}
+
+.icon-camera {
+  background-position: -120px -48px;
+}
+
+.icon-font {
+  background-position: -144px -48px;
+}
+
+.icon-bold {
+  background-position: -167px -48px;
+}
+
+.icon-italic {
+  background-position: -192px -48px;
+}
+
+.icon-text-height {
+  background-position: -216px -48px;
+}
+
+.icon-text-width {
+  background-position: -240px -48px;
+}
+
+.icon-align-left {
+  background-position: -264px -48px;
+}
+
+.icon-align-center {
+  background-position: -288px -48px;
+}
+
+.icon-align-right {
+  background-position: -312px -48px;
+}
+
+.icon-align-justify {
+  background-position: -336px -48px;
+}
+
+.icon-list {
+  background-position: -360px -48px;
+}
+
+.icon-indent-left {
+  background-position: -384px -48px;
+}
+
+.icon-indent-right {
+  background-position: -408px -48px;
+}
+
+.icon-facetime-video {
+  background-position: -432px -48px;
+}
+
+.icon-picture {
+  background-position: -456px -48px;
+}
+
+.icon-pencil {
+  background-position: 0 -72px;
+}
+
+.icon-map-marker {
+  background-position: -24px -72px;
+}
+
+.icon-adjust {
+  background-position: -48px -72px;
+}
+
+.icon-tint {
+  background-position: -72px -72px;
+}
+
+.icon-edit {
+  background-position: -96px -72px;
+}
+
+.icon-share {
+  background-position: -120px -72px;
+}
+
+.icon-check {
+  background-position: -144px -72px;
+}
+
+.icon-move {
+  background-position: -168px -72px;
+}
+
+.icon-step-backward {
+  background-position: -192px -72px;
+}
+
+.icon-fast-backward {
+  background-position: -216px -72px;
+}
+
+.icon-backward {
+  background-position: -240px -72px;
+}
+
+.icon-play {
+  background-position: -264px -72px;
+}
+
+.icon-pause {
+  background-position: -288px -72px;
+}
+
+.icon-stop {
+  background-position: -312px -72px;
+}
+
+.icon-forward {
+  background-position: -336px -72px;
+}
+
+.icon-fast-forward {
+  background-position: -360px -72px;
+}
+
+.icon-step-forward {
+  background-position: -384px -72px;
+}
+
+.icon-eject {
+  background-position: -408px -72px;
+}
+
+.icon-chevron-left {
+  background-position: -432px -72px;
+}
+
+.icon-chevron-right {
+  background-position: -456px -72px;
+}
+
+.icon-plus-sign {
+  background-position: 0 -96px;
+}
+
+.icon-minus-sign {
+  background-position: -24px -96px;
+}
+
+.icon-remove-sign {
+  background-position: -48px -96px;
+}
+
+.icon-ok-sign {
+  background-position: -72px -96px;
+}
+
+.icon-question-sign {
+  background-position: -96px -96px;
+}
+
+.icon-info-sign {
+  background-position: -120px -96px;
+}
+
+.icon-screenshot {
+  background-position: -144px -96px;
+}
+
+.icon-remove-circle {
+  background-position: -168px -96px;
+}
+
+.icon-ok-circle {
+  background-position: -192px -96px;
+}
+
+.icon-ban-circle {
+  background-position: -216px -96px;
+}
+
+.icon-arrow-left {
+  background-position: -240px -96px;
+}
+
+.icon-arrow-right {
+  background-position: -264px -96px;
+}
+
+.icon-arrow-up {
+  background-position: -289px -96px;
+}
+
+.icon-arrow-down {
+  background-position: -312px -96px;
+}
+
+.icon-share-alt {
+  background-position: -336px -96px;
+}
+
+.icon-resize-full {
+  background-position: -360px -96px;
+}
+
+.icon-resize-small {
+  background-position: -384px -96px;
+}
+
+.icon-plus {
+  background-position: -408px -96px;
+}
+
+.icon-minus {
+  background-position: -433px -96px;
+}
+
+.icon-asterisk {
+  background-position: -456px -96px;
+}
+
+.icon-exclamation-sign {
+  background-position: 0 -120px;
+}
+
+.icon-gift {
+  background-position: -24px -120px;
+}
+
+.icon-leaf {
+  background-position: -48px -120px;
+}
+
+.icon-fire {
+  background-position: -72px -120px;
+}
+
+.icon-eye-open {
+  background-position: -96px -120px;
+}
+
+.icon-eye-close {
+  background-position: -120px -120px;
+}
+
+.icon-warning-sign {
+  background-position: -144px -120px;
+}
+
+.icon-plane {
+  background-position: -168px -120px;
+}
+
+.icon-calendar {
+  background-position: -192px -120px;
+}
+
+.icon-random {
+  width: 16px;
+  background-position: -216px -120px;
+}
+
+.icon-comment {
+  background-position: -240px -120px;
+}
+
+.icon-magnet {
+  background-position: -264px -120px;
+}
+
+.icon-chevron-up {
+  background-position: -288px -120px;
+}
+
+.icon-chevron-down {
+  background-position: -313px -119px;
+}
+
+.icon-retweet {
+  background-position: -336px -120px;
+}
+
+.icon-shopping-cart {
+  background-position: -360px -120px;
+}
+
+.icon-folder-close {
+  width: 16px;
+  background-position: -384px -120px;
+}
+
+.icon-folder-open {
+  width: 16px;
+  background-position: -408px -120px;
+}
+
+.icon-resize-vertical {
+  background-position: -432px -119px;
+}
+
+.icon-resize-horizontal {
+  background-position: -456px -118px;
+}
+
+.icon-hdd {
+  background-position: 0 -144px;
+}
+
+.icon-bullhorn {
+  background-position: -24px -144px;
+}
+
+.icon-bell {
+  background-position: -48px -144px;
+}
+
+.icon-certificate {
+  background-position: -72px -144px;
+}
+
+.icon-thumbs-up {
+  background-position: -96px -144px;
+}
+
+.icon-thumbs-down {
+  background-position: -120px -144px;
+}
+
+.icon-hand-right {
+  background-position: -144px -144px;
+}
+
+.icon-hand-left {
+  background-position: -168px -144px;
+}
+
+.icon-hand-up {
+  background-position: -192px -144px;
+}
+
+.icon-hand-down {
+  background-position: -216px -144px;
+}
+
+.icon-circle-arrow-right {
+  background-position: -240px -144px;
+}
+
+.icon-circle-arrow-left {
+  background-position: -264px -144px;
+}
+
+.icon-circle-arrow-up {
+  background-position: -288px -144px;
+}
+
+.icon-circle-arrow-down {
+  background-position: -312px -144px;
+}
+
+.icon-globe {
+  background-position: -336px -144px;
+}
+
+.icon-wrench {
+  background-position: -360px -144px;
+}
+
+.icon-tasks {
+  background-position: -384px -144px;
+}
+
+.icon-filter {
+  background-position: -408px -144px;
+}
+
+.icon-briefcase {
+  background-position: -432px -144px;
+}
+
+.icon-fullscreen {
+  background-position: -456px -144px;
 }

middleman-core/lib/middleman-core/meta_pages/sitemap_resource.rb

@@ -11,11 +11,15 @@ module Middleman
 
       def render
         content_tag :div, :class => 'resource-details' do
-          content_tag :dl do
+          content_tag :table do
             content = ""
             resource_properties.each do |label, value|
-              content << content_tag(:dt, label)
+              content << content_tag(:tr) do
-              content << content_tag(:dd, value)
+                row_content = ""
+                row_content << content_tag(:th, label)
+                row_content << content_tag(:td, value)
+                row_content
+              end
             end
             content
           end
@@ -24,13 +28,20 @@ module Middleman
 
       # A hash of label to value for all the properties we want to display
       def resource_properties
-        {
+        props = {
           'Path' => @resource.path,
-          'Output Path' => File.join(@resource.app.build_dir, @resource.destination_path),
+          'Build Path' => @resource.destination_path,
-          'Url' => content_tag(:a, @resource.url, :href => @resource.url),
+          'URL' => content_tag(:a, @resource.url, :href => @resource.url),
-          #'Metadata' => @resource.metadata,
+          'Template' => @resource.source_file,
-          'Source' => @resource.source_file
         }
+
+        data = @resource.data
+        props['Data'] = data unless data.empty?
+
+        options = @resource.metadata[:options]
+        props['Options'] = options unless options.empty?
+
+        props
       end
 
       def css_classes

middleman-core/lib/middleman-core/meta_pages/sitemap_tree.rb

@@ -14,10 +14,30 @@ module Middleman
 
       def render
         content = ""
-        @children.keys.sort_by(&:downcase).each do |path_part|
+        @children.keys.sort do |a,b|
+          a_subtree = @children[a]
+          b_subtree = @children[b]
+          if a_subtree.is_a? SitemapResource
+            if b_subtree.is_a? SitemapResource
+              a.downcase <=> b.downcase
+            else
+              1
+            end
+          elsif b_subtree.is_a? SitemapResource
+            if a_subtree.is_a? SitemapResource
+              b.downcase <=> a.downcase
+            else
+              -1
+            end
+          else
+            a.downcase <=> b.downcase
+          end
+        end.each do |path_part|
           subtree = @children[path_part]
           content << "<details class='#{subtree.css_classes.join(' ')}'>"
-          content << "<summary>#{path_part}</summary>"
+          content << "<summary>"
+          content << "<i class='icon-folder-open'></i>" unless subtree.is_a? SitemapResource
+          content << "#{path_part}</summary>"
           content << subtree.render
           content << "</details>"
         end

middleman-core/lib/middleman-core/meta_pages/templates/config.html.erb

@@ -13,12 +13,13 @@
     <a href="../">&laquo; back</a>
     <h1>Middleman Configuration</h1>
 
+    <p>This page shows the current configuration of your Middleman application.</p>
+    
     <p>
       <a href="#core">Core configuration</a>
       | <a href="#extensions">Extensions</a>
-      | <a href="http://middlemanapp.com">Middleman Guides</a>
     </p>
-    
+
     <h2 id="core">Core Configuration</h2>
     <ul class="settings">
     <% global_config.each do |setting| %>

middleman-core/lib/middleman-core/meta_pages/templates/sitemap.html.erb

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
         
     <title>Middleman Sitemap</title>
+
     
     <link type="text/css" rel="stylesheet" href="../assets/meta.css">
     <link type="text/css" rel="stylesheet" href="../assets/sitemap.css">
@@ -13,10 +14,18 @@
   </head>
   
   <body>
-    <h1>Middleman Sitemap</h1>
+    <div class="container">
-    <a href="../">More meta pages</a>
+      <article id="main">
+        <a href="../">&laquo; back</a>
+        <h1>Middleman Sitemap</h1>
 
-    <%= sitemap_tree.render %>
+        <p>This page shows all of the pages in
+        the <a href="http://middlemanapp.com/advanced/sitemap/">sitemap</a>,
+        Middleman's view of your site.</p>
+
+        <%= sitemap_tree.render %>
+      </article>
+    </div>
   </body>
 </html>