From b4f131d615ce9f5fc433d1f591d1e8cffb18a34a Mon Sep 17 00:00:00 2001 From: Ben Hollis Date: Sat, 13 Apr 2013 17:10:00 -0700 Subject: [PATCH] Styling for config meta page --- .../lib/middleman-core/meta_pages.rb | 15 +- .../meta_pages/assets/config.css | 36 ++ .../middleman-core/meta_pages/assets/meta.css | 368 ++++++++++++++++++ .../meta_pages/config_setting.rb | 39 ++ .../meta_pages/templates/config.html.erb | 73 ++-- .../meta_pages/templates/index.html.erb | 19 +- .../meta_pages/templates/sitemap.html.erb | 3 +- 7 files changed, 499 insertions(+), 54 deletions(-) create mode 100644 middleman-core/lib/middleman-core/meta_pages/assets/config.css create mode 100644 middleman-core/lib/middleman-core/meta_pages/assets/meta.css create mode 100644 middleman-core/lib/middleman-core/meta_pages/config_setting.rb diff --git a/middleman-core/lib/middleman-core/meta_pages.rb b/middleman-core/lib/middleman-core/meta_pages.rb index 1c0eec4c..e0cf3c6f 100644 --- a/middleman-core/lib/middleman-core/meta_pages.rb +++ b/middleman-core/lib/middleman-core/meta_pages.rb @@ -2,6 +2,7 @@ require 'rack/builder' require 'rack/static' require 'tilt' require 'middleman-core/meta_pages/sitemap_tree' +require 'middleman-core/meta_pages/config_setting' module Middleman module MetaPages @@ -58,8 +59,20 @@ module Middleman # Inspect configuration def config(env) + global_config = @middleman.inst.config.all_settings.map {|c| ConfigSetting.new(c) } + extension_config = Hash[@middleman.inst.extensions.map do |ext_name, extension| + opts = if extension.is_a?(::Middleman::Extension) + extension.options.all_settings.map {|c| ConfigSetting.new(c) } + else + nil + end + [ext_name, opts] + end] - template('config.html.erb', :config => @middleman.inst.config, :extensions => @middleman.inst.extensions, :registered_extensions => Middleman::Extensions.registered.dup) + template('config.html.erb', + :global_config => global_config, + :extension_config => extension_config, + :registered_extensions => Middleman::Extensions.registered.dup) end private diff --git a/middleman-core/lib/middleman-core/meta_pages/assets/config.css b/middleman-core/lib/middleman-core/meta_pages/assets/config.css new file mode 100644 index 00000000..5d673ace --- /dev/null +++ b/middleman-core/lib/middleman-core/meta_pages/assets/config.css @@ -0,0 +1,36 @@ +.settings { + list-style: none; + margin: 0; + padding: 0; +} + +.settings li { + margin-bottom: .5em; +} + +.key, .extension, .value, .default-value { + font-family: "Arvo","andale mono","lucida console",monospace; +} + +.key, .extension.active { + font-weight: bold; + color: #002B36; +} + +.default { + font-style: italic; + margin-left: .5em; + font-size: .85em; +} + +.value { + color: #002B36; +} + +.description { + margin: 0; +} + +.extensions .settings { + margin-left: 1em; +} \ No newline at end of file diff --git a/middleman-core/lib/middleman-core/meta_pages/assets/meta.css b/middleman-core/lib/middleman-core/meta_pages/assets/meta.css new file mode 100644 index 00000000..dd862ac4 --- /dev/null +++ b/middleman-core/lib/middleman-core/meta_pages/assets/meta.css @@ -0,0 +1,368 @@ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + -moz-font-feature-settings: inherit; + -moz-font-language-override: inherit; + border: 0 none; + font-family: inherit; + font-size: 100%; + font-size-adjust: inherit; + font-stretch: inherit; + font-style: inherit; + font-variant: inherit; + font-weight: inherit; + line-height: inherit; + margin: 0; + padding: 0; + vertical-align: baseline; +} +html { + line-height: 1; +} +ol, ul { + list-style: none outside none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +caption, th, td { + font-weight: 400; + text-align: left; + vertical-align: middle; +} +q, blockquote { + quotes: none; +} +q:before, q:after, blockquote:before, blockquote:after { + content: none; +} +a img { + border: medium none; +} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { + display: block; +} +html { + font-size: 100.01%; +} +body { + color: #655740; + font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; + font-size: 87.5%; + line-height: 1.5; +} +h1, h2, h3, h4, h5, h6 { + color: #002B36; +} +h1 { + font-size: 3em; + line-height: 1.1; + margin-bottom: 0.5em; +} +h2 { + font-size: 2em; + line-height: 1.2; + margin-bottom: 0.75em; +} +h3 { + font-size: 1.5em; + line-height: 1.25; + margin-bottom: 1em; +} +h4 { + font-size: 1.2em; + line-height: 1.3; + margin-bottom: 1.25em; +} +h5 { + font-size: 1em; + margin-bottom: 1.5em; +} +h6 { + font-size: 1em; +} +h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { + margin: 0; +} +p { + margin: 0 0 1.5em; +} +a { + color: #002B36; +} +a:visited, a:hover, a:focus, a:active { + color: #002B36; +} +blockquote { + color: #666666; + font-style: italic; + margin: 1.5em; +} +strong, dfn { + font-weight: 700; +} +em, dfn { + font-style: italic; +} +sup, sub { + line-height: 0; +} +abbr, acronym { + border-bottom: 1px dotted #666666; +} +address { + font-style: italic; + margin: 0 0 1.5em; +} +del { + color: #666666; +} +pre { + margin: 1.5em 0; + white-space: pre; +} +pre, code, tt { + font-family: "andale mono","lucida console",monospace; + font-size: 1em; + line-height: 1.5; +} +ul, ol { + margin: 0 1.5em 1.5em 0; + padding-left: 1.5em; +} +ul { + list-style-type: disc; +} +ol { + list-style-type: decimal; +} +dl { + margin: 0 0 1.5em; +} +dl dt { + font-weight: 700; +} +dl dd { + margin-left: 1.5em; +} +table { + width: 100%; +} +th { + font-weight: 700; + text-decoration: underline; +} +th, td { + padding: 2px 10px 2px 0; +} +body { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEXx6tfv6NXs5dLg3czcnqHfAAAARUlEQVR4Xu2RsQkAIAwEE3UAR3KJOKRLuJeVCOZbBSvhrwjPw3NFxJxqQKTkpOsEJH0sPxZRRFE8lc3pA/Fuzh9tKKJoAr91xp3fgwThAAAAAElFTkSuQmCC") repeat scroll 0 0 #EFE8D5; + margin: 0; +} +.container { + margin-left: auto; + margin-right: auto; + max-width: 83em; + overflow: visible; + padding-left: 1em; + padding-right: 1em; + position: relative; + margin-top: 2em; +} +.container:after { + clear: both; + content: ""; + display: table; +} +.console { + font-family: "Arvo","andale mono","lucida console",monospace; + font-weight: 400; + line-height: 1.2; + word-spacing: 0.3em; +} +#main { + display: inline; + float: left; + margin-left: 4.21687%; + margin-right: 4.21687%; + width: 53.6145%; +} +#main h1:first-child { + font-weight: 700; + line-height: 1; +} +#main h2, #main h3 { + margin-top: 1em; +} +#main pre { + background: none repeat scroll 0 0 #F8F8F8; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 1px 1px #A89A7A inset, 0 1px 0 white; + margin: 1.5em 0; + overflow: auto; + padding: 0.5em 1em; +} +#main footer { + background: none repeat scroll 0 0 #C6BDA8; + border-top: 1px solid #C6BDA8; + overflow: hidden; + padding: 1em 10px; +} +#main footer p { + margin: 0; +} +#main footer p.left { + display: inline; + float: left; +} +#main footer p.right { + display: inline; + float: right; +} +.grid { + display: inline; + float: left; + margin-right: 1.20482%; + width: 83.1325%; +} +.grid:after { + clear: both; + content: ""; + display: table; +} +.grid .toc-block { + display: inline; + float: left; + margin-right: 2.43902%; + padding: 1em 0; + width: 31.7073%; +} +.grid .toc-block:nth-child(3n) { + float: right; + margin-right: 0; +} +.grid .toc-block:nth-child(3n+1) { + clear: left; +} +pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc { + color: #93A1A1; + font-style: italic; +} +pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title { + color: #859900; +} +pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { + color: #2AA198; +} +pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id { + color: #268BD2; +} +pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label { + color: #B58900; +} +pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .attr_selector, pre .important, pre .subst, pre .cdata { + color: #CB4B16; +} +pre .deletion { + color: #DC322F; +} +pre .tex .formula { + background: none repeat scroll 0 0 #EEE8D5; +} +.grid { + display: inline; + float: left; + margin-right: 1.20482%; + width: 100%; +} +.grid .toc-block { + display: inline; + float: left; + margin-right: 1.20482%; + width: 100%; +} +.grid .toc-block:nth-child(3n) { + float: left; + margin-right: 1.20482%; +} +#header h1 { + left: 1.20482%; +} +#header p { + text-align: right; +} +#main { + display: inline; + float: left; + margin-right: 1.20482%; + width: 66.2651%; +} +#header h1 { + bottom: -22px; + left: 0; + width: 180px; +} +#header h1 .logo { + background: none repeat scroll 0 0 #002B36; + border-radius: 0 0 0 0; + text-align: center; + width: 100%; +} +#header h1 .logo img { + bottom: 0; + height: 180px; + left: 0; + position: absolute; + width: 180px; +} +#header p { + display: none; +} +#header .toc-nav-link { + -moz-box-sizing: border-box; + color: #002B36; + display: inline; + float: right; + font-family: "Arvo","andale mono","lucida console",monospace; + font-weight: 700; + margin-right: 0; + padding: 14px 0 16px; + text-align: right; + text-decoration: none; + width: 41.6667%; +} +#header .toc-nav-link:before { + font-size: 130%; + line-height: 1; + margin-right: 0.5em; + vertical-align: bottom; +} +#toc { + display: inline; + float: right; + height: 0; + margin-right: 0; + overflow: hidden; + width: 100%; +} +#toc:target { + height: auto; + padding: 1em 0 5em; +} +#toc a { + font-size: 120%; +} +#main { + display: inline; + float: left; + font-size: 120%; + margin-left: 0; + margin-right: 1.20482%; + width: 100%; +} +#main h1 { + font-size: 2em; +} +#main h2 { + font-size: 1.5em; +} diff --git a/middleman-core/lib/middleman-core/meta_pages/config_setting.rb b/middleman-core/lib/middleman-core/meta_pages/config_setting.rb new file mode 100644 index 00000000..f67656ba --- /dev/null +++ b/middleman-core/lib/middleman-core/meta_pages/config_setting.rb @@ -0,0 +1,39 @@ +module Middleman + module MetaPages + # View class for a config entry + class ConfigSetting + include Padrino::Helpers::OutputHelpers + include Padrino::Helpers::TagHelpers + + def initialize(setting) + @setting = setting + end + + def render + content = "" + key_classes = ['key'] + key_classes << 'modified' if @setting.value_set? + content << content_tag(:span, @setting.key.inspect, :class => key_classes.join(' ')) + content << " = " + content << content_tag(:span, CGI::escapeHTML(@setting.value.inspect), :class => 'value') + if @setting.default + content << content_tag(:span, :class => 'default') do + if @setting.value_set? + "Default: #{CGI::escapeHTML(@setting.default.inspect)}" + else + "(Default)" + end + end + end + + if @setting.description + content << content_tag(:p, :class => 'description') do + CGI::escapeHTML(@setting.description) + end + end + + content + end + end + end +end diff --git a/middleman-core/lib/middleman-core/meta_pages/templates/config.html.erb b/middleman-core/lib/middleman-core/meta_pages/templates/config.html.erb index f043ec07..c8353269 100644 --- a/middleman-core/lib/middleman-core/meta_pages/templates/config.html.erb +++ b/middleman-core/lib/middleman-core/meta_pages/templates/config.html.erb @@ -2,57 +2,43 @@ - - Middleman Config + Middleman Configuration + + -

