styleus 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. data/app/assets/fonts/calluna_license.txt +26 -0
  2. data/app/assets/fonts/calluna_regular.eot +0 -0
  3. data/app/assets/fonts/calluna_regular.ttf +0 -0
  4. data/app/assets/fonts/calluna_regular.woff +0 -0
  5. data/app/assets/fonts/raphaelicons-webfont.eot +0 -0
  6. data/app/assets/fonts/raphaelicons-webfont.svg +149 -0
  7. data/app/assets/fonts/raphaelicons-webfont.ttf +0 -0
  8. data/app/assets/fonts/raphaelicons-webfont.woff +0 -0
  9. data/app/assets/fonts/raphaelicons.txt +17 -0
  10. data/app/assets/images/styleus/themes/base/noise.png +0 -0
  11. data/app/assets/images/styleus/themes/base/noise_dark.png +0 -0
  12. data/app/assets/javascripts/modernizr.custom.js +812 -0
  13. data/app/assets/javascripts/namespace.js.coffee +20 -0
  14. data/app/assets/javascripts/styleus/base.js.coffee +3 -0
  15. data/app/assets/javascripts/styleus/behaviors/toggle.js.coffee +12 -0
  16. data/app/assets/javascripts/styleus.js +15 -0
  17. data/app/assets/javascripts/styleus_prerender.js +13 -0
  18. data/app/assets/stylesheets/styleus/themes/base/behaviors/_component.css.scss +11 -0
  19. data/app/assets/stylesheets/styleus/themes/base/behaviors/_positioning.css.scss +10 -0
  20. data/app/assets/stylesheets/styleus/themes/base/behaviors/_text.css.scss +10 -0
  21. data/app/assets/stylesheets/styleus/themes/base/coderay.css.scss +37 -7
  22. data/app/assets/stylesheets/styleus/themes/base/components/_article.css.scss +21 -23
  23. data/app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss +53 -0
  24. data/app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss +31 -0
  25. data/app/assets/stylesheets/styleus/themes/base/fonts/calluna.css.scss +26 -0
  26. data/app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss +22 -0
  27. data/app/assets/stylesheets/styleus/themes/base/layout/main.css.scss +36 -4
  28. data/app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss +6 -1
  29. data/app/assets/stylesheets/styleus/themes/base.css.scss +13 -2
  30. data/app/controllers/components_controller.rb +6 -4
  31. data/app/helpers/path_helper.rb +8 -0
  32. data/app/helpers/styleus_helper.rb +51 -24
  33. data/app/models/styleus/view_component.rb +6 -2
  34. data/app/views/components/index.html.erb +9 -0
  35. data/app/views/components/show.html.erb +1 -0
  36. data/app/views/layouts/_styleus.html.erb +7 -2
  37. data/config/locales/en.yml +10 -0
  38. data/config/routes.rb +1 -1
  39. data/lib/styleus/version.rb +1 -1
  40. metadata +30 -3
  41. data/app/assets/stylesheets/styleus/themes/base/components/_representation_helpers.css.scss +0 -24
