sculptor 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 53e8cbfeb036c6778345d27140c48fe33de84313
-  data.tar.gz: d0ba017f0282cde1b887b3c8568397bc82072e0b
+  metadata.gz: f3b5bb332b14e11ff38c18e9a9ee530360edc3eb
+  data.tar.gz: da50068e1234a39d1d885ef1347d1e8a35afc7e9
 SHA512:
-  metadata.gz: deaac2bbe47a7abd27dbf2cbdfe32accadc9bc5e377bf853fc696ea6257d4286355b05d8280294191ffe1034cd181c91dac61524f67309b65af78d5eee79a81e
-  data.tar.gz: 13b5e33a624c4114765b2e06a7fa4c77960e929ea2bdc002bbfae1ac8f3df8106c3672903039051e01c20589b73f311d2016db99a2ae2d7a691a5d746af611ad
+  metadata.gz: b77001619758502baff4d35b4bb52468df23a57a70f36054d411becbc58c577f3278570a25ea6a31727db5581b2040275e69dfe584d8eb8f0066178b13e03779
+  data.tar.gz: ac245d0271ccf2d7bf639f55c7fc0e682bd3b0bdf0f21e8d1b2aab043844b4a32aa7810176c2468a10f1c450f64cd73f43b5c152bcfeac4b1bbee35f784b9ff8

data/README.md

@@ -4,21 +4,108 @@ Tool to create style guides and prototype web apps.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+```
+$ gem install sculptor
+```
 
-    gem 'sculptor'
+## Usage
 
-And then execute:
+Sculptor extends Middleman so all Middleman commands can also be used.
 
-    $ bundle
+### Initiate new project
 
-Or install it yourself as:
+Fetches and installs dependencies and creates project skeleton.
 
-    $ gem install sculptor
+```
+sculptor init project-name
+```
 
-## Usage
+Aliases: `i`, `new`, `n`.
+
+When finished run `bower install` (`npm install -g bower` if bower is not installed) in project directory to install client-side dependencies.
+
+### Create new model
+
+In project root directory run:
+
+```
+sculptor create model-name
+```
+
+Alias `c`.
+
+Models are sub-project which are contained in directories.
+Several similar modules can be created in one directory:
+
+```
+sculptor c model-name/variant
+```
+
+If no variant is specified the initial variant is created with the same name as directory
+
+An index file is generated for ech directory.
+
+When createing a new model its path is shown and the following questions asked:
+
+- **Title:** (optional)- title for the model created
+- **Description:** (optional) - model description
+- **Stylesheet:** (optional) - stylesheet file name, created in the model directory and automatically included in the model
+- **Use iframe?** (`y`/`n` default `n`) - whether to encapsulate the model in iframe or render directly on page (to prevent style leaking)
+- **Include data?** (`y`/`n` default `n`) - whether to include YAML file for model mock data
+
+### Running test server
+
+Runs development server with LiveReload.
+
+```
+sculptor server
+```
+
+Running `sculptor` without any parameters is aliased to `sculptor server`.
+
+### Building the gallery
+
+Generates static version of project in `build` directory.
+
+```
+sculptor build
+```
+
+The build can be distributed/viewed in standalone mode.
+
+On OSX running `build/launch.command` afterwards will run Python's SimpleHTTPServer on port 8000 and open browser with project.
+
+
+## Sculptor template helpers
+
+Sculptor is using Slim templates internally but should work with other templates supported by Middleman in projects.
+
+### Model helpers
+
+* `model`
+  - `title`
+  - `description`
+  - `pretty` {boolean}
+    whether to try to reformat the HTML (e.g. if remote HTML is minified)
+  - `css` - CSS selector to extract from the remote page. If specific element is required it can be selected by providing `#<0-based index>` at the end of selector separated by space. e.g. `img #0` will select the first image.
+  - `data` - local data that can be injected in a local component (partial with `.component.slim` extension)
+  - `source_type` {string} default `html`
+    type of source code used for code highlighting
+* `model_iframe`
+* `model_source`
+
+### Resource helpers
+* `include_stylesheets`
+* `include_stylesheet`
+* `include_javascripts`
+* `relative_dir`
+* `resource_file`
+* `resource_dir`
+* `subpages_for`
+* `append_class`
 
-TODO: Write usage instructions here
+### Data helpers
+* `load_data`
 
 ## Contributing
 

data/features/create.feature

@@ -10,6 +10,8 @@ Feature: Run `create` command
     Then I hit enter
     And I wait for output to contain "Stylesheet"
     Then I hit enter
