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 ADDED
@@ -0,0 +1,7 @@
1
+ .bundle/
2
+ log/*.log
3
+ pkg/
4
+ test/dummy/db/*.sqlite3
5
+ test/dummy/log/*.log
6
+ test/dummy/tmp/
7
+ test/dummy/.sass-cache
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in styleguide_rails.gemspec
4
+ gemspec
@@ -1,4 +1,6 @@
1
- Copyright 2012 Joe Nelson
1
+ Copyright (c) 2012 - 2013 Joe Nelson
2
+
3
+ MIT License
2
4
 
3
5
  Permission is hereby granted, free of charge, to any person obtaining
4
6
  a copy of this software and associated documentation files (the
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
- #!/usr/bin/env rake
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
- empty_directory 'app/views/styleguide'
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 'show.html.erb', 'app/views/styleguide/show.html.erb'
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
- def supply_basic_guide
11
- copy_file '_elements.html.erb', 'app/views/styleguide/_elements.html.erb'
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
- def create_routes
14
- route "match 'styleguide' => 'styleguide#index'"
15
- route "match 'styleguide/:name' => 'styleguide#show'"
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
@@ -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
- <dl class="monarchy-styleguide">
2
- <% @modules.each do |name, contents| %>
3
- <dt><%= "Module \"#{name.capitalize}\"" %></dt>
4
- <dd><%= raw contents %></dd>
5
- <dd><pre><%= contents %></pre></dd>
6
- <% end %>
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, '&amp;').replace(/</g, '&lt;')
134
+ .replace(/>/g, '&gt;').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': /&lt;!--[\w\W]*?--(&gt;|&gt;)/g,
352
+ 'prolog': /&lt;\?.+?\?&gt;/,
353
+ 'doctype': /&lt;!DOCTYPE.+?&gt;/,
354
+ 'cdata': /&lt;!\[CDATA\[[\w\W]*?]]&gt;/i,
355
+ 'tag': {
356
+ pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?&gt;/gi,
357
+ inside: {
358
+ 'tag': {
359
+ pattern: /^&lt;\/?[\w:-]+/i,
360
+ inside: {
361
+ 'punctuation': /^&lt;\/?/,
362
+ 'namespace': /^[\w-]+?:/
363
+ }
364
+ },
365
+ 'attr-value': {
366
+ pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
367
+ inside: {
368
+ 'punctuation': /=|&gt;|"/g
369
+ }
370
+ },
371
+ 'punctuation': /\/?&gt;/g,
372
+ 'attr-name': {
373
+ pattern: /[\w:-]+/g,
374
+ inside: {
375
+ 'namespace': /^[\w-]+?:/
376
+ }
377
+ }
378
+ }
379
+ },
380
+ 'entity': /&amp;#?[\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}|(&amp;){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(/&amp;/, '&');
398
+ }
399
+ });;
@@ -1,14 +1,21 @@
1
1
  class StyleguideController < ApplicationController
2
+ layout "styleguide"
3
+
2
4
  def index
3
- @modules = Hash.new
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
- def show
11
- @name = params[:name]
12
- @contents = File.read "app/views/styleguide/_#{@name}.html.erb"
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
@@ -1,2 +1,4 @@
1
+ require "styleguide_rails/version"
2
+
1
3
  module StyleguideRails
2
4
  end
@@ -1,3 +1,3 @@
1
1
  module StyleguideRails
2
- VERSION = "0.0.1"
2
+ VERSION = "0.1.0"
3
3
  end
@@ -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.1
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: 2012-07-15 00:00:00.000000000 Z
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: Provides a custom generator to build a styleguide controller, routes,
32
- and views.
33
- email:
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
- - lib/Gemfile
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/_elements.html.erb
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/show.html.erb
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
- - MIT-LICENSE
48
- - Rakefile
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.23
77
+ rubygems_version: 1.8.24
71
78
  signing_key:
72
79
  specification_version: 3
73
- summary: An easy modular styleguide for rails -- run rails g styleguide
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
@@ -1,2 +0,0 @@
1
- source "http://rubygems.org"
2
- gemspec
@@ -1,5 +0,0 @@
1
- <dl class="monarchy-styleguide">
2
- <dt><%= "Module \"#{@name.capitalize}\"" %></dt>
3
- <dd><%= raw @contents %></dd>
4
- <dd><pre><%= @contents %></pre></dd>
5
- </dl>