bkss-rails 0.0.1

data/app/controllers/styleguides_controller.rb

@@ -0,0 +1,58 @@
+class StyleguidesController < ::ActionController::Base
+
+  DEFAULT_STYLESHEETS_DIR = File.join(%W(#{Rails.root} app assets stylesheets))
+  DEFAULT_STYLEGUIDE_FILE = File.join(%W(#{Rails.root} config styleguides.yml))
+
+  helper_method :styleguide_options
+  helper_method :styleguide_title
+  helper_method :styleguide_sections
+  helper_method :styleguide_root
+
+  before_filter :set_styleguide, :only => [:show, :all]
+
+  def show
+    @section = params[:section].to_i
+
+    render template: "styleguides/#{@section}", layout: 'styleguide_page'
+  end
+
+  def index
+    redirect_to nkss.root_url + '1'
+  end
+
+  def all
+    @sections = styleguide_sections
+    @single_page = true
+    render template: 'styleguides/all', layout: 'styleguide_page'
+  end
+
+  private
+
+  def set_styleguide
+    require 'kss'
+    @styleguide = Kss::Parser.new(styleguide_root)
+  end
+
+  def styleguide_options
+    @styleguide_options ||= YAML::load(
+      ERB.new(IO.read(styleguide_location)).result
+    )
+  end
+
+  def styleguide_title
+    styleguide_options['title']
+  end
+
+  def styleguide_sections
+    styleguide_options['sections']
+  end
+
+  def styleguide_root
+    styleguide_options['root'] || DEFAULT_STYLESHEETS_DIR
+  end
+
+  def styleguide_location
+    defined?(STYLEGUIDE_FILE) ? STYLEGUIDE_FILE : DEFAULT_STYLEGUIDE_FILE
+  end
+
+end

data/app/helpers/styleguide_helper.rb

@@ -0,0 +1,147 @@
+# # Nkss: Helpers
+# A bunch of helpers you can use in your styleguides.
+
+module StyleguideHelper
+
+  DEFAULT_OPTIONS = {
+    :background => 'light',
+    :align => 'left',
+    :code => 'true'
+  }.freeze
+
+  # ### kss_block
+  # Documents a styleguide block.
+  #
+  # Some options you can specify:
+  #
+  #  * `background` - The background color. Can be *clear*, *white*, *black*,
+  #  *light*, or *dark*.
+  #
+  #  * `align` - Text alignment. Can be *left*, *right*, or *center*.
+  #
+  #  * `width` - (Optional) width for the inner area. Specify this for
+  #  documenting long things.
+  #
+  # Example:
+  #
+  #     = kss_block '1.1' do
+  #       %div.foo
+  #         Put markup here!
+  #
+  # Example with options:
+  #
+  #     = kss_block '1.1', background: 'dark' do
+  #       %div.foo
+  #         Put markup here!
+
+  def kss_block(section_id, options={}, &block)
+    section = @styleguide.section(section_id)
+
+    raise "Section '#{section_id}' not found."  unless section.filename
+
+    options = DEFAULT_OPTIONS.merge(options)
+
+    inner_style = ''
+    inner_style = "width: #{options[:width]}px; margin: 0 auto"  if options[:width]
+
+    render \
+      partial: 'styleguides/block',
+      locals: {
+        canvas_class: %W(bg-#{options[:background]} align-#{options[:align]}),
+        code_block: block,
+        html: capture(&block),
+        source: capture_source(section_id, block),
+        source_language: source_language(block),
+        section: section,
+        modifiers: (section.modifiers rescue Array.new),
+        options: options,
+        inner_style: inner_style,
+      }
+  end
+
+  # ### kss_specimen
+  # Renders a type specimen. This is great for demoing fonts.
+  # Use it like so:
+  #
+  #     = kss_block '2.1' do
+  #       .proxima-nova
+  #         = kss_specimen
+  #
+  # This gets you a `<div class='sg-specimen'>` block which has already been
+  # styled to showcase different sizes of the given font.
+
+  def kss_specimen
+    render partial: 'styleguides/specimen'
+  end
+
+  # ### kss_swatch
+  # Renders a type specimen. This is great for demoing colors.
+  #
+  #     = kss_block '2.1' do
+  #       = kss_swatch 'red', '#ff3322', description: 'for error text'
+
+  def kss_swatch(name, color, options={})
+    render partial: 'styleguides/swatch', locals: {
+      name: name,
+      identifier: name,
+      color: color,
+      dark: options[:dark],
+      description: options[:description]
+    }
+  end
+
+  # ### lorem
+  # Convenient lorem ipsum helper.
+  #
+  # Yeah, well, you'll need this for a lot of styleguide sections. Use it like
+  # so:
+  #
+  #     %p= lorem.paragraph
+  #     %li= lorem.sentence
+  #
+  def lorem
+    require 'ffaker'
+
+    Faker::Lorem
+  end
+
+  # ### markdown
+  # Markdownify some text.
+
+  def markdown(text)
+    require 'bluecloth'
+
+    str = BlueCloth.new(text).to_html
+    str = str.html_safe  if str.respond_to?(:html_safe)
+    str
+  end
+
+  protected
+
+  def capture_source(section_id, block)
+    file, _ = block.source_location # line doesn't always work correctly
+    lines = File.read(file).split("\n")
+    line = lines.
+      index { |o| !! o.match(/kss_block[ (]["']#{section_id}['"][ )]/) }
+    unless line
+      raise IndexError, "kss_block '#{section_id}' not found in #{file}"
+    end
+    target_indent = lines[line].index(/[^\s]/) # level of the kss_block call
+    remove_indent = lines[line + 1].index(/[^\s]/) - target_indent
+    lines = lines[line + 1, lines.length]  # ignore anything before the call
+    [].tap do |content|
+      while current_line = lines.shift
+        if current_line.strip.present?
+          break if current_line.index(/[^\s]/) <= target_indent
+        end
+        content << current_line.gsub(/^\s{#{remove_indent}}/,'')
+      end
+    end.join("\n")
+  end
+
+  def source_language(block)
+    file, _ = block.source_location
+    file.split('.').last if file.is_a? String
+  end
+
+end

data/app/views/layouts/styleguide.html.erb

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <title> Styleguides </title>
+    <%= stylesheet_link_tag 'application' %>
+    <%= javascript_include_tag 'modernizr' %>
+    <!-- [if lt IE 9]
+    <script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js'></script>
+    -->
+    <%= yield :head  if content_for?(:head) %>
+  </head>
+  <body>
+    <%= yield :body  if content_for?(:body) %>
+  </body>
+</html>

data/app/views/layouts/styleguide_page.html.erb

@@ -0,0 +1,147 @@
+<%# Templates: Styleguide page template %>
+<%# This formats your styleguides. %>
+
+<%# It puts things into `:body` and `:head`, and calls the `layouts/styleguide` %>
+<%# layout, which you should have in your app. %>
+
+<%# Don't like me? Just copy me into your %>
+<%# `app/views/layouts/styleguide_page.html.erb` and customize me. %>
+
+<%- content_for(:body) do -%>
+  <button class='sg-toggle-sidebar'></button>
+
+  <aside class='sg-toc'>
+    <h1>
+      <strong><%= styleguide_title %></strong>
+      <small>Style guide</small>
+    </h1>
+
+    <ul>
+      <%- styleguide_sections.each do |id, name| -%>
+        <li>
+          <%- href = @single_page ? "##{id}" : id -%>
+          <%- klass = @single_page ? "" : (id == @section ? 'active' : '') -%>
+          <a class='<%= klass %>' href='<%= href %>'>
+            <span class='sg-number'><%= id.to_s %></span>
+            <span class='sg-name'><%= name %></span>
+          </a>
+        </li>
+      <%- end -%>
+    </ul>
+  </aside>
+
+  <section class='sg-body'>
+    <%= yield %>
+  </section>
+
+  <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js'></script>
+  <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>
+
+  <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
+  <script type='text/javascript'>
+    // Pretty printer script
+    (function() {
+      var pretty = false;
+      $('.sg-view-code').on('click', function expand() {
+        if (!pretty) {
+          prettyPrint();
+          pretty = true;
+        }
+
+        var $block = $(this).closest('.sg-example');
+        $block.find('.sg-html, .sg-view-code').toggleClass('sg-expanded');
+      });
+    })();
+
+    // Sidebar toggler script
+    (function() {
+      $('.sg-toggle-sidebar').on('click', function() {
+        $('body').toggleClass('sg-full');
+      });
+    })();
+
+    // Scrollspy script
+    (function() {
+      $.fn.scrollagent = function(options, callback) {
+        // Account for $.scrollspy(function)
+        if (typeof callback === 'undefined') {
+          callback = options;
+          options = {};
+        }
+
+        var $sections = $(this);
+        var $parent = options.parent || $(window);
+
+        // Find the top offsets of each section
+        var offsets = [];
+        $sections.each(function(i) {
+          offsets.push({
+            top: $(this).offset().top,
+            id: $(this).attr('id'),
+            index: i,
+            el: this
+          });
+        });
+
+        // State
+        var current = null;
+        var height = null;
+        var range = null;
+
+        // Save the height. Do this only whenever the window is resized so we don't
+        // recalculate often.
+        $(window).on('resize', function onresize() {
+          height = $parent.height();
+          range = $(document).height();
+        });
+
+        // Find the current active section every scroll tick.
+        $parent.on('scroll', function() {
+          var y = $parent.scrollTop();
+          y += height * (0.3 + 0.7 * Math.pow(y/range, 2));
+
+          var latest = null;
+
+          for (var i in offsets) {
+            if (offsets.hasOwnProperty(i)) {
+              var offset = offsets[i];
+              if (offset.top < y) latest = offset;
+            }
+          }
+
+          if (latest && (!current || (latest.index !== current.index))) {
+            callback.call($sections,
+              latest ? latest.id : null,
+              current ? current.id : null,
+              latest ? latest.el : null,
+              current ? current.el : null);
+            current = latest;
+          }
+        });
+
+        $(window).trigger('resize');
+        $parent.trigger('scroll');
+
+        return this;
+      };
+
+      var $sections = $('.sg-page-title');
+
+      $sections.scrollagent(function(cid, pid) {
+        if (pid) {
+          $(".sg-toc [href='#"+pid+"']").removeClass('active');
+        }
+        if (cid) {
+          $(".sg-toc [href='#"+cid+"']").addClass('active');
+        }
+      });
+
+    })();
+  </script>
+<%- end -%>
+
+<%- content_for(:head) do -%>
+  <%= stylesheet_link_tag 'styleguide' %>
+<%- end -%>
+
+<%= render file: 'layouts/styleguide' %>

data/app/views/styleguides/_block.html.erb

@@ -0,0 +1,51 @@
+<%# Templates: Block partial %>
+
+<%# This is the partial invoked when you use the `kss_guide` helper. %>
+<%# Don't like me? Just copy me into `app/views/styleguides/_block.html.haml` in %>
+<%# your app. %>
+
+<section class='sg-example' id='section.section'>
+  <h3>
+    <%= link_to section.section, "##{section.section}" %>
+  </h3>
+
+  <button class='sg-button sg-view-code'>HTML / Source</button>
+
+  <div class='sg-description'>
+    <span class='sg-filename'><%= section.filename %></span>
+    <%= raw markdown h(section.description) %>
+
+    <%- if section.modifiers.any? -%>
+      <ul class='sg-modifiers'>
+        <%- modifiers.each do |modifier| -%>
+          <li>
+            <strong><%= modifier.name %> - <%= modifier.description %></strong>
+          </li>
+        <%- end -%>
+      </ul>
+    <%- end -%>
+  </div>
+
+  <div class='sg-canvases'>
+    <div class='sg-canvas <%= canvas_class %>'>
+      <div style='<%= inner_style %>'><%= raw html %></div>
+    </div>
+
+    <%- modifiers.each do |modifier| -%>
+      <div class='sg-modifier sg-canvas <%= canvas_class %>'>
+        <span class='sg-modifier-name'><%= modifier.name %></span>
+        <div style='<%= inner_style %>'>
+          <%= capture(modifier.name, &code_block) %>
+        </div>
+      </div>
+    <%- end -%>
+
+    <div class='sg-html'>
+      <pre class='prettyprint lang-html'><%=h html.strip %></pre>
+    </div>
+
+    <div class='sg-html'>
+      <pre class='prettyprint lang-<%= source_language %>'><%=h source %></pre>
+    </div>
+  </div>
+</section>

data/app/views/styleguides/_specimen.html.erb

@@ -0,0 +1,10 @@
+<div class='sg-specimen'>
+  <div class='sg-drop'>Ag</div>
+  <h3><%= ('a'..'z').to_a.map { |c| c.upcase + c.downcase }.join(" ") %></h3>
+  <p class='sg-small'><%= lorem.sentence %></p>
+  <p>
+    <strong><%= lorem.sentence %></strong>
+    <%= 2.times.map { lorem.paragraph }.join ' ' %>
+  </p>
+  <p><%= 2.times.map { lorem.paragraph }.join ' ' %></p>
+</div>

data/app/views/styleguides/_swatch.html.erb

@@ -0,0 +1,10 @@
+<div class='sg-swatch <%= 'sg-dark' if dark %>'>
+  <div class='sg-text' style='color: <%= color %>'>
+    <%= color %>
+  </div>
+
+  <div class='sg-background' style='background: <%= color %>'>
+    <strong><%= identifier %></strong>
+    <%= content_tag(:small, description) if description %>
+  </div>
+</div>

data/app/views/styleguides/all.html.erb

@@ -0,0 +1,8 @@
+<%- @sections.each do |id, title| -%>
+  <%- @section = id.to_i -%>
+  <h2 class='sg-page-title' id='<%= id %>'>
+    <strong><%= id %></strong>
+    <%= title %>
+  </h2>
+  <%= render file: "styleguides/#{@section}" %>
+<%- end -%>