hologram 0.5.2 → 0.5.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +28 -24
- data/lib/hologram.rb +12 -2
- data/lib/hologram/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 16ebbd01d8753357faa113d708de6db358eb48d5
|
4
|
+
data.tar.gz: 627a707329c2d9c7c180dc1f9be75484d905a177
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0ecc0c2b05e8084d25db8676e223b15079382ec1d280b7d02a47a0a674f0e70b775782cfa3fc694996955244e043eb6b2bc51ab615db29e2ed8350dc5ffa5ab1
|
7
|
+
data.tar.gz: 0592999624d28e95c2e80f0d969082a13fec850b0613a7a39c43920b9f8dd25c3ae606e730d966945a612fe476773d868145dbedf8e36bf818f628f8c3313be6
|
data/README.md
CHANGED
@@ -1,6 +1,10 @@
|
|
1
1
|
# Hologram
|
2
2
|
|
3
|
-
Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.
|
3
|
+
Hologram is a Ruby gem that parses comments in your CSS and helps you turns them into a beautiful style guide.
|
4
|
+
|
5
|
+
There are two steps to building a great style guide: 1.) documenting your css and generating html examples, and 2.) actually styling the output of step 1.
|
6
|
+
|
7
|
+
The hologram gem itself is only concerned with step 1. This means you are free to make your style guide look however you would like. If you don't feel like going through this process yourself you can take a look at the templates in our [example repository](https://github.com/trulia/hologram-example/tree/gh-pages/hologram_assets/doc_assets/css) and use the assets defined there instead.
|
4
8
|
|
5
9
|
## Installation
|
6
10
|
|
@@ -11,7 +15,7 @@ Add this line to your application's Gemfile:
|
|
11
15
|
And then execute:
|
12
16
|
|
13
17
|
$ bundle
|
14
|
-
|
18
|
+
|
15
19
|
If you don't use bundler you can run `gem install hologram`.
|
16
20
|
|
17
21
|
## Usage
|
@@ -21,11 +25,11 @@ There are two things you need to do to start using hologram:
|
|
21
25
|
1. Create a YAML config file for your project
|
22
26
|
|
23
27
|
2. Document yourself some code
|
24
|
-
|
28
|
+
|
25
29
|
### Creating a YAML config file
|
26
30
|
|
27
31
|
Hologram needs a few configuration settings before it can begin to build
|
28
|
-
your documentation for you. Once this is set up you can execute hologram by
|
32
|
+
your documentation for you. Once this is set up you can execute hologram by
|
29
33
|
simply running:
|
30
34
|
|
31
35
|
`hologram path/to/your/config.yml` or (using bundler) `bundle exec hologram path/to/your/config.yml`
|
@@ -41,12 +45,12 @@ Your config file needs to contain the following key/value pairs
|
|
41
45
|
the documentaiton page. This typically includes html fragments (header/footer, etc),
|
42
46
|
styleguide specific CSS, javascript and any images.
|
43
47
|
|
44
|
-
* **custom_markdown**: (optional) this is the filename of a class that extends
|
48
|
+
* **custom_markdown**: (optional) this is the filename of a class that extends
|
45
49
|
RedCarpet::Render::HTML class. Use this for when you need
|
46
50
|
additional classes or html tags for different parts of the page.
|
47
51
|
|
48
52
|
* **dependencies**: a **list** of relative pathes to a folderes containing any dependencies your style guide has.
|
49
|
-
These folders will be copied over into the documentation output directory.
|
53
|
+
These folders will be copied over into the documentation output directory.
|
50
54
|
PUT THE CSS/JS THAT IS ACTUALLY BEING DOCUMENTED HERE
|
51
55
|
|
52
56
|
##### Example config file
|
@@ -59,7 +63,7 @@ PUT THE CSS/JS THAT IS ACTUALLY BEING DOCUMENTED HERE
|
|
59
63
|
|
60
64
|
# The assets needed to build/style the docs (includes header.html, footer.html, etc)
|
61
65
|
documentation_assets: ../hologram_assets
|
62
|
-
|
66
|
+
|
63
67
|
# A custom markdown renderer that extends `RedCarpet::Render::HTML class`
|
64
68
|
custom_markdown: trulia_markdown_renderer.rb
|
65
69
|
|
@@ -72,24 +76,24 @@ PUT THE CSS/JS THAT IS ACTUALLY BEING DOCUMENTED HERE
|
|
72
76
|
|
73
77
|
###Documenting your styles
|
74
78
|
|
75
|
-
Hologram will scan any css/scss/less files within your **source** directory.
|
79
|
+
Hologram will scan any css/scss/less files within your **source** directory.
|
76
80
|
It will look for comments that match the following:
|
77
81
|
|
78
82
|
/*doc
|
79
|
-
---
|
80
|
-
title: Buttons
|
81
|
-
name: button
|
82
|
-
category: Base CSS
|
83
|
+
---
|
84
|
+
title: Buttons
|
85
|
+
name: button
|
86
|
+
category: Base CSS
|
83
87
|
---
|
84
88
|
|
85
89
|
Button styles can be applied to any element. Typically you'll want
|
86
90
|
to use either a `<button>` or an `<a>` element:
|
87
91
|
|
88
|
-
```html_example
|
92
|
+
```html_example
|
89
93
|
<button class="btn btnDefault">Click</button>
|
90
|
-
<a class="btn btnDefault" href="trulia.com">Trulia!</a>
|
94
|
+
<a class="btn btnDefault" href="trulia.com">Trulia!</a>
|
91
95
|
```
|
92
|
-
|
96
|
+
|
93
97
|
If your button is actually a link to another page, please use the
|
94
98
|
`<a>` element, while if your button performs an action, such as
|
95
99
|
submitting a form or triggering some javascript event, then use a
|
@@ -99,7 +103,7 @@ It will look for comments that match the following:
|
|
99
103
|
|
100
104
|
The first section of the comment is a yaml block that defines certain
|
101
105
|
aspects of the this documentation block. The second part is simply
|
102
|
-
markdown as defined by Redcarpet.
|
106
|
+
markdown as defined by Redcarpet.
|
103
107
|
|
104
108
|
####Document YAML section
|
105
109
|
The yaml in the doc block can have any key value pair you deem important
|
@@ -119,21 +123,21 @@ but it specifically looks for the following keys:
|
|
119
123
|
###Documentation Assets
|
120
124
|
|
121
125
|
The documentation assets folder contains the html, css, js and images
|
122
|
-
you'll need for making your style guide look beautiful.
|
126
|
+
you'll need for making your style guide look beautiful.
|
123
127
|
|
124
|
-
Hologram doesn't care too much about to what is in here as it is intended
|
125
|
-
to be custom for your style guide.
|
128
|
+
Hologram doesn't care too much about to what is in here as it is intended
|
129
|
+
to be custom for your style guide.
|
126
130
|
|
127
|
-
However, it does look for two files called header.html and footer.html.
|
128
|
-
These are html fragments that will be used when creating a new category page.
|
131
|
+
However, it does look for two files called header.html and footer.html.
|
132
|
+
These are html fragments that will be used when creating a new category page.
|
129
133
|
`header.html` will be copied to the beginning to the page and `footer.html`
|
130
|
-
will be copied to the bottom of the page. This gives you control of how you
|
131
|
-
will navigate your docs and lets you include any css, disclaimer text, and
|
134
|
+
will be copied to the bottom of the page. This gives you control of how you
|
135
|
+
will navigate your docs and lets you include any css, disclaimer text, and
|
132
136
|
whatever else you need on each page.
|
133
137
|
|
134
138
|
#####Styling Your Code Examples
|
135
139
|
|
136
|
-
Hologram uses [pygments.rb](https://github.com/tmm1/pygments.rb) gem to provide
|
140
|
+
Hologram uses [pygments.rb](https://github.com/tmm1/pygments.rb) gem to provide
|
137
141
|
syntax highlighting for code examples. One of the assets that you probably want
|
138
142
|
to include in your documentation assets folder is a css file that styles the
|
139
143
|
"pygmentized" code examples. We use `github.css` which can be found along with the
|
data/lib/hologram.rb
CHANGED
@@ -103,7 +103,7 @@ module Hologram
|
|
103
103
|
if config['dependencies']
|
104
104
|
config['dependencies'].each do |dir|
|
105
105
|
dirpath = Pathname.new(dir).realpath
|
106
|
-
if
|
106
|
+
if File.directory?("#{dir}")
|
107
107
|
`rm -rf #{output_directory}/#{dirpath.basename}`
|
108
108
|
`cp -R #{dirpath} #{output_directory}/#{dirpath.basename}`
|
109
109
|
end
|
@@ -165,7 +165,13 @@ module Hologram
|
|
165
165
|
yaml_match = /^\s*---\s(.*?)\s---$/m.match(comment_block)
|
166
166
|
return unless yaml_match
|
167
167
|
markdown = comment_block.sub(yaml_match[0], '')
|
168
|
-
|
168
|
+
|
169
|
+
begin
|
170
|
+
config = YAML::load(yaml_match[1])
|
171
|
+
rescue
|
172
|
+
display_error("Could not parse YAML:\n#{yaml_match[1]}")
|
173
|
+
end
|
174
|
+
|
169
175
|
if config['name'].nil?
|
170
176
|
puts "Missing required name config value. This hologram comment will be skipped. \n #{config.inspect}"
|
171
177
|
else
|
@@ -276,7 +282,11 @@ module Hologram
|
|
276
282
|
end
|
277
283
|
|
278
284
|
def display_error(message)
|
285
|
+
if RUBY_VERSION.to_f > 1.8 then
|
279
286
|
puts "(\u{256F}\u{00B0}\u{25A1}\u{00B0}\u{FF09}\u{256F}".green + "\u{FE35} \u{253B}\u{2501}\u{253B} ".yellow + " Build not complete.".red
|
287
|
+
else
|
288
|
+
puts "Build not complete.".red
|
289
|
+
end
|
280
290
|
puts " #{message}"
|
281
291
|
exit 1
|
282
292
|
end
|
data/lib/hologram/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: hologram
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.5.
|
4
|
+
version: 0.5.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- JD Cantrell
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2013-06-
|
12
|
+
date: 2013-06-20 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: redcarpet
|