nkss-rails 0.0.1

data/app/controllers/styleguides_controller.rb

@@ -0,0 +1,49 @@
+class StyleguidesController < ApplicationController
+
+  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_file("#{Rails.root}/config/styleguides.yml")
+  end
+
+  def styleguide_title
+    styleguide_options['title']
+  end
+
+  def styleguide_sections
+    styleguide_options['sections']
+  end
+
+  def styleguide_root
+    path = styleguide_options['root'] || '/app/assets/stylesheets'
+    File.join Rails.root, path
+  end
+end

data/app/helpers/styleguide_helper.rb

@@ -0,0 +1,116 @@
+# # Nkss: Helpers
+# A bunch of helpers you can use in your styleguides.
+
+module StyleguideHelper
+
+  # ### 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
+  #
+  def kss_block(section_id, options={}, &block)
+    section = @styleguide.section(section_id)
+
+    raise "Section '#{section_id}' not found."  unless section.filename
+
+    example_html = capture(&block)
+
+    defaults = { background: 'light', align: 'left', code: 'true' }
+    options = defaults.merge(options)
+
+    bg = "bg-#{options[:background]}"
+    align = "align-#{options[:align]}"
+    classes = [bg, align]
+
+    inner_style = ''
+    inner_style = "width: #{options[:width]}px; margin: 0 auto"  if options[:width]
+
+    render \
+      partial: 'styleguides/block',
+      locals: {
+        canvas_class: classes.join(' '),
+        code_block: block,
+        html: example_html,
+        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
+
+end

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

@@ -0,0 +1,141 @@
+-# # 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.haml` and customize me.
+
+- content_for :body do
+  %button.sg-toggle-sidebar
+
+  %aside.sg-toc
+    %h1
+      %strong= styleguide_title
+      %small Style guide
+
+    %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.sg-number= "#{id}"
+            %span.sg-name= name
+
+  %section.sg-body
+    = yield
+
+  %script{src: "http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"}
+  %script{src: "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"}
+  %link{href: "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css", type: "text/css", rel: "stylesheet"}
+  :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').toggleClass('sg-expanded');
+        $block.find('.sg-view-code').toggleClass('sg-expanded');
+      });
+    })();
+
+    // Sidebar toggler script
+    (function() {
+      $('.sg-toggle-sidebar').on('click', function() {
+        $('body').toggleClass('sg-full');
+      });
+    })();
+
+    (function() {
+    });
+
+    // 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');
+        }
+      });
+
+    })();
+
+- content_for :head do
+  = stylesheet_link_tag 'styleguide'
+  = stylesheet_link_tag 'styleguide-extras'
+
+= render file: 'layouts/styleguide'

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

@@ -0,0 +1,36 @@
+-# # 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.sg-example{id: section.section}
+  %h3
+    %a{href: "##{section.section}"}= section.section
+
+  %button.sg-button.sg-view-code HTML
+
+  .sg-description
+    %span.sg-filename= section.filename
+    != markdown h(section.description)
+
+    - if section.modifiers.any?
+      %ul.sg-modifiers
+        - modifiers.each do |modifier|
+          %li
+            %strong= modifier.name
+            = "-"
+            = modifier.description
+
+  .sg-canvases
+    .sg-canvas{class: canvas_class}
+      %div{style: inner_style}!= html
+
+    - modifiers.each do |modifier|
+      .sg-modifier.sg-canvas{class: canvas_class}
+        %span.sg-modifier-name= modifier.name
+        %div{style: inner_style}= capture modifier.name, &code_block
+
+    .sg-html
+      %pre.prettyprint.lang-html!= h(html.gsub('', ''))
+

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

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

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

@@ -0,0 +1,9 @@
+.sg-swatch{class: ('sg-dark' if dark)}
+  .sg-text{style: "color: #{color}"}
+    = color
+
+  .sg-background{style: "background: #{color}"}
+    %strong= identifier
+
+    - if description
+      %small= description

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

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

data/config/routes.rb

@@ -0,0 +1,5 @@
+Nkss::Engine.routes.draw do
+   root :to => 'styleguides#index'
+   get 'all' => 'styleguides#all'
+   get ':section' => 'styleguides#show'
+end

data/lib/generators/nkss/install_generator.rb

@@ -0,0 +1,18 @@
+require 'rails/generators/base'
+
+module Nkss
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('../../templates', __FILE__)
+    desc 'Nkss Rails Install'
+
+    def install_steps
+      copy_file '1.html.haml', 'app/views/styleguides/1.html.haml'
+      copy_file 'styleguides.yml', 'config/styleguides.yml'
+      copy_file 'styleguide-extras.scss', 'app/assets/stylesheets/styleguide-extras.scss'
+      copy_file 'example-for-styleguides.css', 'app/assets/stylesheets/example-for-styleguides.css'
+      copy_file 'styleguide.html.haml', 'app/views/layouts/styleguide.html.haml'
+
+      route "mount Nkss::Engine => '/styleguides' if Rails.env.development?"
+    end
+  end
+end

data/lib/generators/templates/1.html.haml

@@ -0,0 +1,6 @@
+-# This is an example markup for a KSS section.
+-# The definition for `1.1` can be found in your app/assets/stylesheets/ folder.
+
+= kss_block '1.1' do
+  %div.example
+    Example markup

data/lib/generators/templates/example-for-styleguides.css

@@ -0,0 +1,17 @@
+/* REMOVE ME:
+ * Below is an example of a KSS-documented block.
+ * The markup for this is in app/views/styleguides/.
+ */
+
+/* ---------------------------------------------------------------------------- */
+
+/*
+## Example `.example`
+This is an example.
+
+Styleguide 1.1.
+*/
+
+.example {
+  color: red;
+}

data/lib/generators/templates/styleguide-extras.css

@@ -0,0 +1 @@
+/* Put any extra CSS definitions here that you'll see in your styleguides */

data/lib/generators/templates/styleguide-extras.scss

@@ -0,0 +1 @@
+/* Put any extra CSS definitions here that you'll see in your styleguides */

data/lib/generators/templates/styleguide.html.haml

@@ -0,0 +1,18 @@
+-# This is the layout that the styleguide uses.
+-# The actual body is stored in `:body`, and Styleguide stylesheets
+-# are in `:head`.
+-#
+-# You may customize this by adding your own scripts and styles.
+
+!!! 5
+%html
+  %head
+    %meta{charset: 'utf-8'}
+    %title Styleguides
+    = stylesheet_link_tag 'application'
+    /[if lt IE 9]
+      %script{src: 'http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js'}
+    = yield :head  if content_for?(:head)
+
+%body
+  = yield :body  if content_for?(:body)