gkss-rails 0.1.0

data/app/helpers/styleguide_helper.rb

@@ -0,0 +1,127 @@
+# # 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
+
+  # ### kss_markdown
+  # Markdownify some text.
+
+  def kss_markdown(text)
+    text.gsub!(/^\s*\-*=*\s*\n*/, '') # Strip '----' lines
+    lines = text.split("\n")
+
+    # Transform the first line
+    if lines.length > 0
+      lines[0].gsub!(/^#*\s*/, '## ')         # "Hello" => "## Hello"
+      lines[0].gsub!(/\((.*?)\):?$/, '`\1`')  # "Hey (code):" => "Hey `code`"
+    end
+
+    text = lines.join("\n")
+
+    # Markdownify
+    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,144 @@
+-# # 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.
+
+!!! 5
+%html
+  %head
+    %meta{charset: 'utf-8'}
+    %title Styleguides
+    = stylesheet_link_tag styleguide_include_js
+    = javascript_include_tag 'prettify'
+    = javascript_include_tag 'jquery-1.8.0.min'
+    = stylesheet_link_tag 'styleguide'
+    = stylesheet_link_tag 'prettify'
+
+%body
+  %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
+
+  :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');
+        }
+      });
+
+    })();
+

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
+    != kss_markdown(h(section.description)).html_safe
+
+    - 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,4 @@
+Gkss::Engine.routes.draw do
+   root :to => 'styleguides#all'
+   get ':section' => 'styleguides#show'
+end

data/lib/generators/gkss/install_generator.rb

@@ -0,0 +1,15 @@
+require 'rails/generators/base'
+
+module Gkss
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('../../templates', __FILE__)
+    desc 'Gkss Rails Install'
+
+    def install_steps
+      copy_file '1.html.haml', 'app/views/styleguides/1.html.haml'
+      copy_file 'styleguides.yml', 'config/styleguides.yml'
+
+      route "mount Gkss::Engine => '/gkss' 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/styleguides.yml

@@ -0,0 +1,6 @@
+title: "My Site"
+root: "app/assets/stylesheets"
+include_js: "application"
+sections:
+  1: Content
+  2: Typography

data/lib/gkss/engine.rb

@@ -0,0 +1,6 @@
+module Gkss
+  class Engine < Rails::Engine
+    # Same as doing `mount Gkss::Engine => '/stylesheets', as: :gkss`
+    engine_name :gkss
+  end
+end

data/lib/gkss/rails.rb

@@ -0,0 +1 @@
+require File.expand_path('../../gkss', __FILE__)

data/lib/gkss/version.rb

@@ -0,0 +1,3 @@
+module Gkss
+  VERSION = "0.1.0"
+end

data/lib/gkss.rb

@@ -0,0 +1,6 @@
+module Gkss
+end
+
+require File.expand_path('../gkss/version', __FILE__)
+require File.expand_path('../gkss/engine', __FILE__)
+

metadata

@@ -0,0 +1,136 @@
+--- !ruby/object:Gem::Specification
+name: gkss-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- goshan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-03-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: kss
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: ffaker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bluecloth
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: haml
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A drop-in, easy-to-use, gorgeous-by-default Rails plugin you can put
+  into your projects so you can instantly have cute docspec.
+email:
+- goshan.hanqiu@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- Rakefile
+- app/assets/javascripts/jquery-1.8.0.min.js
+- app/assets/javascripts/prettify.js
+- app/assets/stylesheets/prettify.css
+- app/assets/stylesheets/styleguide.sass
+- app/controllers/styleguides_controller.rb
+- app/helpers/styleguide_helper.rb
+- app/views/layouts/styleguide_page.html.haml
+- app/views/styleguides/_block.html.haml
+- app/views/styleguides/_specimen.html.haml
+- app/views/styleguides/_swatch.html.haml
+- app/views/styleguides/all.html.haml
+- config/routes.rb
+- lib/generators/gkss/install_generator.rb
+- lib/generators/templates/1.html.haml
+- lib/generators/templates/styleguides.yml
+- lib/gkss.rb
+- lib/gkss/engine.rb
+- lib/gkss/rails.rb
+- lib/gkss/version.rb
+homepage: https://github.com/goshan/gkss-rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.2
+signing_key: 
+specification_version: 4
+summary: Living style guide based on https://github.com/nadarei/nkss-railspec.
+test_files: []