+    And I wait for output to contain "Use iframe?"
+    Then I type "n"
     And I wait for output to contain "Include data?"
     Then I type "n"
     And the exit status should be 0
@@ -24,6 +26,8 @@ Feature: Run `create` command
     Then I type "My model description"
     And I wait for output to contain "Stylesheet"
     Then I type "styles"
+    And I wait for output to contain "Use iframe?"
+    Then I type "n"
     And I wait for output to contain "Include data?"
     Then I type "y"
     And the exit status should be 0

data/lib/sculptor/cli/create.rb

@@ -16,7 +16,10 @@ module Sculptor::CLI
 
     desc 'create NAME', 'Create new model NAME'
     def create(name)
-      model_path = "source/#{name}"
+
+      dir = Dir.pwd.match(/\/source$/) ? "." : "source"
+
+      model_path = "#{dir}/#{name}"
 
       say(set_color("Creating model: ", :yellow) + set_color(model_path, :white, :bold))
 
@@ -27,6 +30,8 @@ module Sculptor::CLI
       @title = options[:title] || ask('Title: ')
       @description = options[:desc] || ask('Description: ')
       @stylesheet = ask('Stylesheet: ')
+      @iframe = yes?('Use iframe?')
+
       @dir = is_subdir ? name.split('/')[0..-2].join('/') : name
 
       @has_data = if yes?('Include data?')

data/lib/sculptor/extensions/model.rb

@@ -7,48 +7,118 @@ class Middleman::Extensions::Model < ::Middleman::Extension
   end
 
   helpers do
-    # Requires one of `&block` or `url + selector`
-    # Parameters:
+    # Requires either `&block` or `location`
+    # `location` - string with remote location to fetch the HTML from.
+    # Options:
     # * `title` (optional) - Model title
     # * `description` (optional) - Model description
-    # * `component_url` (optional) - Model URL
-    # * `component_selector` (required if `url` is provided)
+    # * `css` (optional, defaults to `body`) - element(s) with CSS selector
+    #       to extract from the page. If a particular element is required it can
+    #       be requested by providing 0-based index of the list of matches.
+    #       e.g. `img #0`
     # * `&block` (optional)
-    def model(options={}, &block)
-      [:title, :description].each { |k| options[k] ||= nil }
-
+    def model(location=nil, options={}, &block)
       if block_given?
         html = capture_html(&block)
         metadata = options
-      elsif options[:component]
-        component_path = "components/#{options[:component]}"
-        resource = sitemap.find_resource_by_path("#{component_path}.html")
-        metadata = resource.metadata.page
-        html = resource.render
-      elsif options[:component_url] && options[:component_selector]
-        metadata = options
-        doc = Nokogiri::XML(open(options[:component_url]), &:noblanks)
-        result = doc.css(options[:component_selector])
-        if result.empty?
-          raise "Selector `#{options[:component_selector]}` not found in remote location`#{options[:component_url]}`"
+      elsif location
+        # Remote location
+        if location.start_with?('http')
+          result = grab_remote(location, options[:css], options)
+          metadata = options
+          html = result.to_html
+        # Assume local path
+        else
+          resource = sitemap.find_resource_by_path(relative_dir(current_page.path, location).to_s)
+          raise "Included model at `#{location}` was not found" unless resource
+          metadata = resource.metadata.page
+
+          # Hack: inject local data that can be provided as parameter
+          # Provided under `data.page` in partials (.component)
+          resource.add_metadata({ page: options[:data] })
+
+          html = resource.render
         end
-        html = result.to_xml
       else
-        raise "Model `#{options[:title]}`: No `component` of HTML block was given"
+        raise "Model `#{options[:title]}`: `url` or HTML block is missing"
       end
 
       options.reverse_merge!(metadata.symbolize_keys!)
-      options[:html] = html
 
-      options[:source_code] = html unless options.has_key? :source_code
+      options[:title] = options[:title] || data.page.title
+      options[:description] = options[:description] || data.page.description
+
+      current_page.add_metadata({ page: { iframe: options[:iframe] || false }})
+
+      options[:html] = html
+      options[:source_code] = html
       options[:source_type] ||= 'html'
 
       partial('partials/glyptotheque/model', locals: options)
     end
 
+    def model_iframe(location=nil, options={}, &block)
+      options[:iframe] = true
+      model(location, options, &block)
+    end
+
     def model_source(type, &block)
       source_code = capture_html(&block)
       partial('partials/glyptotheque/model-source', locals: { source_type: type, source_code: source_code })
     end