Middleman Config

- More meta pages +
+
+ « back +

Middleman Configuration

-

Core Configuration

-
    - <% config.all_settings.each do |setting| %> -
  • - <%= setting.key.inspect %>: - <%= setting.value.inspect %> - <% if setting.value_set? %> -
    - Default: <%= setting.default.inspect %> - <% else %> - (Default) - <% end %> -
    - <%= setting.description %> -
    • +

    + Core configuration + | Extensions + | Middleman Guides +

    + +

    Core Configuration

    +
      + <% global_config.each do |setting| %> +
    • <%= setting.render %>
      • <% end %>
    -

    Extensions

    -
      - <% extensions.each do |ext_name, extension| %> +

      Extensions

      +
        + <% extension_config.each do |ext_name, configs| %>
      • <% registered_extensions.delete(ext_name) %> - <%= ext_name.inspect %> (Active) - <% if extension.is_a?(::Middleman::Extension) && !extension.options.all_settings.empty? %> -
        - Options: -
        -
          - <% extension.options.all_settings.each do |setting| %> -
        • - <%= setting.key.inspect %>: - <%= setting.value.inspect %> - <% if setting.value_set? %> -
          - Default: <%= setting.default.inspect %> - <% else %> - (Default) - <% end %> -
          - <%= setting.description %> -
          • + <%= ext_name.inspect %> + + + <% if configs && !configs.empty? %> +
            + <% configs.each do |setting| %> +
          • <%= setting.render %>
            • <% end %>
          <% end %> @@ -61,10 +47,11 @@ <% end %> <% registered_extensions.keys.each do |ext_name| %> -
        • <%= ext_name.inspect %> (Inactive)
          • +
        • <%= ext_name.inspect %> (Inactive)
          • <% end %>
        - +
+
diff --git a/middleman-core/lib/middleman-core/meta_pages/templates/index.html.erb b/middleman-core/lib/middleman-core/meta_pages/templates/index.html.erb index 07d33535..e9bebd2c 100644 --- a/middleman-core/lib/middleman-core/meta_pages/templates/index.html.erb +++ b/middleman-core/lib/middleman-core/meta_pages/templates/index.html.erb @@ -2,19 +2,20 @@ - - Middleman Meta Pages + Middleman Info + -

Middleman Meta Pages

+
+

Middleman Information

-

Peer into the bowels of your Middleman application with these handy views!

- - + +
diff --git a/middleman-core/lib/middleman-core/meta_pages/templates/sitemap.html.erb b/middleman-core/lib/middleman-core/meta_pages/templates/sitemap.html.erb index 28328833..68c4534e 100644 --- a/middleman-core/lib/middleman-core/meta_pages/templates/sitemap.html.erb +++ b/middleman-core/lib/middleman-core/meta_pages/templates/sitemap.html.erb @@ -4,7 +4,8 @@ Middleman Sitemap - + +