livingstyleguide 2.0.0.pre.3 → 2.0.0.pre.4
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.
- checksums.yaml +4 -4
- data/bin/livingstyleguide +1 -1
- data/lib/livingstyleguide/command_line_interface.rb +14 -11
- data/lib/livingstyleguide/commands/colors.rb +16 -16
- data/lib/livingstyleguide/commands/default.rb +1 -1
- data/lib/livingstyleguide/commands/font_example.rb +2 -1
- data/lib/livingstyleguide/commands/full_width.rb +1 -1
- data/lib/livingstyleguide/commands/import_and_use.rb +16 -4
- data/lib/livingstyleguide/commands/layout.rb +22 -20
- data/lib/livingstyleguide/commands/options.rb +9 -9
- data/lib/livingstyleguide/commands/sass.rb +5 -11
- data/lib/livingstyleguide/commands/search_box.rb +6 -3
- data/lib/livingstyleguide/commands/style.rb +1 -1
- data/lib/livingstyleguide/document.rb +64 -41
- data/lib/livingstyleguide/integration/compass.rb +5 -2
- data/lib/livingstyleguide/integration/rails.rb +5 -3
- data/lib/livingstyleguide/integration/sass.rb +1 -1
- data/lib/livingstyleguide/integration/sprockets.rb +9 -4
- data/lib/livingstyleguide/markdown_extensions.rb +20 -11
- data/lib/livingstyleguide/templates/code.html.erb +1 -1
- data/lib/livingstyleguide/templates/example.html.erb +2 -2
- data/lib/livingstyleguide/templates/font-example.html.erb +3 -3
- data/lib/livingstyleguide/templates/javascript.html.erb +1 -1
- data/lib/livingstyleguide/templates/layout.html.erb +32 -38
- data/lib/livingstyleguide/templates/logo.html.erb +1 -1
- data/lib/livingstyleguide/templates/scripts/copy.js.erb +12 -12
- data/lib/livingstyleguide/templates/scripts/copy_code.js.erb +7 -7
- data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb +14 -14
- data/lib/livingstyleguide/templates/scripts/search.js.erb +30 -30
- data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb +23 -23
- data/lib/livingstyleguide/templates/search-box.html.erb +1 -1
- data/lib/livingstyleguide/templates/toggle-code.html.erb +1 -1
- data/lib/livingstyleguide/tilt_template.rb +17 -19
- data/lib/livingstyleguide/version.rb +1 -1
- data/lib/livingstyleguide.rb +12 -2
- data/stylesheets/_livingstyleguide.scss +76 -65
- data/stylesheets/livingstyleguide/_code.scss +51 -51
- data/stylesheets/livingstyleguide/_color-swatches.scss +38 -38
- data/stylesheets/livingstyleguide/_content.scss +73 -73
- data/stylesheets/livingstyleguide/_functions.scss +1 -1
- data/stylesheets/livingstyleguide/_layout.scss +22 -22
- data/stylesheets/livingstyleguide/_reset.scss +1 -1
- data/stylesheets/livingstyleguide/_search-box.scss +14 -14
- data/stylesheets/livingstyleguide/_toggle-code.scss +10 -11
- metadata +21 -6
@@ -1,4 +1,7 @@
|
|
1
1
|
if defined?(Compass)
|
2
|
-
|
3
|
-
|
2
|
+
options = {
|
3
|
+
path: LivingStyleGuide::ROOT_PATH,
|
4
|
+
stylesheets_directory: LivingStyleGuide::SASS_PATH
|
5
|
+
}
|
6
|
+
Compass::Frameworks.register "livingstyleguide", options
|
4
7
|
end
|
@@ -1,11 +1,13 @@
|
|
1
|
-
if defined?(Rails)
|
1
|
+
if defined?(Rails) && defined?(Rails::Railtie)
|
2
2
|
require "rails"
|
3
3
|
class LivingStyleGuideRailtie < Rails::Railtie
|
4
|
-
initializer "living_style_guide.assets" do
|
4
|
+
initializer "living_style_guide.assets" do |app|
|
5
5
|
Rails.application.config.assets.configure do |env|
|
6
6
|
env.register_engine(".lsg", ::LivingStyleGuide::Document)
|
7
7
|
end
|
8
|
-
LivingStyleGuide.default_options[:scss_template] =
|
8
|
+
LivingStyleGuide.default_options[:scss_template] =
|
9
|
+
::Sass::Rails::ScssTemplate
|
10
|
+
app.config.assets.paths << ::LivingStyleGuide::SASS_PATH
|
9
11
|
end
|
10
12
|
end
|
11
13
|
end
|
@@ -1,5 +1,10 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
if defined?(Sprockets)
|
2
|
+
begin
|
3
|
+
require "sprockets"
|
4
|
+
Sprockets.register_engine(".lsg", ::LivingStyleGuide::Document)
|
5
|
+
if Sprockets.respond_to?(:append_path)
|
6
|
+
Sprockets.append_path(::LivingStyleGuide::SASS_PATH)
|
7
|
+
end
|
8
|
+
rescue LoadError
|
9
|
+
end
|
5
10
|
end
|
@@ -14,9 +14,9 @@ module LivingStyleGuide
|
|
14
14
|
}
|
15
15
|
|
16
16
|
class RedcarpetHTML < ::Redcarpet::Render::HTML
|
17
|
-
def initialize(options = {}
|
17
|
+
def initialize(document, options = {})
|
18
18
|
@options = options
|
19
|
-
@options[:prefix] ||= "lsg
|
19
|
+
@options[:prefix] ||= "lsg-"
|
20
20
|
@document = document
|
21
21
|
@header = nil
|
22
22
|
@ids = {}
|
@@ -25,9 +25,11 @@ module LivingStyleGuide
|
|
25
25
|
|
26
26
|
def header(text, header_level)
|
27
27
|
@header = id = slug(text)
|
28
|
-
|
28
|
+
class_names = %w(page-title headline sub-headline sub-sub-headline)
|
29
|
+
class_name = "#{@options[:prefix]}#{class_names[header_level]}"
|
29
30
|
header_level += 1
|
30
|
-
%Q(<h#{header_level} class="#{
|
31
|
+
%Q(<h#{header_level} class="#{class_name}" id="#{id}">) +
|
32
|
+
%Q(<a class="lsg-anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
|
31
33
|
end
|
32
34
|
|
33
35
|
def paragraph(text)
|
@@ -36,11 +38,13 @@ module LivingStyleGuide
|
|
36
38
|
|
37
39
|
def list(contents, list_type)
|
38
40
|
tag_name = "#{list_type.to_s[0, 1]}l"
|
39
|
-
|
41
|
+
class_name = "#{@options[:prefix]}#{list_type}-list"
|
42
|
+
%Q(<#{tag_name} class="#{class_name}">\n#{contents}</#{tag_name}>\n)
|
40
43
|
end
|
41
44
|
|
42
45
|
def list_item(text, list_type)
|
43
|
-
|
46
|
+
class_name = "#{@options[:prefix]}#{list_type}-list-item"
|
47
|
+
%Q(<li class="#{class_name}">#{text.strip}</li>\n)
|
44
48
|
end
|
45
49
|
|
46
50
|
def block_code(code, language)
|
@@ -48,17 +52,22 @@ module LivingStyleGuide
|
|
48
52
|
language = @options[:default_language] if language == :""
|
49
53
|
document = Document.new(livingstyleguide: @document) { code }
|
50
54
|
document.id = document_id
|
51
|
-
document.type = language == :example
|
55
|
+
document.type = if language == :example
|
56
|
+
then @document.defaults[:global][:type]
|
57
|
+
else language
|
58
|
+
end
|
52
59
|
document.template = template_for(language)
|
53
60
|
document.render(@document.scope)
|
54
61
|
end
|
55
62
|
|
56
63
|
def codespan(code)
|
57
64
|
code = ERB::Util.html_escape(code)
|
58
|
-
|
65
|
+
class_name = "#{@options[:prefix]}code-span #{@options[:prefix]}code"
|
66
|
+
%Q(<code class="#{class_name}">#{code}</code>)
|
59
67
|
end
|
60
68
|
|
61
69
|
private
|
70
|
+
|
62
71
|
def slug(text)
|
63
72
|
require "active_support/core_ext/string/inflections"
|
64
73
|
::ActiveSupport::Inflector.parameterize(text, "-")
|
@@ -66,9 +75,10 @@ module LivingStyleGuide
|
|
66
75
|
text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, "-").gsub(/^-|-$/, "")
|
67
76
|
end
|
68
77
|
|
69
|
-
private
|
70
78
|
def document_id
|
71
|
-
|
79
|
+
if @document.file
|
80
|
+
file = File.basename(@document.file, ".lsg").sub(/^_/, "")
|
81
|
+
end
|
72
82
|
id = [file, @header].compact.uniq.join("-")
|
73
83
|
if id != ""
|
74
84
|
@ids[id] ||= 0
|
@@ -77,7 +87,6 @@ module LivingStyleGuide
|
|
77
87
|
end
|
78
88
|
end
|
79
89
|
|
80
|
-
private
|
81
90
|
def template_for(language)
|
82
91
|
language == :example ? :example : :code
|
83
92
|
end
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<section class="<%= classes.join(" ") %>" id="<%= id %>">
|
2
|
-
<div class="lsg
|
2
|
+
<div class="lsg-html">
|
3
3
|
<%= html %>
|
4
4
|
</div>
|
5
|
-
<pre class="lsg
|
5
|
+
<pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
|
6
6
|
</section>
|
@@ -1,6 +1,6 @@
|
|
1
|
-
<div class="lsg
|
2
|
-
<p class="lsg
|
1
|
+
<div class="lsg-font-example">
|
2
|
+
<p class="lsg-font-example-text" style="font: <%= font %>">
|
3
3
|
<%= text %>
|
4
4
|
</p>
|
5
|
-
<pre class="lsg
|
5
|
+
<pre class="lsg-code-block"><code class="lsg-code"><%= font %></code></pre>
|
6
6
|
</div>
|
@@ -1,4 +1,4 @@
|
|
1
1
|
<section class="<%= classes.join(" ") %>" id="<%= id %>">
|
2
2
|
<script><%= html %></script>
|
3
|
-
<pre class="lsg
|
3
|
+
<pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
|
4
4
|
</section>
|
@@ -1,41 +1,35 @@
|
|
1
1
|
<!doctype html>
|
2
2
|
<html id="<%= id %>">
|
3
|
-
|
4
|
-
<
|
5
|
-
<meta
|
6
|
-
<meta content="
|
7
|
-
<meta content="
|
8
|
-
<
|
9
|
-
<
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
<%=
|
14
|
-
</
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
<%=
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
<%
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
<%
|
28
|
-
<
|
29
|
-
<%=
|
30
|
-
</
|
31
|
-
<%
|
32
|
-
|
33
|
-
|
34
|
-
</
|
35
|
-
<% end %>
|
36
|
-
|
37
|
-
<%= footer %>
|
38
|
-
<%= logo %>
|
39
|
-
</body>
|
40
|
-
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta content="ie=edge" http-equiv="x-ua-compatible">
|
6
|
+
<meta content="width=device-width,initial-scale=1" name="viewport">
|
7
|
+
<meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">
|
8
|
+
<title><%= ERB::Util.h(title) %></title>
|
9
|
+
<script>
|
10
|
+
<%= javascript %>
|
11
|
+
</script>
|
12
|
+
<style>
|
13
|
+
<%= css %>
|
14
|
+
</style>
|
15
|
+
<%= head %>
|
16
|
+
</head>
|
17
|
+
<body class="lsg">
|
18
|
+
<%= header %>
|
19
|
+
<% unless before.empty? %>
|
20
|
+
<section class="lsg-before">
|
21
|
+
<%= before %>
|
22
|
+
</section>
|
23
|
+
<% end %>
|
24
|
+
<article class="lsg-container">
|
25
|
+
<%= html %>
|
26
|
+
</article>
|
27
|
+
<% unless after.empty? %>
|
28
|
+
<section class="lsg-after">
|
29
|
+
<%= after %>
|
30
|
+
</section>
|
31
|
+
<% end %>
|
32
|
+
<%= footer %>
|
33
|
+
<%= logo %>
|
34
|
+
</body>
|
41
35
|
</html>
|
@@ -1,24 +1,24 @@
|
|
1
1
|
function selectElementRange(copyElementSelect) {
|
2
|
-
var range = document.createRange()
|
3
|
-
range.selectNode(copyElementSelect)
|
4
|
-
window.getSelection().removeAllRanges()
|
5
|
-
window.getSelection().addRange(range)
|
2
|
+
var range = document.createRange()
|
3
|
+
range.selectNode(copyElementSelect)
|
4
|
+
window.getSelection().removeAllRanges()
|
5
|
+
window.getSelection().addRange(range)
|
6
6
|
|
7
|
-
document.execCommand("copy")
|
7
|
+
document.execCommand("copy")
|
8
8
|
|
9
|
-
if (copyElementSelect.classList.contains("
|
10
|
-
document.body.removeChild(copyElementSelect)
|
9
|
+
if (copyElementSelect.classList.contains("lsg-remove")) {
|
10
|
+
document.body.removeChild(copyElementSelect)
|
11
11
|
}
|
12
12
|
|
13
|
-
window.getSelection().removeAllRanges()
|
13
|
+
window.getSelection().removeAllRanges()
|
14
14
|
}
|
15
15
|
|
16
16
|
function testCopy() {
|
17
17
|
try {
|
18
|
-
document.execCommand("copy")
|
19
|
-
return true
|
18
|
+
document.execCommand("copy")
|
19
|
+
return true
|
20
20
|
}
|
21
|
-
catch(
|
22
|
-
return false
|
21
|
+
catch (error) {
|
22
|
+
return false
|
23
23
|
}
|
24
24
|
}
|
@@ -1,19 +1,19 @@
|
|
1
1
|
document.addEventListener("DOMContentLoaded", function() {
|
2
2
|
if (testCopy()) {
|
3
|
-
var code = document.getElementsByClassName("lsg
|
3
|
+
var code = document.getElementsByClassName("lsg-code")
|
4
4
|
|
5
5
|
for (var i = 0; i < code.length; i++) {
|
6
6
|
var newButton = createButton()
|
7
7
|
code[i].appendChild(newButton)
|
8
8
|
newButton.addEventListener("click", function(event) {
|
9
|
-
selectElementRange(this.parentNode)
|
10
|
-
})
|
9
|
+
selectElementRange(this.parentNode)
|
10
|
+
})
|
11
11
|
}
|
12
12
|
}
|
13
|
-
})
|
13
|
+
})
|
14
14
|
|
15
15
|
function createButton(copyCodeSelect) {
|
16
|
-
var buttonCopy = document.createElement("button")
|
17
|
-
buttonCopy.className = "lsg
|
18
|
-
return buttonCopy
|
16
|
+
var buttonCopy = document.createElement("button")
|
17
|
+
buttonCopy.className = "lsg-button"
|
18
|
+
return buttonCopy
|
19
19
|
}
|
@@ -1,28 +1,28 @@
|
|
1
1
|
document.addEventListener("DOMContentLoaded", function() {
|
2
2
|
if (testCopy()) {
|
3
|
-
var colorSwatches = document.getElementsByClassName("lsg
|
3
|
+
var colorSwatches = document.getElementsByClassName("lsg-color-swatch")
|
4
4
|
for (var i = 0; i < colorSwatches.length; i++) {
|
5
|
-
if (!colorSwatches[i].classList.contains("
|
5
|
+
if (!colorSwatches[i].classList.contains("lsg-empty")) {
|
6
6
|
colorSwatches[i].addEventListener("click", function(event) {
|
7
7
|
if (event.target == this.children[0]) {
|
8
|
-
selectElementRange(createDiv(this.children[0].innerHTML))
|
8
|
+
selectElementRange(createDiv(this.children[0].innerHTML))
|
9
9
|
}
|
10
10
|
else {
|
11
|
-
var copyHexColors = window.getComputedStyle(this, "::after").getPropertyValue("content")
|
12
|
-
copyHexColors = copyHexColors.replace(/'|"/g, "")
|
13
|
-
selectElementRange(createDiv(copyHexColors))
|
11
|
+
var copyHexColors = window.getComputedStyle(this, "::after").getPropertyValue("content")
|
12
|
+
copyHexColors = copyHexColors.replace(/'|"/g, "")
|
13
|
+
selectElementRange(createDiv(copyHexColors))
|
14
14
|
}
|
15
|
-
})
|
15
|
+
})
|
16
16
|
}
|
17
17
|
}
|
18
18
|
}
|
19
|
-
})
|
19
|
+
})
|
20
20
|
|
21
21
|
function createDiv(copyHexColors) {
|
22
|
-
var divCopy = document.createElement("div")
|
23
|
-
divCopy.className = "
|
24
|
-
divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px")
|
25
|
-
divCopy.appendChild(document.createTextNode(copyHexColors))
|
26
|
-
document.body.appendChild(divCopy)
|
27
|
-
return divCopy
|
22
|
+
var divCopy = document.createElement("div")
|
23
|
+
divCopy.className = "lsg-remove"
|
24
|
+
divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px")
|
25
|
+
divCopy.appendChild(document.createTextNode(copyHexColors))
|
26
|
+
document.body.appendChild(divCopy)
|
27
|
+
return divCopy
|
28
28
|
}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
function hasClass(element, cls) {
|
2
|
-
return element.classList.contains(cls)
|
2
|
+
return element.classList.contains(cls)
|
3
3
|
}
|
4
4
|
|
5
5
|
function addMatch(matched, node) {
|
6
6
|
if (node.nodeType !== Node.TEXT_NODE) {
|
7
|
-
if (node.className.match(/lsg
|
8
|
-
matched.push(node)
|
7
|
+
if (node.className.match(/lsg-/)) {
|
8
|
+
matched.push(node)
|
9
9
|
}
|
10
10
|
}
|
11
11
|
}
|
@@ -13,54 +13,54 @@ function addMatch(matched, node) {
|
|
13
13
|
function addNextElement(selection, matched, i) {
|
14
14
|
var j = i + 1;
|
15
15
|
while (j < selection.length) {
|
16
|
-
if (hasClass(selection[j], "lsg
|
16
|
+
if (hasClass(selection[j], "lsg-headline")) {
|
17
17
|
break;
|
18
18
|
}
|
19
|
-
addMatch(matched, selection[j])
|
19
|
+
addMatch(matched, selection[j])
|
20
20
|
j++;
|
21
21
|
}
|
22
22
|
}
|
23
23
|
|
24
24
|
function addPreviousElement(selection, matched, i) {
|
25
|
-
var j = i
|
25
|
+
var j = i
|
26
26
|
while (j >= 0) {
|
27
|
-
addMatch(matched, selection[j])
|
28
|
-
if (hasClass(selection[j], "lsg
|
29
|
-
break
|
27
|
+
addMatch(matched, selection[j])
|
28
|
+
if (hasClass(selection[j], "lsg-headline")) {
|
29
|
+
break
|
30
30
|
}
|
31
|
-
j
|
31
|
+
j--
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
35
35
|
document.addEventListener("DOMContentLoaded", function() {
|
36
36
|
|
37
|
-
document.querySelector(".lsg
|
38
|
-
var searchTerm = this.value
|
37
|
+
document.querySelector(".lsg-search-box").addEventListener("input", function(event) {
|
38
|
+
var searchTerm = this.value
|
39
39
|
|
40
|
-
var selection = document.querySelectorAll(".lsg
|
41
|
-
var regexp = new RegExp(searchTerm, "i")
|
42
|
-
selection = Array.prototype.slice.call(selection)
|
43
|
-
var matched = []
|
44
|
-
var unmatched = []
|
40
|
+
var selection = document.querySelectorAll(".lsg-example, .lsg-color-swatches, .lsg-font-example, .lsg-paragraph, .lsg-unordered-list, .lsg-ordered-list, .lsg-headline, .lsg-sub-headline, .lsg-sub-sub-headline")
|
41
|
+
var regexp = new RegExp(searchTerm, "i")
|
42
|
+
selection = Array.prototype.slice.call(selection)
|
43
|
+
var matched = []
|
44
|
+
var unmatched = []
|
45
45
|
|
46
46
|
for (var i = 0; i < selection.length; i++) {
|
47
47
|
if (selection[i].textContent.match(regexp)) {
|
48
|
-
addMatch(matched, selection[i])
|
49
|
-
addNextElement(selection, matched, i)
|
50
|
-
addPreviousElement(selection, matched, i)
|
51
|
-
}
|
52
|
-
}
|
48
|
+
addMatch(matched, selection[i])
|
49
|
+
addNextElement(selection, matched, i)
|
50
|
+
addPreviousElement(selection, matched, i)
|
51
|
+
}
|
52
|
+
}
|
53
53
|
|
54
54
|
unmatched = selection.filter(function(element) {
|
55
|
-
return matched.indexOf(element) === -1
|
56
|
-
})
|
55
|
+
return matched.indexOf(element) === -1
|
56
|
+
})
|
57
57
|
|
58
58
|
unmatched.map(function(item) {
|
59
|
-
item.style.display = "none"
|
60
|
-
})
|
59
|
+
item.style.display = "none"
|
60
|
+
})
|
61
61
|
|
62
62
|
matched.map(function(item) {
|
63
|
-
item.style.display = "block"
|
64
|
-
})
|
65
|
-
})
|
66
|
-
})
|
63
|
+
item.style.display = "block"
|
64
|
+
})
|
65
|
+
})
|
66
|
+
})
|