@@ -0,0 +1,20 @@
1
+ # From https://github.com/jashkenas/coffee-script/wiki/FAQ
2
+ #
3
+ # Usage:
4
+ #
5
+ # namespace 'Hello.World', (exports) ->
6
+ # # `exports` is where you attach namespace members
7
+ # exports.hi = -> console.log 'Hi World!'
8
+ #
9
+ # namespace 'Say.Hello', (exports, top) ->
10
+ # # `top` is a reference to the main namespace
11
+ # exports.fn = -> top.Hello.World.hi()
12
+ #
13
+ # Say.Hello.fn() # prints 'Hi World!'
14
+ #
15
+ @namespace = (target, name, block) ->
16
+ [target, name, block] = [(if typeof exports isnt 'undefined' then exports else window), arguments...] if arguments.length < 3
17
+ top = target
18
+ target = target[item] or= {} for item in name.split '.'
19
+ block target, top
20
+
@@ -0,0 +1,3 @@
1
+ jQuery($(document).ready ->
2
+ styleus.toggle.install()
3
+ )
@@ -0,0 +1,12 @@
1
+ namespace 'styleus.toggle', (exports) ->
2
+ config = exports.config =
3
+ toggleSelector: 'toggle'
4
+
5
+ exports.install = (root) ->
6
+ $root = $(root or document)
7
+ $root.on 'click', "[data-#{config.toggleSelector}]", (event) ->
8
+ event.preventDefault()
9
+ link = $(event.target)
10
+ target = $root.find(link.data(config.toggleSelector))
11
+ target.toggleClass('enabled') if target
12
+ false
@@ -0,0 +1,15 @@
1
+ // This is a manifest file that'll be compiled into application.js, which will include all the files
2
+ // listed below.
3
+ //
4
+ // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
+ // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6
+ //
7
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
+ // the compiled file.
9
+ //
10
+ // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
11
+ // GO AFTER THE REQUIRES BELOW.
12
+ //
13
+ //= require namespace
14
+ //= require_tree ./styleus/behaviors
15
+ //= require ./styleus/base
@@ -0,0 +1,13 @@
1
+ // This is a manifest file that'll be compiled into application.js, which will include all the files
2
+ // listed below.
3
+ //
4
+ // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
+ // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6
+ //
7
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
+ // the compiled file.
9
+ //
10
+ // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
11
+ // GO AFTER THE REQUIRES BELOW.
12
+ //
13
+ //= require modernizr.custom
@@ -0,0 +1,11 @@
1
+ @mixin component {
2
+ // easier width determination for components
3
+ @include box-sizing(border-box);
4
+ // each component should be the positioning
5
+ // relative for included elements
6
+ @include positioned(relative);
7
+ // each component should be side-effect free,
8
+ // so included elements should not leave the
9
+ // component context.
10
+ overflow: hidden;
11
+ }
@@ -0,0 +1,10 @@
1
+ // default positioning for
2
+ @mixin positioned($type) {
3
+ position: $type;
4
+ top: 0; left: 0;
5
+ }
6
+
7
+ @mixin floating($direction) {
8
+ @include component;
9
+ float: $direction;
10
+ }
@@ -0,0 +1,10 @@
1
+ @mixin ambient-font {
2
+ font-family: 'Calluna-Regular';
3
+ color: $soft-text;
4
+ }
5
+
6
+ @mixin ambient-headline {
7
+ @include ambient-font;
8
+ font-size: 1.2em;
9
+ font-weight: bold;
10
+ }
@@ -1,18 +1,48 @@
1
- .CodeRay {
1
+ @import "compass/css3/user-interface";
2
2
 
3
- background-color: #2B2B2B;
4
- font-family: 'Courier New', 'Terminal', monospace;
3
+ .CodeRay {
4
+ background-color: #fff;
5
+ font-family: 'Monaco', 'Courier New', 'Terminal', monospace;
5
6
  color: #fff;
6
- padding: 3px 5px;
7
7
  overflow: auto;
8
8
  font-size: 14px;
9
9
  line-height: 1.1em;
10
+
10
11
  pre {
11
12
  margin: 0px;
12
13
  padding: 0px;
13
14
  }
14
15
 
15
- .tag, .attribute-name { color: #E8BF6A; }
16
- .string, .content { color: #A5C261; }
17
- .comment { color: #BC9458; }
16
+ tr td {
17
+ padding: 0.5em;
18
+ }
19
+
20
+ .tag, .attribute-name, .keyword { color: #1c02ff; }
21
+ .string, .content { color: #26B31A; }
22
+ .code { color: #000; }
23
+ .symbol { color: #f00; }
24
+ .comment { color: #0066FF; }
25
+
26
+ .line-numbers {
27
+ @include user-select(none);
28
+ background-color: #e3e3e3;
29
+ text-align: right;
30
+ color: #888;
31
+ display: block;
32
+ width: 2em;
33
+ padding-right: 0.3em;
34
+ }
35
+
36
+ .line-numbers a {
37
+ color: #888;
38
+ text-decoration: none;
39
+ }
40
+
41
+ //.line-numbers a:target { color: blue; }
42
+ //.line-numbers .highlighted { color: red; }
43
+ //.line-numbers .highlighted a { color: red; }
44
+ //span.line-numbers { padding: 0px 4px; }
45
+ //.line { display: block; float: left; width: 100%; }
46
+ //.code { width: 100%; }
47
+
18
48
  }
@@ -1,20 +1,3 @@
1
- @mixin component {
2
- overflow: hidden;
3
- position: relative;
4
- top: 0; left: 0;
5
- }
6
-
7
- @mixin ambient-font {
8
- font-family: 'Didact Gothic';
9
- color: $soft-text;
10
- }
11
-
12
- @mixin ambient-headline {
13
- @include ambient-font;
14
- font-size: 1.2em;
15
- font-weight: bold;
16
- }
17
-
18
1
  @mixin article-side-padding {
19
2
  @include box-sizing(border-box);
20
3
  padding-left: 1em;
@@ -25,6 +8,7 @@
25
8
  @include border-radius(3px);
26
9
  @include box-shadow(0 2px 3px 0 #cdcdcd);
27
10
  @include component;
11
+ @include default-side-margin;
28
12
  background: $content_background;
29
13
  margin-bottom: 1em;
30
14
  min-height: 3em;
@@ -35,22 +19,36 @@
35
19
  @include article-side-padding;
36
20
  margin-bottom: 0.5em;
37
21
  text-align: right;
22
+ color: #ccc;
38
23
  }
39
24
 
40
25
  .__sg_component, .CodeRay, .__code_note {
41
26
  @include article-side-padding;
42
27
  }
43
28
 
29
+ .__sg_component {
30
+ padding-top: 0.3em;
31
+ padding-bottom: 1em;
32
+ }
33
+
44
34
  .__code_note {
35
+ @include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
36
+ @include border-radius(6px 0 0 0);
45
37
  @include ambient-font;
46
- text-align: right;
47
- margin-top: 0.5em;
48
- margin-bottom: 0.3em;
38
+ border-top: 1px solid #cacaca;
39
+ border-bottom: 1px solid #999;
40
+ text-align: center;
41
+ //margin-top: 0.5em;
42
+ line-height: 1.5em;
49
43
  }
50
44
 
51
45
  .CodeRay {
52
46
  @include border-radius(0 0 3px 3px);
53
- padding-top: 1em;
54
- padding-bottom: 1em;
55
47
  }
56
- }
48
+ }
49
+
50
+ // hide highligthed code for default, if js is enabled
51
+ .js {
52
+ [data-subject*=representation] { display: none; }
53
+ [data-subject*=representation].enabled { display: block; }
54
+ }
@@ -0,0 +1,53 @@
1
+ @mixin default-index-alignment {
2
+ max-width: 25%;
3
+ text-align: right;
4
+ }
5
+
6
+ .__component_index {
7
+ @include single-box-shadow(#111, 0, -0.5em, 5em, 1em, inset);
8
+ @include default-side-padding;
9
+ background: $hard_contrast_area asset-url('styleus/themes/base/noise_dark.png', image);
10
+ padding-top: 2em;
11
+ padding-bottom: 2em;
12
+
13
+ h3 {
14
+ @include default-index-alignment;
15
+ font-family: 'Calluna-Regular';
16
+ color: #bb9b1d;
17
+ font-size: 1.2em;
18
+ letter-spacing: 0.12em;
19
+ font-weight: thin;
20
+ text-transform: capitalize;
21
+ margin-bottom: 0.5em;
22
+ border-bottom: 1px dashed #bb9b1d;
23
+ }
24
+
25
+ ul {
26
+ @include default-index-alignment;
27
+
28
+ li {
29
+ text-align: right;
30
+ margin-bottom: 0.3em;
31
+
32
+ a:link, a:visited, a:hover, a:active {
33
+ font-family: 'Calluna-Regular';
34
+ letter-spacing: 0.12em;
35
+ color: #ccc;
36
+ text-decoration: none;
37
+ position: relative;
38
+ top: 0; left: 0;
39
+
40
+ &:hover:after {
41
+ content: '';
42
+ display: block;
43
+ width: 9999px;
44
+ height: 0.8em;
45
+ position: absolute;
46
+ right: -9999px - 5;
47
+ top: 0;
48
+ border-bottom: 1px dashed #bb9b1d;
49
+ }
50
+ }
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,31 @@
1
+ // icon base option bar for an article,
2
+ // to provide some icon based links, for
3
+ // each article.
4
+ nav.__option_bar {
5
+ @include component;
6
+ @include default-side-margin;
7
+ margin-top: 1em;
8
+ margin-bottom: 0.2em;
9
+
10
+ ul {
11
+ li {
12
+ @include component;
13
+ @include floating(right);
14
+ width: 35px;
15
+ height: 33px;
16
+ padding-top: 3px;
17
+ text-align: center;
18
+ // last element in line, cause it is floated right
19
+ &:first-of-type {
20
+ @include border-radius(0 16px 16px 0);
21
+ width: 33px;
22
+ }
23
+
24
+ &:last-of-type {
25
+ @include border-radius(16px 0 0 16px);
26
+ width: 33px;
27
+ background-position: -2px;
28
+ }
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,26 @@
1
+ /* @license
2
+ * MyFonts Webfont Build ID 2427055, 2012-12-09T11:36:08-0500
3
+ *
4
+ * The fonts listed in this notice are subject to the End User License
5
+ * Agreement(s) entered into by the website owner. All other parties are
6
+ * explicitly restricted from using the Licensed Webfonts(s).
7
+ *
8
+ * You may obtain a valid license at the URLs below.
9
+ *
10
+ * Webfont: Calluna Regular by exljbris
11
+ * URL: http://www.myfonts.com/fonts/exljbris/calluna/regular/
12
+ * Copyright: &#x00A9; 2009 exljbris Font Foundry. All rights reserved.
13
+ * Licensed pageviews: Unlimited
14
+ *
15
+ *
16
+ * License: http://www.myfonts.com/viewlicense?type=web&buildid=2427055
17
+ *
18
+ * © 2012 Bitstream Inc
19
+ */
20
+
21
+
22
+ @font-face {
23
+ font-family: 'Calluna-Regular';
24
+ src: asset-url('calluna_regular.eot', font);
25
+ src: asset-url('calluna_regular.eot#iefix', font) format('embedded-opentype'), asset-url('calluna_regular.woff', font) format('woff'), asset-url('calluna_regular.ttf', font) format('truetype');
26
+ }
@@ -0,0 +1,22 @@
1
+ @font-face {
2
+ font-family: 'RaphaelIcons';
3
+ src: asset-url('raphaelicons-webfont.eot', font);
4
+ src: local('☺'), asset-url('raphaelicons-webfont.woff', font) format('woff'), asset-url('raphaelicons-webfont.ttf', font) format('truetype'), asset-url('raphaelicons-webfont.svg', font) format('svg');
5
+ font-weight: normal;
6
+ font-style: normal;
7
+ }
8
+
9
+ .icon {
10
+ font-weight: normal;
11
+ font-style: normal;
12
+ line-height: normal;
13
+ font-family: 'RaphaelIcons';
14
+ color: black;
15
+ font-size: 1.5em;
16
+ position: relative;
17
+ top: 0.1em;
18
+ }
19
+
20
+ a:link, a:visited, a:hover, a:active {
21
+ &.icon { text-decoration: none; }
22
+ }
@@ -1,15 +1,47 @@
1
- body { background: $main_background; }
1
+ body { background: $main_background asset-url('styleus/themes/base/noise.png', image); }
2
+
3
+ @mixin default-side-padding {
4
+ padding-left: 2em;
5
+ padding-right: 2em;
6
+ }
7
+
8
+ @mixin default-side-margin {
9
+ margin-left: 2em;
10
+ margin-right: 2em;
11
+ }
2
12
 
3
13
  .__styleus_wrapper {
4
14
  @include box-sizing(border-box);
5
- padding: 3em 1em 1em 4em;
15
+ @include component;
16
+
17
+ > header {
18
+ @include default-side-padding;
19
+ padding-top: 2em;
20
+ padding-bottom: 0em;
6
21
 
7
- header {
8
22
  h1 {
9
23
  font-size: 5em;
10
24
  font-family: "Oleo Script";
11
25
  margin-bottom: 0.2em;
12
- color: #332717;
26
+ color: $hard_contrast_font;
27
+ }
28
+
29
+ a:link, a:visited, a:hover, a:active {
30
+ @include floating(right);
31
+ float: right;
32
+ text-decoration: none;
33
+ font-size: 2em;
34
+ font-family: 'Calluna-Regular';
35
+ text-transform: none;
36
+ font-weight: bold;
37
+ opacity: 0.4;
38
+ color: #111;
39
+
40
+ .icon {
41
+ position: relative;
42
+ top: 0.2em; left: 0.1em;
43
+ opacity: 0.3;
44
+ }
13
45
  }
14
46
  }
15
47
  }
@@ -4,4 +4,9 @@ $soft_content_background: #ece8d6;
4
4
 
5
5
  // soft text is used for example in articles,
6
6
  // to provide an ambient headline.
7
- $soft_text: #999388;
7
+ $soft_text: #473a3a;
8
+
9
+ // used for headlines and ares, which should
10
+ // be really in foreground.
11
+ $hard_contrast_font: #332717;
12
+ $hard_contrast_area: #2d2315;
@@ -1,11 +1,22 @@
1
1
  @import url(http://fonts.googleapis.com/css?family=Oleo+Script:700);
2
- @import url(http://fonts.googleapis.com/css?family=Didact+Gothic);
3
2
 
4
3
  @import "compass";
5
4
  @import "compass/reset";
6
5
  @import "compass/css3";
6
+ @import "compass/css3/user-interface";
7
+
8
+ @import "base/fonts/raphael";
9
+ @import "base/fonts/calluna";
7
10
 
8
11
  @import 'base/settings/colors';
12
+
13
+ @import 'base/behaviors/text';
14
+ @import 'base/behaviors/positioning';
15
+ @import 'base/behaviors/component';
16
+
9
17
  @import 'base/layout/main';
10
18
 
11
- @import 'base/components/article';
19
+
20
+ @import 'base/components/article';
21
+ @import 'base/components/option_bar';
22
+ @import 'base/components/component_index';
@@ -1,6 +1,8 @@
1
1
  class ComponentsController < ApplicationController
2
2
  layout 'components'
3
3
 
4
+ helper_method :components_category, :components_category?
5
+
4
6
  def index
5
7
  render_for_components
6
8
  end
@@ -12,18 +14,18 @@ class ComponentsController < ApplicationController
12
14
  private
13
15
 
14
16
  def render_for_components
15
- if components?
16
- render "components/#{components}/#{params[:action]}"
17
+ if components_category?
18
+ render "components/#{components_category}/#{params[:action]}"
17
19
  else
18
20
  render
19
21
  end
20
22
  end
21
23
 
22
- def components
24
+ def components_category
23
25
  params[:components]
24
26
  end
25
27
 
26
- def components?
28
+ def components_category?
27
29
  !!params[:components]
28
30
  end
29
31
  end
@@ -0,0 +1,8 @@
1
+ module PathHelper
2
+ def component_path(component)
3
+ components = params[:components]
4
+ return super(component) unless components
5
+
6
+ send("#{components.singularize}_path".to_sym, component.id) if components
7
+ end
8
+ end
@@ -6,48 +6,60 @@ module StyleusHelper
6
6
  wrap_component component
7
7
  end
8
8
 
9
- component_menu.concat(_joined_component_list)
9
+ component_index(components_category).concat(_joined_component_list)
10
10
  end
11
11
 
12
-
13
12
  def wrap_component(component)
14
- _styleus_article_wrap(headline: component.headline, anchor_id: component.id) do
15
- styleus_partials(component.partial_path)
13
+ article = _styleus_article_wrap(headline: component.headline, id: component.id) do
14
+ styleus_partials(component.partial_path, helper: component.helper?)
16
15
  end
16
+ option_bar(component).concat article
17
17
  end
18
18
 
19
- def styleus_partials(partial_path)
20
- sample_template = _styleus_representation_wrap(class: '__boxed') do
21
- render partial: "#{partial_path}_sample"
22
- end
19
+ def styleus_partials(partial_path, options = { })
20
+ sample_template = _styleus_representation_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
23
21
 
24
- plain_template = _coderay_highlight_wrap("#{partial_path}.html.erb") do
25
- render partial: "#{partial_path}"
26
- end
22
+ plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
27
23
 
28
- sample_template.concat(plain_template)
24
+ helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
25
+
26
+ sample_template.concat(plain_template).concat(helper_template || safe_empty)
29
27
  end
30
28
 
31
- def component_menu
32
- return if @components.empty?
33
- content_tag 'nav' do
29
+ def option_bar(component)
30
+ content_tag 'nav', class: '__option_bar' do
34
31
  content_tag 'ul' do
32
+ html_area = content_tag('li') { link_to t('icons.html'), component_path(component), title: t('links.titles.html'), class: 'icon', data: { toggle: "##{component.id} [data-subject=html-representation]" } }
33
+ helper_area = content_tag('li') { link_to t('icons.helper'), component_path(component), title: t('links.titles.helper'), class: 'icon', data: { toggle: "##{component.id} [data-subject=ruby-representation]" } } if component.helper?
34
+ presentation_area = content_tag('li') { link_to t('icons.expand_all'), component_path(component), title: t('links.titles.expand_all'), class: 'icon', data: { toggle: "##{component.id} [data-subject*=representation]" } }
35
+
36
+ html_area.concat(helper_area || safe_empty).concat(presentation_area)
37
+ end
38
+ end
39
+ end
40
+
41
+ def component_index(headline)
42
+ return if @components.empty?
43
+ content_tag 'nav', class: "__component_index" do
44
+ menu_entries = content_tag 'ul' do
35
45
  content_tag_for(:li, @components) do |component|
36
46
  link_to component.headline, anchor: component.id
37
47
  end
38
48
  end
49
+ content_tag('h3', headline).concat menu_entries
39
50
  end
51
+
40
52
  end
41
53
 
42
54
  def _styleus_article_wrap(options = { }, &block)
43
55
  captured_block = capture(&block)
44
56
 
45
- content_tag('article', class: '__sg_article', id: options[:anchor_id]) do
46
- content = ''
57
+ content_tag('article', class: '__sg_article', id: options[:id]) do
58
+ content = safe_empty
47
59
  headline = options[:headline]
48
60
  content.concat(content_tag('h3', headline)) if headline
49
61
  content.concat(captured_block)
50
- content.html_safe
62
+ content
51
63
  end
52
64
  end
53
65
 
@@ -62,17 +74,32 @@ module StyleusHelper
62
74
  end
63
75
  end
64
76
 
65
- def _coderay_highlight_wrap(note = nil, &block)
66
- captured_block = capture(&block)
67
- code_block = CodeRay.scan(captured_block.to_s, :html)
68
77
 
69
- note_tag = note ? content_tag('p', note, class: '__code_note') : ''
78
+ def _html_representation(note = nil, &block)
79
+ _coderay_highlight_wrap(note, type: :html, &block)
80
+ end
81
+
82
+ def _helper_representation(&block)
83
+ _coderay_highlight_wrap('Rails Helper', type: :ruby, &block)
84
+ end
85
+
86
+ def _coderay_highlight_wrap(note = nil, options = { type: :html }, &block)
87
+ captured_block = capture(&block)
88
+ code_block = CodeRay.scan(captured_block.to_s, options[:type])
89
+
90
+ note_tag = note ? content_tag('p', note, class: '__code_note') : safe_empty
70
91
 
71
- highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
72
- highlighted_code.html_safe
92
+ highlighted_code = "#{note_tag}#{code_block.div(:css => :class, line_numbers: :table)}"
93
+ content_tag('div', data: { subject: "#{options[:type]}-representation" }) do
94
+ highlighted_code.html_safe
95
+ end
73
96
  end
74
97
 
75
98
  def _joined_component_list
76
99
  @component_list.join.html_safe
77
100
  end
101
+
102
+ def safe_empty
103
+ ''.html_safe
104
+ end
78
105
  end
@@ -1,12 +1,16 @@
1
1
  module Styleus
2
2
  class ViewComponent < Styleus::Base
3
- with_attributes :headline, :partial_path
3
+ with_attributes :headline, :partial_path, :helper
4
4
 
5
5
  # id is used as anchor id in the anchor menu,
6
6
  # so it has to be a uid.
7
7
  # TODO: make sure the uid-ness :)
8
8
  def id
9
- headline.underscore
9
+ headline.underscore.gsub(/ /, '_')
10
+ end
11
+
12
+ def helper?
13
+ !!helper
10
14
  end
11
15
 
12
16
  class << self
@@ -0,0 +1,9 @@
1
+ <div class="content_with_list">
2
+ <nav class="__component_index">
3
+ <h3>Components</h3>
4
+ <ul>
5
+ <li><a href="/components/containers">Container Components</a></li>
6
+ <li><a href="/components/forms">Form Components</a></li>
7
+ </ul>
8
+ </nav>
9
+ </div>
@@ -0,0 +1 @@
1
+