livingstyleguide 0.6.0.alpha.2 → 1.0.0.alpha.3

data/lib/livingstyleguide/filters/coffee_script.rb

@@ -0,0 +1,18 @@
+LivingStyleGuide::Example.add_filter :coffee_script do
+  begin
+
+    require 'coffee-script'
+    @syntax = :'coffee-script'
+
+    add_wrapper_class '-lsg-for-javascript'
+
+    pre_processor do |coffee_script|
+      javascript = CoffeeScript.compile(coffee_script)
+      %Q(<script>#{javascript}</script>\n)
+    end
+
+  rescue LoadError
+    raise "Please make sure `gem 'coffee-script'` is added to your Gemfile."
+  end
+end
+

data/lib/livingstyleguide/filters/font_example.rb

@@ -0,0 +1,20 @@
+LivingStyleGuide::Engine.default_options[:font_example] = { text: <<-TEXT }
+  ABCDEFGHIJKLMNOPQRSTUVWXYZ
+  abcdefghijklmnopqrstuvwxyz
+  0123456789
+  !&/()$=@;:,.
+TEXT
+
+LivingStyleGuide::Example.add_filter :font_example do |font|
+  suppress_code_block
+
+  html do |content|
+    %(<div class="livingstyleguide--font-example" style="font: #{font}">\n#{content}\n</div>\n)
+  end
+
+  pre_processor do |content|
+    content = options[:font_example][:text] if content == ''
+    content.strip.gsub(/\n/, "<br>\n")
+  end
+end
+

data/lib/livingstyleguide/filters/full_width.rb

@@ -0,0 +1,4 @@
+LivingStyleGuide::Example.add_filter :full_width do
+  add_wrapper_class '-lsg-has-full-width'
+end
+

data/lib/livingstyleguide/filters/haml.rb

@@ -0,0 +1,16 @@
+LivingStyleGuide::Example.add_filter :haml do
+  begin
+
+    require 'haml'
+    Haml::Options.defaults[:attr_wrapper] = '"'
+    @syntax = :haml
+
+    pre_processor do |haml|
+      Haml::Engine.new(haml).render.strip
+    end
+
+  rescue LoadError
+    raise "Please make sure `gem 'haml'` is added to your Gemfile."
+  end
+end
+

data/lib/livingstyleguide/filters/highlights.rb

@@ -0,0 +1,9 @@
+LivingStyleGuide::CodeBlock.filter_code do |code|
+  code = code.gsub(/^\s*\*\*\*\n(.+?)\n\s*\*\*\*(\n|$)/m, %Q(\n<strong class="livingstyleguide--code-highlight-block">\\1</strong>\n))
+  code = code.gsub(/\*\*\*(.+?)\*\*\*/, %Q(<strong class="livingstyleguide--code-highlight">\\1</strong>))
+end
+
+LivingStyleGuide::Example.filter_before do |code|
+  code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
+end
+

data/lib/livingstyleguide/filters/javascript.rb

@@ -0,0 +1,10 @@
+LivingStyleGuide::Example.add_filter :javascript do
+  @syntax = :javascript
+
+  add_wrapper_class '-lsg-for-javascript'
+
+  pre_processor do |javascript|
+    %Q(<script>#{javascript}</script>\n)
+  end
+end
+

data/lib/livingstyleguide/importer.rb

@@ -5,23 +5,36 @@ class LivingStyleGuide::Importer < Sass::Importers::Filesystem
   end
 
   def find_relative(name, base, options, absolute = false)
-    find_markdown(File.join(File.dirname(base), name))
-    super(name, base, options)
+    @options = options
+    engine = super(name, base, options)
+    find_markdown(options[:filename])
+    engine
   end
 
   def find(name, options)
-    find_markdown(name)
+    @options = options
     super(name, options)
   end
 
+  private
   def find_markdown(sass_filename)
+    files << sass_filename
     glob = "#{sass_filename.sub(/\.s[ac]ss$/, '')}.md"
-    glob.sub!(/(.*)\//, '\\1/{_,}') unless glob =~ /\/_/
-    glob = '{_,}' + glob unless glob =~ /\//
     Dir.glob(glob) do |markdown_filename|
-      LivingStyleGuide.add_markdown File.read(markdown_filename)
+      files << markdown_filename
+      markdown << File.read(markdown_filename)
     end
   end
 
+  private
+  def files
+    @options[:living_style_guide].files
+  end
+
+  private
+  def markdown
+    @options[:living_style_guide].markdown
+  end
+
 end
 

data/lib/livingstyleguide/markdown_extensions.rb

@@ -2,39 +2,26 @@ require 'redcarpet'
 require 'tilt'
 require 'minisyntax'
 require 'erb'
-require 'active_support/core_ext/string/inflections'
 
 module LivingStyleGuide
-  class RedcarpetTemplate < ::Tilt::RedcarpetTemplate::Redcarpet2
-    RENDER_OPTIONS = {
-      :autolink => true,
-      :fenced_code_blocks => true,
-      :tables => true,
-      :strikethrough => true,
-      :space_after_headers => true,
-      :superscript => true
-    }
+  REDCARPET_RENDER_OPTIONS = {
+    autolink: true,
+    fenced_code_blocks: true,
+    tables: true,
+    strikethrough: true,
+    space_after_headers: true,
+    superscript: true
+  }
 
-    def generate_renderer
-      RedcarpetHTML.new(RENDER_OPTIONS)
-    end
-
-    def prepare
-      @engine = ::Redcarpet::Markdown.new(generate_renderer, RENDER_OPTIONS)
-      @output = nil
-    end
+  class RedcarpetHTML < ::Redcarpet::Render::HTML
 
-    def evaluate(context, locals, &block)
-      @context ||= context
+    def initialize(options = {})
+      @options = options
       super
     end
 
-  end
-
-  class RedcarpetHTML < ::Redcarpet::Render::HTML
-
     def header(text, header_level)
-      id = %Q( id="#{::ActiveSupport::Inflector.parameterize(text, '-')}")
+      id = %Q( id="#{slug(text)}")
       klass = %w(page-title headline sub-headline sub-sub-headline)[header_level]
       header_level += 1
       %Q(<h#{header_level} class="livingstyleguide--#{klass}"#{id}>#{text}</h#{header_level}>\n)
@@ -48,16 +35,6 @@ module LivingStyleGuide
           result << %Q(<li class="livingstyleguide--color-swatch $#{variable}">$#{variable}</li>\n)
         end
         result << "</ul>\n"
-      elsif text =~ /^\{\{font-example:(.+)\}\}$/
-        font = $1
-        <<-HTML.gsub('          ', '')
-          <div class="livingstyleguide--font-example" style="font: #{font}">
-            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-            abcdefghijklmnopqrstuvwxyz<br>
-            0123456789<br>
-            !&/()$=@;:,.
-          </div>
-        HTML
       else
         %Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
       end
@@ -73,29 +50,11 @@ module LivingStyleGuide
     end
 
     def block_code(code, language)
-      if %w(example layout-example).include?(language)
-        html = code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
-        %Q(<div class="livingstyleguide--#{language}">\n  #{html}\n</div>) + "\n" + block_code(code, 'html')
-      elsif %w(haml-example haml-layout-example).include?(language)
-        begin
-          type = language[5..-1]
-          require 'haml'
-          Haml::Options.defaults[:attr_wrapper] = '"'
-          haml = code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
-          html = Haml::Engine.new(haml).render.strip
-          %Q(<div class="livingstyleguide--#{type}">\n  #{html}\n</div>) + "\n" + block_code(code, 'haml')
-        rescue LoadError
-          raise "Please make sure `gem 'haml'` is added to your Gemfile."
-        end
-      elsif %w(javascript-example).include?(language)
-        javascript = code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
-        %Q(<script>#{javascript}</script>\n) + block_code(code, 'javascript')
+      language ||= @options[:default_language]
+      if language == 'example'
+        Example.new(code, @options).render
       else
-        code = ERB::Util.html_escape(code).gsub(/&quot;/, '"')
-        code = ::MiniSyntax.highlight(code.strip, language.to_s.strip.to_sym)
-        code.gsub! /^\s*\*\*\*\n(.+?)\n\s*\*\*\*(\n|$)/m, %Q(<strong class="livingstyleguide--code-highlight-block">\\1</strong>)
-        code.gsub! /\*\*\*(.+?)\*\*\*/, %Q(<strong class="livingstyleguide--code-highlight">\\1</strong>)
-        %Q(<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">#{code}</code></pre>)
+        CodeBlock.new(code.strip, language.to_s.strip.to_sym).render
       end
     end
 
@@ -104,8 +63,14 @@ module LivingStyleGuide
       %Q(<code class="livingstyleguide--code-span livingstyleguide--code">#{code}</code>)
     end
 
-  end
+    private
+    def slug(text)
+      require 'active_support/core_ext/string/inflections'
+      ::ActiveSupport::Inflector.parameterize(text, '-')
+    rescue LoadError
+      text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, '-').gsub(/^-|-$/, '')
+    end
 
-  ::Tilt.register RedcarpetTemplate, 'markdown', 'mkd', 'md'
+  end
 end
 

data/lib/livingstyleguide/tilt_template.rb

@@ -11,6 +11,7 @@ module ::Tilt
     end
 
     def evaluate(scope, locals, &block)
+      @scope = scope
       parse_options(data)
       generate_sass
       render_living_style_guide
@@ -25,11 +26,11 @@ module ::Tilt
       options[:template_location].each do |path, short|
         options[:load_paths] << ::LivingStyleGuide::Importer.new(path)
       end
-      options[:filename]           = eval_file
-      options[:line]               = line
-      options[:syntax]             = @options[:syntax]
-      options[:importer]           = LivingStyleGuide::Importer.new('.')
-      options[:living_style_guide] = @options
+      options[:filename]  = eval_file
+      options[:line]      = line
+      options[:syntax]    = @options[:syntax]
+      options[:importer]  = LivingStyleGuide::Importer.new('.')
+      options[:sprockets] = { context: @scope }
       options
     end
 
@@ -52,6 +53,26 @@ module ::Tilt
       ].flatten.join(@options[:syntax] == :sass ? "\n" : ';')
     end
 
+    private
+    def configure_cache
+      return unless @scope.respond_to?(:depend_on)
+      test = /^#{root}/
+      @engine.files.uniq.each do |file|
+        if file =~ test
+          @scope.depend_on file
+        end
+      end
+    end
+
+    private
+    def root
+      if @scope.respond_to?(:environment)
+        @scope.environment.root
+      else
+        File.dirname(@file)
+      end
+    end
+
     private
     def style_variables
       return unless @options.has_key?(:style)
@@ -62,8 +83,10 @@ module ::Tilt
 
     private
     def render_living_style_guide
-      engine = ::Sass::Engine.new(@sass, sass_options)
-      engine.render_living_style_guide
+      @engine = ::LivingStyleGuide::Engine.new(@sass, @options, sass_options)
+      html = @engine.render
+      configure_cache
+      html
     end
   end
 

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "0.6.0.alpha.2"
+  VERSION = "1.0.0.alpha.3"
 end

data/livingstyleguide.gemspec

@@ -22,9 +22,12 @@ Gem::Specification.new do |gem|
   gem.add_dependency 'sass'
   gem.add_dependency 'redcarpet'
   gem.add_dependency 'tilt'
-  gem.add_dependency 'activesupport'
   gem.add_dependency 'thor'
+  gem.add_dependency 'hooks'
 
   gem.add_development_dependency 'rake'
   gem.add_development_dependency 'haml'
+  gem.add_development_dependency 'heredoc_unindent'
+  gem.add_development_dependency 'minitest'
+  gem.add_development_dependency 'coffee-script'
 end

data/stylesheets/_livingstyleguide.scss

@@ -29,7 +29,7 @@ $livingstyleguide--border-radius: 0 !default;
 $livingstyleguide--color: #505050 !default;
 $livingstyleguide--width: 640px !default;
 $livingstyleguide--gap-width: 10px !default;
-$livingstyleguide--layout-example-padding: $livingstyleguide--gap-width !default;
+$livingstyleguide--full-width-padding: $livingstyleguide--gap-width !default;
 
 $livingstyleguide--code-background-color: #505050 !default;
 $livingstyleguide--code-color: white !default;

data/stylesheets/livingstyleguide/_content.scss

@@ -62,17 +62,18 @@
   @include box-sizing(border-box);
   @include border-top-radius($livingstyleguide--border-radius);
 
-  .livingstyleguide--layout-example & {
+  &.-lsg-has-full-width {
+    @extend #{$livingstyleguide--layout-selector} !optional;
+    display: block;
+    height: auto;
     margin: 0 auto;
+    min-height: auto;
+    padding: $livingstyleguide--full-width-padding;
     width: 100%;
     @include border-radius(0);
   }
-}
 
-.livingstyleguide--layout-example {
-  @extend #{$livingstyleguide--layout-selector} !optional;
-  display: block;
-  height: auto;
-  min-height: auto;
-  padding: $livingstyleguide--layout-example-padding;
+  &.-lsg-for-javascript {
+    display: none;
+  }
 }

data/templates/layouts/default.html.erb

@@ -5,21 +5,21 @@
 <meta charset="utf-8">
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
 <meta content="The LivingStyleGuide Gem – http://livingstyleguide.org" name="generator">
-<title><%= h(@title) %></title>
+<title><%= h(title) %></title>
 <script>
 // see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
 for(var e,l='article aside footer header nav section time picture'.split(' ');e=l.pop();document.createElement(e));
 </script>
 <style>
-<%= @css %>
+<%= css %>
 </style>
-<%= @head %>
+<%= head %>
 </head>
 
 <body class="livingstyleguide">
-<%= @header %>
-<%= @html %>
-<%= @footer %>
+<%= header %>
+<%= html %>
+<%= footer %>
 </body>
 
 </html>

data/test/example_test_helper.rb

@@ -0,0 +1,22 @@
+require 'test_helper'
+
+class ExampleTestCase < Minitest::Test
+
+  def setup
+    @class = Class.new(LivingStyleGuide::Example)
+  end
+
+  def assert_render_equals(input, expected_output, options = nil)
+    options ||= LivingStyleGuide::Engine.default_options
+    output = @class.new(input.unindent, options).render
+    assert_equal(normalize(expected_output), normalize(output))
+  end
+
+  def assert_render_match(input, expected_output, options = nil)
+    options ||= LivingStyleGuide::Engine.default_options
+    output = @class.new(input.unindent, options).render
+    assert_match(/#{normalize(expected_output)}/, normalize(output))
+  end
+
+end
+

data/test/fixtures/markdown/code-block-and-example.md

@@ -0,0 +1,8 @@
+~~~
+Normal code block
+~~~
+
+~~~ example
+Example
+~~~
+

data/test/fixtures/markdown/example-with-highlight.md

@@ -1,4 +1,4 @@
-~~~ example
+~~~
 <img class="inline ***example***">
 <img class="inline ***ex-1*** ***ex-2***">
 ~~~

data/test/fixtures/markdown/example.md

@@ -1,4 +1,4 @@
-~~~ example
+~~~
 <button class="button">Test</button>
 ~~~