styleguide_rails 0.0.1 → 0.1.0
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.
- data/.gitignore +7 -0
- data/Gemfile +4 -0
- data/{MIT-LICENSE → LICENSE} +3 -1
- data/README.md +55 -0
- data/Rakefile +1 -27
- data/illustration/screenshot.png +0 -0
- data/lib/generators/styleguide/styleguide_generator.rb +22 -7
- data/lib/generators/styleguide/templates/{_elements.html.erb → _example_elements.html} +0 -0
- data/lib/generators/styleguide/templates/_widget.html.erb +11 -0
- data/lib/generators/styleguide/templates/_widget_link.html.erb +1 -0
- data/lib/generators/styleguide/templates/index.html.erb +11 -6
- data/lib/generators/styleguide/templates/styleguide.css +201 -0
- data/lib/generators/styleguide/templates/styleguide.html.erb +15 -0
- data/lib/generators/styleguide/templates/styleguide.js +399 -0
- data/lib/generators/styleguide/templates/styleguide_controller.rb +16 -9
- data/lib/styleguide_rails.rb +2 -0
- data/lib/styleguide_rails/version.rb +1 -1
- data/styleguide_rails.gemspec +21 -0
- metadata +22 -16
- data/README.rdoc +0 -17
- data/lib/Gemfile +0 -2
- data/lib/generators/styleguide/templates/show.html.erb +0 -5
data/.gitignore
ADDED
data/Gemfile
ADDED
data/{MIT-LICENSE → LICENSE}
RENAMED
data/README.md
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
Adds a [living style
|
2
|
+
guide](http://24ways.org/2011/front-end-style-guides/) to your Rails
|
3
|
+
application with one command.
|
4
|
+
|
5
|
+
If you don't use a CSS style guide yet, here's why you need to start:
|
6
|
+
|
7
|
+
* __It Makes Testing Easier.__ With all your styles in one place you can easily
|
8
|
+
check for browser bugs, resizing issues, text zoom issues, and printable
|
9
|
+
style. Putting examples of all styles in one place means you don't have to
|
10
|
+
reproduce application states to see error messages etc.
|
11
|
+
* __It Unifies Design.__ Designing shared components all at once fights the
|
12
|
+
temptation to have one-off page styles. This increases the coherence of
|
13
|
+
your design, making it less likely that styles drift between pages. It
|
14
|
+
also encourages cleaner markup.
|
15
|
+
* __It Standardizes Vocabulary.__ Style guides list all your widgets along with
|
16
|
+
names you have chosen. By referring to the guide, your team can settle
|
17
|
+
on common vocabulary for parts of the page. (e.g. "What does my team
|
18
|
+
call this thing on the front page, a slider, a carousel, a flipper, or
|
19
|
+
what?")
|
20
|
+
* __It Promotes Excellent Markup.__ The styleguide contains examples of your
|
21
|
+
desired canonical markup for various elements. Nobody needs to guess how
|
22
|
+
to create a menu or a form. Also your best front-end engineers can write
|
23
|
+
the markup and teach good habits.
|
24
|
+
|
25
|
+
## Usage
|
26
|
+
|
27
|
+
Add this gem to your Rails Gemfile, run `bundle`, and execute the
|
28
|
+
styleguide generator
|
29
|
+
|
30
|
+
$ rails generate styleguide
|
31
|
+
|
32
|
+
That's it, you're done, you have a styleguide available at
|
33
|
+
`http://yourapp.com/styleguide`. If you visit that path you'll see there
|
34
|
+
is an example widget already created:
|
35
|
+
|
36
|
+
<p align="center">
|
37
|
+
<img src="styleguide_rails/raw/master/illustration/screenshot.png" alt="Screenshot" />
|
38
|
+
</p>
|
39
|
+
|
40
|
+
To add a new widget, create a partial in `app/views/styleguide/widgets`
|
41
|
+
and it will appear in the style guide. These partials support templating
|
42
|
+
languages like Haml if you have the gems installed.
|
43
|
+
|
44
|
+
## Credits
|
45
|
+
|
46
|
+
Thanks to project
|
47
|
+
[contributors](https://github.com/begriffs/styleguide_rails/contributors),
|
48
|
+
and to [Adam Braus](https://github.com/ajbraus) for suggesting the
|
49
|
+
idea for this gem.
|
50
|
+
|
51
|
+
## License
|
52
|
+
|
53
|
+
Styleguide_rails is Copyright © 2012 - 2013 Joe Nelson. It is free
|
54
|
+
software, and may be redistributed under the terms specified in the
|
55
|
+
LICENSE file.
|
data/Rakefile
CHANGED
@@ -1,27 +1 @@
|
|
1
|
-
|
2
|
-
begin
|
3
|
-
require 'bundler/setup'
|
4
|
-
rescue LoadError
|
5
|
-
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
-
end
|
7
|
-
begin
|
8
|
-
require 'rdoc/task'
|
9
|
-
rescue LoadError
|
10
|
-
require 'rdoc/rdoc'
|
11
|
-
require 'rake/rdoctask'
|
12
|
-
RDoc::Task = Rake::RDocTask
|
13
|
-
end
|
14
|
-
|
15
|
-
RDoc::Task.new(:rdoc) do |rdoc|
|
16
|
-
rdoc.rdoc_dir = 'rdoc'
|
17
|
-
rdoc.title = 'StyleguideRails'
|
18
|
-
rdoc.options << '--line-numbers'
|
19
|
-
rdoc.rdoc_files.include('README.rdoc')
|
20
|
-
rdoc.rdoc_files.include('lib/**/*.rb')
|
21
|
-
end
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
Bundler::GemHelper.install_tasks
|
27
|
-
|
1
|
+
require "bundler/gem_tasks"
|
Binary file
|
@@ -3,15 +3,30 @@ class StyleguideGenerator < Rails::Generators::Base
|
|
3
3
|
|
4
4
|
def create_controller
|
5
5
|
copy_file 'styleguide_controller.rb', 'app/controllers/styleguide_controller.rb'
|
6
|
-
|
6
|
+
end
|
7
|
+
|
8
|
+
def create_route
|
9
|
+
route "match 'styleguide' => 'styleguide#index' if Rails.env.development?"
|
10
|
+
end
|
11
|
+
|
12
|
+
def create_views
|
13
|
+
copy_file 'styleguide.html.erb', 'app/views/layouts/styleguide.html.erb'
|
14
|
+
|
15
|
+
empty_directory 'app/views/styleguide/widgets'
|
16
|
+
empty_directory 'app/assets/stylesheets/widgets'
|
7
17
|
copy_file 'index.html.erb', 'app/views/styleguide/index.html.erb'
|
8
|
-
copy_file '
|
18
|
+
copy_file '_widget.html.erb', 'app/views/styleguide/_widget.html.erb'
|
19
|
+
copy_file '_widget_link.html.erb', 'app/views/styleguide/_widget_link.html.erb'
|
9
20
|
end
|
10
|
-
|
11
|
-
|
21
|
+
|
22
|
+
def add_private_assets
|
23
|
+
empty_directory 'public/stylesheets'
|
24
|
+
copy_file 'styleguide.css', 'public/stylesheets/styleguide.css'
|
25
|
+
empty_directory 'public/javascripts'
|
26
|
+
copy_file 'styleguide.js', 'public/javascripts/styleguide.js'
|
12
27
|
end
|
13
|
-
|
14
|
-
|
15
|
-
|
28
|
+
|
29
|
+
def supply_basic_guide
|
30
|
+
copy_file '_example_elements.html', 'app/views/styleguide/widgets/_example_elements.html'
|
16
31
|
end
|
17
32
|
end
|
File without changes
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<a name="<%= widget[:name] %>"></a>
|
2
|
+
<dt>
|
3
|
+
<%= %|Widget "#{widget[:name].capitalize}"| %>
|
4
|
+
</dt>
|
5
|
+
<dd class="preview">
|
6
|
+
<%= render :file => widget[:filename] %>
|
7
|
+
</dd>
|
8
|
+
<dd>
|
9
|
+
<div class="location"><%= widget[:filename] %></div>
|
10
|
+
<pre><code class="lang-<%= widget[:lang] %>"><%= widget[:contents] %></code></pre>
|
11
|
+
</dd>
|
@@ -0,0 +1 @@
|
|
1
|
+
<li><a href="#<%= widget[:name] %>"><%= widget[:name].capitalize %></a></li>
|
@@ -1,7 +1,12 @@
|
|
1
|
-
<
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
<nav>
|
2
|
+
<ul>
|
3
|
+
<li><a>Widgets</a>
|
4
|
+
<ul>
|
5
|
+
<%= render :partial => 'widget_link', :collection => @widgets, :as => :widget %>
|
6
|
+
</ul>
|
7
|
+
</li>
|
8
|
+
</ul>
|
9
|
+
</nav>
|
10
|
+
<dl>
|
11
|
+
<%= render :partial => 'widget', :collection => @widgets %>
|
7
12
|
</dl>
|
@@ -0,0 +1,201 @@
|
|
1
|
+
#styleguide_rails {
|
2
|
+
background: white;
|
3
|
+
padding: 0;
|
4
|
+
margin: 0;
|
5
|
+
}
|
6
|
+
#styleguide_rails > nav {
|
7
|
+
font-family: Helvetica, sans-serif;
|
8
|
+
font-size: 18px;
|
9
|
+
line-height: 24px;
|
10
|
+
position: fixed;
|
11
|
+
top: 0;
|
12
|
+
left: 0;
|
13
|
+
right: 0;
|
14
|
+
}
|
15
|
+
#styleguide_rails > nav > ul {
|
16
|
+
width: 100%;
|
17
|
+
line-height: 32px;
|
18
|
+
}
|
19
|
+
#styleguide_rails > nav > ul ul {
|
20
|
+
display: none;
|
21
|
+
}
|
22
|
+
#styleguide_rails > nav > ul > li:hover > ul {
|
23
|
+
display: block;
|
24
|
+
}
|
25
|
+
#styleguide_rails > nav ul {
|
26
|
+
background: #efefef;
|
27
|
+
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
|
28
|
+
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
|
29
|
+
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
|
30
|
+
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
|
31
|
+
padding: 0;
|
32
|
+
margin: 0;
|
33
|
+
list-style: none;
|
34
|
+
position: relative;
|
35
|
+
display: inline-table;
|
36
|
+
}
|
37
|
+
#styleguide_rails > nav > ul > li {
|
38
|
+
float: left;
|
39
|
+
}
|
40
|
+
#styleguide_rails > nav > ul > li:hover {
|
41
|
+
background: #4b545f;
|
42
|
+
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
|
43
|
+
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
|
44
|
+
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
|
45
|
+
}
|
46
|
+
#styleguide_rails > nav > ul > li:hover > a {
|
47
|
+
color: #fff;
|
48
|
+
}
|
49
|
+
#styleguide_rails > nav > ul > li a {
|
50
|
+
display: block;
|
51
|
+
padding: 0 10px;
|
52
|
+
color: #757575;
|
53
|
+
text-decoration: none;
|
54
|
+
}
|
55
|
+
#styleguide_rails > nav > ul ul {
|
56
|
+
background: #5f6975;
|
57
|
+
padding: 0;
|
58
|
+
position: absolute;
|
59
|
+
top: 100%;
|
60
|
+
}
|
61
|
+
#styleguide_rails > nav > ul ul > li {
|
62
|
+
float: none;
|
63
|
+
border-top: 1px solid #6b727c;
|
64
|
+
border-bottom: 1px solid #575f6a;
|
65
|
+
position: relative;
|
66
|
+
}
|
67
|
+
#styleguide_rails > nav > ul ul > li > a {
|
68
|
+
color: #fff;
|
69
|
+
}
|
70
|
+
#styleguide_rails > nav > ul ul > li > a:hover {
|
71
|
+
background: #4b545f;
|
72
|
+
}
|
73
|
+
#styleguide_rails > dl {
|
74
|
+
padding: 0 10px;
|
75
|
+
margin: 0;
|
76
|
+
}
|
77
|
+
#styleguide_rails > dl > dt {
|
78
|
+
margin: 0;
|
79
|
+
padding: 10px 0;
|
80
|
+
display: block;
|
81
|
+
font-size: 120%;
|
82
|
+
text-align: center;
|
83
|
+
color: white;
|
84
|
+
background: #5f6975;
|
85
|
+
}
|
86
|
+
#styleguide_rails > dl > dd {
|
87
|
+
margin: 0;
|
88
|
+
}
|
89
|
+
#styleguide_rails > dl > dd.preview {
|
90
|
+
border: 1px dashed #5f6975;
|
91
|
+
}
|
92
|
+
#styleguide_rails > dl > dd > div.location {
|
93
|
+
font-style: italic;
|
94
|
+
color: #ddd;
|
95
|
+
margin-top: 0.5em;
|
96
|
+
}
|
97
|
+
#styleguide_rails a[name] {
|
98
|
+
display: block;
|
99
|
+
padding-top: 42px;
|
100
|
+
}
|
101
|
+
|
102
|
+
|
103
|
+
/**
|
104
|
+
* prism.js default theme for JavaScript, CSS and HTML
|
105
|
+
* Based on dabblet (http://dabblet.com)
|
106
|
+
* @author Lea Verou
|
107
|
+
*/
|
108
|
+
code[class*="language-"],
|
109
|
+
pre[class*="language-"] {
|
110
|
+
color: black;
|
111
|
+
text-shadow: 0 1px white;
|
112
|
+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
113
|
+
direction: ltr;
|
114
|
+
text-align: left;
|
115
|
+
white-space: pre;
|
116
|
+
word-spacing: normal;
|
117
|
+
|
118
|
+
-moz-tab-size: 4;
|
119
|
+
-o-tab-size: 4;
|
120
|
+
tab-size: 4;
|
121
|
+
|
122
|
+
-webkit-hyphens: none;
|
123
|
+
-moz-hyphens: none;
|
124
|
+
-ms-hyphens: none;
|
125
|
+
hyphens: none;
|
126
|
+
}
|
127
|
+
|
128
|
+
/* Code blocks */
|
129
|
+
pre[class*="language-"] {
|
130
|
+
padding: 1em;
|
131
|
+
margin: 0 0 0.5em 0;
|
132
|
+
overflow: auto;
|
133
|
+
}
|
134
|
+
|
135
|
+
:not(pre) > code[class*="language-"],
|
136
|
+
pre[class*="language-"] {
|
137
|
+
background: #f5f2f0;
|
138
|
+
}
|
139
|
+
|
140
|
+
/* Inline code */
|
141
|
+
:not(pre) > code[class*="language-"] {
|
142
|
+
padding: .1em;
|
143
|
+
border-radius: .3em;
|
144
|
+
}
|
145
|
+
|
146
|
+
.token.comment,
|
147
|
+
.token.prolog,
|
148
|
+
.token.doctype,
|
149
|
+
.token.cdata {
|
150
|
+
color: slategray;
|
151
|
+
}
|
152
|
+
|
153
|
+
.token.punctuation {
|
154
|
+
color: #999;
|
155
|
+
}
|
156
|
+
|
157
|
+
.namespace {
|
158
|
+
opacity: .7;
|
159
|
+
}
|
160
|
+
|
161
|
+
.token.property,
|
162
|
+
.token.tag,
|
163
|
+
.token.boolean,
|
164
|
+
.token.number {
|
165
|
+
color: #905;
|
166
|
+
}
|
167
|
+
|
168
|
+
.token.selector,
|
169
|
+
.token.attr-name,
|
170
|
+
.token.string {
|
171
|
+
color: #690;
|
172
|
+
}
|
173
|
+
|
174
|
+
.token.operator,
|
175
|
+
.token.entity,
|
176
|
+
.token.url,
|
177
|
+
.language-css .token.string,
|
178
|
+
.style .token.string {
|
179
|
+
color: #a67f59;
|
180
|
+
background: hsla(0,0%,100%,.5);
|
181
|
+
}
|
182
|
+
|
183
|
+
.token.atrule,
|
184
|
+
.token.attr-value,
|
185
|
+
.token.keyword {
|
186
|
+
color: #07a;
|
187
|
+
}
|
188
|
+
|
189
|
+
|
190
|
+
.token.regex,
|
191
|
+
.token.important {
|
192
|
+
color: #e90;
|
193
|
+
}
|
194
|
+
|
195
|
+
.token.important {
|
196
|
+
font-weight: bold;
|
197
|
+
}
|
198
|
+
|
199
|
+
.token.entity {
|
200
|
+
cursor: help;
|
201
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Application Style Guide</title>
|
5
|
+
<%= stylesheet_link_tag "application", :media => "all" %>
|
6
|
+
<%= javascript_include_tag "application" %>
|
7
|
+
|
8
|
+
<!-- Bypass asset pipeline to protect other pages -->
|
9
|
+
<script src="/javascripts/styleguide.js" type="text/javascript"></script>
|
10
|
+
<link href="/stylesheets/styleguide.css" media="all" rel="stylesheet" type="text/css" />
|
11
|
+
</head>
|
12
|
+
<body id="styleguide_rails">
|
13
|
+
<%= yield %>
|
14
|
+
</body>
|
15
|
+
</html>
|
@@ -0,0 +1,399 @@
|
|
1
|
+
/**
|
2
|
+
* Prism: Lightweight, robust, elegant syntax highlighting
|
3
|
+
* MIT license http://www.opensource.org/licenses/mit-license.php/
|
4
|
+
* @author Lea Verou http://lea.verou.me
|
5
|
+
*/
|
6
|
+
|
7
|
+
(function(){
|
8
|
+
|
9
|
+
// Private helper vars
|
10
|
+
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
|
11
|
+
|
12
|
+
var _ = self.Prism = {
|
13
|
+
util: {
|
14
|
+
type: function (o) {
|
15
|
+
return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
|
16
|
+
},
|
17
|
+
|
18
|
+
// Deep clone a language definition (e.g. to extend it)
|
19
|
+
clone: function (o) {
|
20
|
+
var type = _.util.type(o);
|
21
|
+
|
22
|
+
switch (type) {
|
23
|
+
case 'Object':
|
24
|
+
var clone = {};
|
25
|
+
|
26
|
+
for (var key in o) {
|
27
|
+
if (o.hasOwnProperty(key)) {
|
28
|
+
clone[key] = _.util.clone(o[key]);
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
return clone;
|
33
|
+
|
34
|
+
case 'Array':
|
35
|
+
return o.slice();
|
36
|
+
}
|
37
|
+
|
38
|
+
return o;
|
39
|
+
}
|
40
|
+
},
|
41
|
+
|
42
|
+
languages: {
|
43
|
+
extend: function (id, redef) {
|
44
|
+
var lang = _.util.clone(_.languages[id]);
|
45
|
+
|
46
|
+
for (var key in redef) {
|
47
|
+
lang[key] = redef[key];
|
48
|
+
}
|
49
|
+
|
50
|
+
return lang;
|
51
|
+
},
|
52
|
+
|
53
|
+
// Insert a token before another token in a language literal
|
54
|
+
insertBefore: function (inside, before, insert, root) {
|
55
|
+
root = root || _.languages;
|
56
|
+
var grammar = root[inside];
|
57
|
+
var ret = {};
|
58
|
+
|
59
|
+
for (var token in grammar) {
|
60
|
+
|
61
|
+
if (grammar.hasOwnProperty(token)) {
|
62
|
+
|
63
|
+
if (token == before) {
|
64
|
+
|
65
|
+
for (var newToken in insert) {
|
66
|
+
|
67
|
+
if (insert.hasOwnProperty(newToken)) {
|
68
|
+
ret[newToken] = insert[newToken];
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
ret[token] = grammar[token];
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
return root[inside] = ret;
|
78
|
+
},
|
79
|
+
|
80
|
+
// Traverse a language definition with Depth First Search
|
81
|
+
DFS: function(o, callback) {
|
82
|
+
for (var i in o) {
|
83
|
+
callback.call(o, i, o[i]);
|
84
|
+
|
85
|
+
if (_.util.type(o) === 'Object') {
|
86
|
+
_.languages.DFS(o[i], callback);
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
},
|
91
|
+
|
92
|
+
highlightAll: function(async, callback) {
|
93
|
+
var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
|
94
|
+
|
95
|
+
for (var i=0, element; element = elements[i++];) {
|
96
|
+
_.highlightElement(element, async === true, callback);
|
97
|
+
}
|
98
|
+
},
|
99
|
+
|
100
|
+
highlightElement: function(element, async, callback) {
|
101
|
+
// Find language
|
102
|
+
var language, grammar, parent = element;
|
103
|
+
|
104
|
+
while (parent && !lang.test(parent.className)) {
|
105
|
+
parent = parent.parentNode;
|
106
|
+
}
|
107
|
+
|
108
|
+
if (parent) {
|
109
|
+
language = (parent.className.match(lang) || [,''])[1];
|
110
|
+
grammar = _.languages[language];
|
111
|
+
}
|
112
|
+
|
113
|
+
if (!grammar) {
|
114
|
+
return;
|
115
|
+
}
|
116
|
+
|
117
|
+
// Set language on the element, if not present
|
118
|
+
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
|
119
|
+
|
120
|
+
// Set language on the parent, for styling
|
121
|
+
parent = element.parentNode;
|
122
|
+
|
123
|
+
if (/pre/i.test(parent.nodeName)) {
|
124
|
+
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
|
125
|
+
}
|
126
|
+
|
127
|
+
var code = element.textContent;
|
128
|
+
|
129
|
+
if(!code) {
|
130
|
+
return;
|
131
|
+
}
|
132
|
+
|
133
|
+
code = code.replace(/&/g, '&').replace(/</g, '<')
|
134
|
+
.replace(/>/g, '>').replace(/\u00a0/g, ' ');
|
135
|
+
//console.time(code.slice(0,50));
|
136
|
+
|
137
|
+
var env = {
|
138
|
+
element: element,
|
139
|
+
language: language,
|
140
|
+
grammar: grammar,
|
141
|
+
code: code
|
142
|
+
};
|
143
|
+
|
144
|
+
_.hooks.run('before-highlight', env);
|
145
|
+
|
146
|
+
if (async && self.Worker) {
|
147
|
+
var worker = new Worker(_.filename);
|
148
|
+
|
149
|
+
worker.onmessage = function(evt) {
|
150
|
+
env.highlightedCode = Token.stringify(JSON.parse(evt.data));
|
151
|
+
env.element.innerHTML = env.highlightedCode;
|
152
|
+
|
153
|
+
callback && callback.call(env.element);
|
154
|
+
//console.timeEnd(code.slice(0,50));
|
155
|
+
_.hooks.run('after-highlight', env);
|
156
|
+
};
|
157
|
+
|
158
|
+
worker.postMessage(JSON.stringify({
|
159
|
+
language: env.language,
|
160
|
+
code: env.code
|
161
|
+
}));
|
162
|
+
}
|
163
|
+
else {
|
164
|
+
env.highlightedCode = _.highlight(env.code, env.grammar)
|
165
|
+
env.element.innerHTML = env.highlightedCode;
|
166
|
+
|
167
|
+
callback && callback.call(element);
|
168
|
+
|
169
|
+
_.hooks.run('after-highlight', env);
|
170
|
+
//console.timeEnd(code.slice(0,50));
|
171
|
+
}
|
172
|
+
},
|
173
|
+
|
174
|
+
highlight: function (text, grammar) {
|
175
|
+
return Token.stringify(_.tokenize(text, grammar));
|
176
|
+
},
|
177
|
+
|
178
|
+
tokenize: function(text, grammar) {
|
179
|
+
var Token = _.Token;
|
180
|
+
|
181
|
+
var strarr = [text];
|
182
|
+
|
183
|
+
var rest = grammar.rest;
|
184
|
+
|
185
|
+
if (rest) {
|
186
|
+
for (var token in rest) {
|
187
|
+
grammar[token] = rest[token];
|
188
|
+
}
|
189
|
+
|
190
|
+
delete grammar.rest;
|
191
|
+
}
|
192
|
+
|
193
|
+
tokenloop: for (var token in grammar) {
|
194
|
+
if(!grammar.hasOwnProperty(token) || !grammar[token]) {
|
195
|
+
continue;
|
196
|
+
}
|
197
|
+
|
198
|
+
var pattern = grammar[token],
|
199
|
+
inside = pattern.inside,
|
200
|
+
lookbehind = !!pattern.lookbehind || 0;
|
201
|
+
|
202
|
+
pattern = pattern.pattern || pattern;
|
203
|
+
|
204
|
+
for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
|
205
|
+
|
206
|
+
var str = strarr[i];
|
207
|
+
|
208
|
+
if (strarr.length > text.length) {
|
209
|
+
// Something went terribly wrong, ABORT, ABORT!
|
210
|
+
break tokenloop;
|
211
|
+
}
|
212
|
+
|
213
|
+
if (str instanceof Token) {
|
214
|
+
continue;
|
215
|
+
}
|
216
|
+
|
217
|
+
pattern.lastIndex = 0;
|
218
|
+
|
219
|
+
var match = pattern.exec(str);
|
220
|
+
|
221
|
+
if (match) {
|
222
|
+
if(lookbehind) {
|
223
|
+
lookbehind = match[1].length;
|
224
|
+
}
|
225
|
+
|
226
|
+
var from = match.index - 1 + lookbehind,
|
227
|
+
match = match[0].slice(lookbehind),
|
228
|
+
len = match.length,
|
229
|
+
to = from + len,
|
230
|
+
before = str.slice(0, from + 1),
|
231
|
+
after = str.slice(to + 1);
|
232
|
+
|
233
|
+
var args = [i, 1];
|
234
|
+
|
235
|
+
if (before) {
|
236
|
+
args.push(before);
|
237
|
+
}
|
238
|
+
|
239
|
+
var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
|
240
|
+
|
241
|
+
args.push(wrapped);
|
242
|
+
|
243
|
+
if (after) {
|
244
|
+
args.push(after);
|
245
|
+
}
|
246
|
+
|
247
|
+
Array.prototype.splice.apply(strarr, args);
|
248
|
+
}
|
249
|
+
}
|
250
|
+
}
|
251
|
+
|
252
|
+
return strarr;
|
253
|
+
},
|
254
|
+
|
255
|
+
hooks: {
|
256
|
+
all: {},
|
257
|
+
|
258
|
+
add: function (name, callback) {
|
259
|
+
var hooks = _.hooks.all;
|
260
|
+
|
261
|
+
hooks[name] = hooks[name] || [];
|
262
|
+
|
263
|
+
hooks[name].push(callback);
|
264
|
+
},
|
265
|
+
|
266
|
+
run: function (name, env) {
|
267
|
+
var callbacks = _.hooks.all[name];
|
268
|
+
|
269
|
+
if (!callbacks || !callbacks.length) {
|
270
|
+
return;
|
271
|
+
}
|
272
|
+
|
273
|
+
for (var i=0, callback; callback = callbacks[i++];) {
|
274
|
+
callback(env);
|
275
|
+
}
|
276
|
+
}
|
277
|
+
}
|
278
|
+
};
|
279
|
+
|
280
|
+
var Token = _.Token = function(type, content) {
|
281
|
+
this.type = type;
|
282
|
+
this.content = content;
|
283
|
+
};
|
284
|
+
|
285
|
+
Token.stringify = function(o) {
|
286
|
+
if (typeof o == 'string') {
|
287
|
+
return o;
|
288
|
+
}
|
289
|
+
|
290
|
+
if (Object.prototype.toString.call(o) == '[object Array]') {
|
291
|
+
for (var i=0; i<o.length; i++) {
|
292
|
+
o[i] = Token.stringify(o[i]);
|
293
|
+
}
|
294
|
+
|
295
|
+
return o.join('');
|
296
|
+
}
|
297
|
+
|
298
|
+
var env = {
|
299
|
+
type: o.type,
|
300
|
+
content: Token.stringify(o.content),
|
301
|
+
tag: 'span',
|
302
|
+
classes: ['token', o.type],
|
303
|
+
attributes: {}
|
304
|
+
};
|
305
|
+
|
306
|
+
if (env.type == 'comment') {
|
307
|
+
env.attributes['spellcheck'] = 'true';
|
308
|
+
}
|
309
|
+
|
310
|
+
_.hooks.run('wrap', env);
|
311
|
+
|
312
|
+
var attributes = '';
|
313
|
+
|
314
|
+
for (var name in env.attributes) {
|
315
|
+
attributes += name + '="' + (env.attributes[name] || '') + '"';
|
316
|
+
}
|
317
|
+
|
318
|
+
return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
|
319
|
+
|
320
|
+
};
|
321
|
+
|
322
|
+
if (!self.document) {
|
323
|
+
// In worker
|
324
|
+
self.addEventListener('message', function(evt) {
|
325
|
+
var message = JSON.parse(evt.data),
|
326
|
+
lang = message.language,
|
327
|
+
code = message.code;
|
328
|
+
|
329
|
+
self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));
|
330
|
+
self.close();
|
331
|
+
}, false);
|
332
|
+
|
333
|
+
return;
|
334
|
+
}
|
335
|
+
|
336
|
+
// Get current script and highlight
|
337
|
+
var script = document.getElementsByTagName('script');
|
338
|
+
|
339
|
+
script = script[script.length - 1];
|
340
|
+
|
341
|
+
if (script) {
|
342
|
+
_.filename = script.src;
|
343
|
+
|
344
|
+
if (document.addEventListener && !script.hasAttribute('data-manual')) {
|
345
|
+
document.addEventListener('DOMContentLoaded', _.highlightAll);
|
346
|
+
}
|
347
|
+
}
|
348
|
+
|
349
|
+
})();;
|
350
|
+
Prism.languages.markup = {
|
351
|
+
'comment': /<!--[\w\W]*?--(>|>)/g,
|
352
|
+
'prolog': /<\?.+?\?>/,
|
353
|
+
'doctype': /<!DOCTYPE.+?>/,
|
354
|
+
'cdata': /<!\[CDATA\[[\w\W]*?]]>/i,
|
355
|
+
'tag': {
|
356
|
+
pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,
|
357
|
+
inside: {
|
358
|
+
'tag': {
|
359
|
+
pattern: /^<\/?[\w:-]+/i,
|
360
|
+
inside: {
|
361
|
+
'punctuation': /^<\/?/,
|
362
|
+
'namespace': /^[\w-]+?:/
|
363
|
+
}
|
364
|
+
},
|
365
|
+
'attr-value': {
|
366
|
+
pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
|
367
|
+
inside: {
|
368
|
+
'punctuation': /=|>|"/g
|
369
|
+
}
|
370
|
+
},
|
371
|
+
'punctuation': /\/?>/g,
|
372
|
+
'attr-name': {
|
373
|
+
pattern: /[\w:-]+/g,
|
374
|
+
inside: {
|
375
|
+
'namespace': /^[\w-]+?:/
|
376
|
+
}
|
377
|
+
}
|
378
|
+
}
|
379
|
+
},
|
380
|
+
'entity': /&#?[\da-z]{1,8};/gi
|
381
|
+
};
|
382
|
+
Prism.languages.haml = {
|
383
|
+
'string': /("|')(\\?.)*?\1/g,
|
384
|
+
'comment': /\/[^\r\n]*(\r?\n|$)/g,
|
385
|
+
'boolean': /\b(true|false)\b/g,
|
386
|
+
'number': /\b-?(0x)?\d*\.?\d+\b/g,
|
387
|
+
'tag': /%[a-zA-Z_0-9]*\b/g,
|
388
|
+
'var': /[@&]\b[a-zA-Z_0-9]*[?!]?\b/g,
|
389
|
+
'operator': /[-+]{1,2}|!|={1,2}|(&){1,2}|\|?\||\?|\*|\//g,
|
390
|
+
'rails': /(form_tag|do|end|link_to|image_tag|content_for)/g,
|
391
|
+
'ignore': /&(lt|gt|amp);/gi
|
392
|
+
};
|
393
|
+
|
394
|
+
// Plugin to make entity title show the real entity, idea by Roman Komarov
|
395
|
+
Prism.hooks.add('wrap', function(env) {
|
396
|
+
if (env.type === 'entity') {
|
397
|
+
env.attributes['title'] = env.content.replace(/&/, '&');
|
398
|
+
}
|
399
|
+
});;
|
@@ -1,14 +1,21 @@
|
|
1
1
|
class StyleguideController < ApplicationController
|
2
|
+
layout "styleguide"
|
3
|
+
|
2
4
|
def index
|
3
|
-
|
4
|
-
Dir.glob('app/views/styleguide/_*.html.erb').each do |mod|
|
5
|
-
name = File.basename(mod, '.html.erb')[1..-1]
|
6
|
-
@modules[name] = File.read mod
|
7
|
-
end
|
8
|
-
end
|
5
|
+
widget_files = Dir.glob('app/views/styleguide/widgets/_*.html*')
|
9
6
|
|
10
|
-
|
11
|
-
|
12
|
-
|
7
|
+
@widgets = widget_files.reduce([]) do |widgets, filename|
|
8
|
+
lang = filename.match(/haml$/) ? 'haml' : 'markup'
|
9
|
+
|
10
|
+
name = File.basename(filename)
|
11
|
+
.sub(/.html.*/, '')
|
12
|
+
.sub(/^_/, '')
|
13
|
+
|
14
|
+
widgets << { :name => name,
|
15
|
+
:filename => filename,
|
16
|
+
:contents => File.read(filename),
|
17
|
+
:lang => lang }
|
18
|
+
widgets
|
19
|
+
end
|
13
20
|
end
|
14
21
|
end
|
data/lib/styleguide_rails.rb
CHANGED
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'styleguide_rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "styleguide_rails"
|
8
|
+
gem.version = StyleguideRails::VERSION
|
9
|
+
gem.authors = ["Joe Nelson", "Adam Braus"]
|
10
|
+
gem.email = ["cred+github@begriffs.com"]
|
11
|
+
gem.description = %q{Add living CSS styleguide to your Rails project}
|
12
|
+
gem.summary = %q{Generates a controller, route, and views for your styleguide}
|
13
|
+
gem.homepage = "http://github.com/begriffs/styleguide_rails"
|
14
|
+
|
15
|
+
gem.files = `git ls-files`.split($/)
|
16
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
17
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
|
20
|
+
gem.add_dependency "rails", ">= 3.0.0"
|
21
|
+
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: styleguide_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date:
|
13
|
+
date: 2013-01-14 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: rails
|
@@ -28,25 +28,32 @@ dependencies:
|
|
28
28
|
- - ! '>='
|
29
29
|
- !ruby/object:Gem::Version
|
30
30
|
version: 3.0.0
|
31
|
-
description:
|
32
|
-
|
33
|
-
|
31
|
+
description: Add living CSS styleguide to your Rails project
|
32
|
+
email:
|
33
|
+
- cred+github@begriffs.com
|
34
34
|
executables: []
|
35
35
|
extensions: []
|
36
36
|
extra_rdoc_files: []
|
37
37
|
files:
|
38
|
-
-
|
38
|
+
- .gitignore
|
39
|
+
- Gemfile
|
40
|
+
- LICENSE
|
41
|
+
- README.md
|
42
|
+
- Rakefile
|
43
|
+
- illustration/screenshot.png
|
44
|
+
- lib/generators/styleguide/USAGE
|
39
45
|
- lib/generators/styleguide/styleguide_generator.rb
|
40
|
-
- lib/generators/styleguide/templates/
|
46
|
+
- lib/generators/styleguide/templates/_example_elements.html
|
47
|
+
- lib/generators/styleguide/templates/_widget.html.erb
|
48
|
+
- lib/generators/styleguide/templates/_widget_link.html.erb
|
41
49
|
- lib/generators/styleguide/templates/index.html.erb
|
42
|
-
- lib/generators/styleguide/templates/
|
50
|
+
- lib/generators/styleguide/templates/styleguide.css
|
51
|
+
- lib/generators/styleguide/templates/styleguide.html.erb
|
52
|
+
- lib/generators/styleguide/templates/styleguide.js
|
43
53
|
- lib/generators/styleguide/templates/styleguide_controller.rb
|
44
|
-
- lib/generators/styleguide/USAGE
|
45
|
-
- lib/styleguide_rails/version.rb
|
46
54
|
- lib/styleguide_rails.rb
|
47
|
-
-
|
48
|
-
-
|
49
|
-
- README.rdoc
|
55
|
+
- lib/styleguide_rails/version.rb
|
56
|
+
- styleguide_rails.gemspec
|
50
57
|
homepage: http://github.com/begriffs/styleguide_rails
|
51
58
|
licenses: []
|
52
59
|
post_install_message:
|
@@ -67,9 +74,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
67
74
|
version: '0'
|
68
75
|
requirements: []
|
69
76
|
rubyforge_project:
|
70
|
-
rubygems_version: 1.8.
|
77
|
+
rubygems_version: 1.8.24
|
71
78
|
signing_key:
|
72
79
|
specification_version: 3
|
73
|
-
summary:
|
80
|
+
summary: Generates a controller, route, and views for your styleguide
|
74
81
|
test_files: []
|
75
|
-
has_rdoc:
|
data/README.rdoc
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
= styleguide_rails
|
2
|
-
|
3
|
-
Adds a `/styleguide` route to your app where you can view HTML
|
4
|
-
snippets and see how CSS affects them. Place the snippets into
|
5
|
-
`app/views/styleguide` as partials and they will appear in the
|
6
|
-
styleguide. To view an individual partial, visit
|
7
|
-
`/styleguide/partial_name`.
|
8
|
-
|
9
|
-
== Usage
|
10
|
-
|
11
|
-
In your Gemfile:
|
12
|
-
|
13
|
-
gem 'styleguide_rails'
|
14
|
-
|
15
|
-
Then bundle and run
|
16
|
-
|
17
|
-
rails g styleguide
|
data/lib/Gemfile
DELETED