+
+    private
+
+    def grab_remote(url, css, options)
+      puts "Fetching from #{url}"
+
+      css ||= 'body'
+
+      selector_index_pair = css.split(/\s+#(\d+)$/)
+
+      if options[:pretty] == true
+        doc = Nokogiri::XML(open(url), &:noblanks)
+      else
+        doc = Nokogiri::HTML(open(url), &:noblanks)
+      end
+
+      result = doc.css(selector_index_pair[0])
+      puts "Matching CSS: `#{selector_index_pair[0]}` (found #{pluralize(result.count, 'element')})"
+
+      # Select element with specified index e.g. `.selector #1`
+      if selector_index_pair[1]
+        puts "Select index #{selector_index_pair[1].to_i} from the list"
+        result = result[selector_index_pair[1].to_i]
+      end
+
+      @root_url = "#{URI(url).scheme}://#{URI(url).host}/"
+
+      if result.class == Nokogiri::XML::NodeSet
+        result.css('[src]').map do |e|
+          e.set_attribute('src', parse_relative_url(url, e.attr('src')))
+        end
+      elsif result.class == Nokogiri::XML::Element
+        result.set_attribute('src', parse_relative_url(url, result.attr('src'))) if result.attr('src')
+      end
+
+      if !result || result.is_a?(Array) && result.empty?
+        raise "Selector `#{selector_index_pair[0]}`#{selector_index_pair[1] ? '(index: ' + selector_index_pair[1] + ')': ''} not found at remote location`#{url}`"
+      end
+
+      return result
+    end
+
+    def parse_relative_url(url, path)
+      is_root = path.match(/^\/[^\/].*/)
+      if is_root
+        path.sub(/^\/(.*)/, @root_url + $1)
+      elsif path.match(/^\.{1,2}\//)
+        relative_dir(url, path).to_s
+      elsif path.match(/^\/\//)
+        "#{URI(url).scheme}:#{path}"
+      else
+        path
+      end
+    end
   end
 end

data/lib/sculptor/extensions/resource_helpers.rb

@@ -9,7 +9,8 @@ class Middleman::Extensions::ResourceHelpers < ::Middleman::Extension
 
     def include_stylesheet(stylesheet)
       return if stylesheet.empty?
-      stylesheet_link_tag(relative_dir(current_page.path, stylesheet)) + "\n"
+      path = stylesheet.start_with?('http') ? '' : current_page.path
+      stylesheet_link_tag(relative_dir(path, stylesheet)) + "\n"
     end
 
     def include_javascripts(javascripts)
@@ -46,7 +47,7 @@ class Middleman::Extensions::ResourceHelpers < ::Middleman::Extension
         resources = resources.reject {|r| r.directory_index? } # Exclude all directory indexes
       end
 
-      resources.reject {|r| r.path.end_with? ("-full#{r.ext}")} # Ignore proxied '-full' mode pages
+      resources.reject {|r| r.path.end_with? ("-standalone#{r.ext}")} # Ignore proxied '-standalone' mode pages
     end
 
     # Use in layouts, in templates either Frontmatter or this method can be used

data/lib/sculptor/templates/glyptotheque/config.tt

@@ -4,9 +4,9 @@
 
 # With alternative layout
 page '/**', :layout => 'glyptotheque'
-page '/*-full.html', :layout => 'layout'
+page '/*-standalone.html', :layout => 'standalone'
 # With no layout
-page "/components/**", :layout => false
+page "*.component", :layout => false
 page "/partials/*", :layout => false
 page '*.css', :layout => false
 page '*.js', :layout => false
@@ -21,7 +21,7 @@ page '*.js', :layout => false
 
 ready do
   subpages_for('/', exclude_indexes: true).each do |r|
-    proxy "#{r.path.sub(r.ext, '')}-full.html", r.path, locals: { standalone: true }
+    proxy "#{r.path.sub(r.ext, '')}-standalone.html", r.path
   end
 end
 
@@ -82,10 +82,11 @@ activate :data_loaders
 activate :resource_helpers
 activate :syntax, css_class: 'codehilite'
 
+Slim::Engine.set_default_options :pretty => true
+
 # Development-secific configuration
 configure :development do
   activate :livereload
-  Slim::Engine.set_default_options :pretty => true
 end
 
 # Build-specific configuration

data/lib/sculptor/templates/glyptotheque/source/assets/js/glyptotheque.js

@@ -1,3 +1,13 @@
 //= require_tree ./glyptotheque
 
 angular.module('glyptotheque', ['directives', 'controllers']);
+
+function resizeIframe(obj) {
+  var doc = obj.contentDocument
+  var height = Math.max(
+      doc.body.scrollHeight, doc.documentElement.scrollHeight,
+      doc.body.offsetHeight, doc.documentElement.offsetHeight,
+      doc.body.clientHeight, doc.documentElement.clientHeight
+  )
+  obj.style.height = height + 'px';
+}

data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model.scss

@@ -13,6 +13,7 @@
     position: relative;
     padding: 10px 20px;
     margin-bottom: 2px;
+    min-height: 40px;
 
     h3 {
       font-weight: 400;
@@ -49,14 +50,21 @@
 
   > .glypto-model-stage {
     background: lighten($light-grey, 9);
-    padding: 15px;
+    padding: 10px;
 
-    > figure {
+    > figure,
+    > iframe {
+      @include box-sizing(content-box);
       margin: 0;
-      padding: 5px;
       border-radius: 3px;
       border: 1px dotted rgba(0,0,0,.13);
       background: white;
+      display: block;
+    }
+
+    > figure {
+      @include clearfix;
+      padding: 5px;
     }
 
     ._component {
@@ -87,8 +95,7 @@
     box-shadow: inset 0 1px darken($light-grey, 5);
 
     > header {
-      padding: 8px 0;
-      margin: 0 20px;
+      padding: 8px 20px;
     }
 
     ._toggle {
@@ -130,13 +137,17 @@
     }
 
     pre {
-      border-top: 1px solid darken($light-grey, 3);
       font: 12px/1.4 Menlo, monospace;
       padding: 10px 20px;
       margin: 0;
+      white-space: pre-wrap;
     }
 
     &.__expanded {
+      > header {
+        border-bottom: 1px solid darken($light-grey, 3);
+      }
+
       > ._container {
         max-height: 20rem;
       }

data/lib/sculptor/templates/glyptotheque/source/assets/styles/main.scss

@@ -9,6 +9,6 @@
   }
 }
 
-.glypto-model-stage.m-standalone {
+body.glypto-model-stage {
   padding: 1rem;
 }

data/lib/sculptor/templates/glyptotheque/source/layouts/layout.slim

@@ -7,8 +7,9 @@ html ng-app=(yield_content(:ng_app))
     = stylesheet_link_tag 'main'
     = stylesheet_link_tag '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'
     = yield_content :styles
-    = include_stylesheets(current_page.data.stylesheets) if current_page.data.stylesheets
-    = include_stylesheet(current_page.data.stylesheet) if current_page.data.stylesheet
+    - unless current_page.metadata.page[:iframe]
+      = include_stylesheets(current_page.data.stylesheets) if current_page.data.stylesheets
+      = include_stylesheet(current_page.data.stylesheet) if current_page.data.stylesheet
 
   body class="#{yield_content(:body_class)}"
     = yield

data/lib/sculptor/templates/glyptotheque/source/layouts/standalone.slim

@@ -0,0 +1,22 @@
+doctype html
+html
+  head
+    meta charset='utf-8'
+    title = current_page.data.title || yield_content(:page_title) || resource_file(current_page)
+    meta name='viewport' content='width=device-width'
+    = yield_content :styles
+    = include_stylesheets(current_page.data.stylesheets) if current_page.data.stylesheets
+    = include_stylesheet(current_page.data.stylesheet) if current_page.data.stylesheet
+    css:
+      body {
+        padding: 5px;
+        margin: 0;
+      }
+
+
+  body class="#{yield_content(:body_class)}"
+    = yield
+
+    = yield_content :javascripts
+    = include_javascripts current_page.data.javascripts if current_page.data.javascripts
+    = yield_content :post_body

data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-index.slim

@@ -1,11 +1,14 @@
-- subpages_for(dir, exclude_indexes: true).each do |r|
+- subpages_for(current_page.url, exclude_indexes: true).each do |r|
 
-  - if r.data.stylesheet
-    - content_for :styles, include_stylesheet(r.data.stylesheet)
-  - elsif r.data.stylesheets
-    - content_for :styles, include_stylesheets(r.data.stylesheets)
+  - current_page.add_metadata({ page: { title: r.data.title, local_url: r.url, iframe: r.metadata.page[:iframe] } })
+
+  - unless current_page.metadata.page[:iframe]
+    - if r.data.stylesheet
+      - content_for :styles, include_stylesheet(r.data.stylesheet)
+    - elsif r.data.stylesheets
+      - content_for :styles, include_stylesheets(r.data.stylesheets)
 
   - if r.data.javascripts
     - content_for :javascripts, include_javascripts(r.data.javascripts)
 
-  = partial r.url, locals: { title: r.data.title, description: r.data.description, url: r.url }
+  = partial r.url

data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model.slim

@@ -1,24 +1,28 @@
-article.glypto-model
-  - if locals[:standalone]
-    section.glypto-model-stage.m-standalone
-      = html
-  - else
-    - if locals[:title] || locals[:description]
-      header
-        - if locals[:title]
-          h3._title
-            - if locals[:url]
-              = link_to title, url
-            - else
-              = title
-        - if locals[:description]
-          p._description = description
+- local_url = current_page.metadata.page[:local_url]
+- title = current_page.metadata.page[:title] || locals[:title]
 
-        - url = locals[:url] ? locals[:url] : current_page.url
-        ._standalone = link_to url.sub('.html', '-full.html'), target: '_blank' do
-          i.fa.fa-external-link title="Standalone version"
+- if resource_file(current_page).match(/-standalone$/)
+  = html
+- else
+  article.glypto-model
+    header
+      - if locals[:title]
+        h3._title
+          - if local_url
+            = link_to title, local_url
+          - else
+            = title
+      - if locals[:description]
+        p._description = description
+
+      - url = local_url || current_page.url
+      ._standalone = link_to url.sub('.html', '-standalone.html'), target: '_blank' do
+        i.fa.fa-external-link title="Standalone version"
 
     section.glypto-model-stage
-      figure = html
+      - if current_page.metadata.page.iframe
+        iframe src="#{url.sub('.html', '-standalone.html')}" height="0" width="100%" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'
+      - else
+        figure = html
 
     = model_source(source_type) { source_code }

data/lib/sculptor/templates/model/template.tt

@@ -1,7 +1,6 @@
 ---
 <%- unless @title.empty? -%>
-title: >
-  <%= @title %>
+title: <%= @title %>
 <%- end -%>
 <%- unless @description.empty? -%>
 description: >
@@ -12,23 +11,21 @@ stylesheet: <%= @stylesheet %>
 <%- end -%>
 ---
 
-- title ||= current_page.data.title
-- description ||= current_page.data.description
-
 <%- if @has_data -%>
 - data = load_data('<%= @model_name %>.yaml')
 <%- end -%>
 
-= model title: title,
-  description: description,
-  standalone: locals[:standalone],
-  url: locals[:url] do
-  <%- if @has_data %>
-    table
-      - data.keys.each do |k|
-        tr
-          th = k
-          td = data[k]
-  <%- else -%>
-    p Component HTML code here
-  <%- end -%>
+<%- if @iframe -%>
+= model_iframe
+<%- else -%>
+= model
+<%- end -%>
+<%- if @has_data -%>
+  table
+    - data.keys.each do |k|
+      tr
+        th = k
+        td = data[k]
+<%- else -%>
+  p Component HTML code here
+<%- end -%>

data/lib/sculptor/version.rb

@@ -1,3 +1,3 @@
 module Sculptor
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/sculptor.gemspec

@@ -27,7 +27,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "fivemat", "1.2.1"
   spec.add_development_dependency "guard-rspec"
   spec.add_development_dependency "guard-cucumber"
-  spec.add_development_dependency "pry-plus"
+  spec.add_development_dependency "pry"
 
   spec.add_dependency "middleman-core", [">= 3.3", "< 4.0"]
   spec.add_dependency "thor", [">= 0.15.2", "< 2.0"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sculptor
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Tyom Semonov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-02 00:00:00.000000000 Z
+date: 2014-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -137,7 +137,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: pry-plus
+  name: pry
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '>='
@@ -267,6 +267,7 @@ files:
 - lib/sculptor/templates/glyptotheque/source/index.html.slim
 - lib/sculptor/templates/glyptotheque/source/layouts/glyptotheque.slim
 - lib/sculptor/templates/glyptotheque/source/layouts/layout.slim
+- lib/sculptor/templates/glyptotheque/source/layouts/standalone.slim
 - lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-index.slim
 - lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-source.slim
 - lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model.slim
@@ -305,4 +306,3 @@ test_files:
 - features/create.feature
 - features/step_definitions/custom.rb
 - features/support/setup.rb
-has_rdoc: