Skip to content

Instantly share code, notes, and snippets.

@jdcantrell
Last active August 29, 2015 14:01
Show Gist options
  • Save jdcantrell/b0ad9a6bcbfc2551713f to your computer and use it in GitHub Desktop.
Save jdcantrell/b0ad9a6bcbfc2551713f to your computer and use it in GitHub Desktop.
Example plugin for Hologram. This generates the needed files to run csscritic against your style examples.
class CssTestGenerator < Hologram::Plugin
attr :output_dir, :tests
HTML_HEADER = <<-eos
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/build/css/screen.css">
</head>
<body class="pam">
eos
HTML_FOOTER = "\n\n</body>\n</html>"
CODE_REGEX = /^\s*```html_example(.*?)\s*```/m
def initialize(config, args)
@name = 'css-test'
@tests = []
super(config, args)
if self.is_active?
@output_dir = setup_dir(config)
end
end
def plugin(text, block, file)
write_test(block.config['name'], [text])
return ''
end
def block(comment_block, file, has_plugin)
#We create tests based of html_examples if a comment has the test
#config and no plugin block
if comment_block.config.has_key?('test') and !has_plugin
tests = comment_block.markdown.scan(CODE_REGEX)
write_test(comment_block.config['name'], tests.flatten) unless tests.empty?
end
end
def finalize(pages)
puts "Tests can be found in #{@output_dir}"
end
private
def write_test(name, content)
test_name = "#{name}.html"
fh = File.open("#{@output_dir}/#{test_name}", 'w')
fh.write(HTML_HEADER)
for fragment in content
fh.write(fragment)
end
fh.write(HTML_FOOTER)
fh.close
@tests.push(test_name)
end
def setup_dir(config)
destination = config['destination'] + '/../tests/'
FileUtils.mkdir_p(destination)
return Pathname.new(destination).realpath
end
end
/*doc
---
title: Buttons
name: button
category: Base CSS
author: Derek Reynolds
test: true
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnDefault" href="http://www.trulia.com/">Trulia</a>
```
If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.
##Button Sizes
There are three 3 sizes for buttons: Large, medium (default)
and small. Simply apply the size modifier class for the desired size.
There are two other additional modifiers - `btnFullWidth` and `btnActive`. If the
names are not self-explanatory see the examples below.
Button | Modifier Class
--------------------------------------------------------------------- | -----------------
<button class="btn btnDefault btnLrg">Large</button> | `btn btnDefault btnLrg`
<button class="btn btnDefault">Default</button> | `btn btnDefault`
<button class="btn btnDefault btnSml">Small</button> | `btn btnDefault btnSml`
<button class="btn btnDefault btnFullWidth">Full width</button> | `btn btnDefault btnFullWidth`
<button class="btn btnDefault btnActive">Active Button State</button> | `btn btnDefault btnActive`
[[[plugin:css-test
<button class="btn btnDefault btnLrg">Large</button>
<button class="btn btnDefault">Default</button>
<button class="btn btnDefault btnSml">Small</button>
<button class="btn btnDefault btnFullWidth">Full width</button>
<button class="btn btnDefault btnActive">Active Button State</button>
]]]
*/
@jdcantrell
Copy link
Author

This will cause the contents in the [[[plugin:css-test ]]] block to be copied to tests/button.html a spec runner for css critic can then be generated for all the tests (not part of this code).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment