styleguide_rails 0.0.1 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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