jekyll-terminal 0.1.1 → 0.1.2
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/lib/jekyll-terminal.rb +16 -41
- data/lib/terminal.scss +89 -105
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 47825132a59ceecefc74aecafe6def440797ee7e
|
|
4
|
+
data.tar.gz: 29fc0e5fba160d30bbee3468a153de95ac821e4d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 71d6629242ae9a15e810cf9bd2b2233f76a13b0f93ade7cb69de7556755625acce2720a290e1f9bd124c9abff94e0db571c771667ad2632fab3bf5ac6c36429e
|
|
7
|
+
data.tar.gz: 2046ac2dd95c33be5136d656383b385cec2c3b7e35a7e4cae6d8fd6a437137e5b53de37f9b9429b41fe02efc8f64da122d7cd6597eea1cf3a88c8e4ae3758425
|
data/lib/jekyll-terminal.rb
CHANGED
|
@@ -60,58 +60,33 @@ module Jekyll
|
|
|
60
60
|
site = context.registers[:site]
|
|
61
61
|
terminal_config = site.config[:terminal] || {}
|
|
62
62
|
tag_name = terminal_config[:tag_name] || 'h3'
|
|
63
|
-
|
|
63
|
+
content = super(context).strip.lines.map do |line|
|
|
64
|
+
if line.start_with?("$")
|
|
65
|
+
"<span class='command'>#{esc line[1..-1]}</span>"
|
|
66
|
+
elsif line.start_with?("/")
|
|
67
|
+
"<span class='continuation'>#{esc line[1..-1]}</span>"
|
|
68
|
+
else
|
|
69
|
+
"<span class='output'>#{esc line}</span>"
|
|
70
|
+
end
|
|
71
|
+
end.join("\n")
|
|
64
72
|
%{
|
|
65
|
-
<div class="
|
|
66
|
-
<nav
|
|
67
|
-
<a href="#
|
|
73
|
+
<div class="terminal">
|
|
74
|
+
<nav>
|
|
75
|
+
<a href="#" class="close">close</a>
|
|
68
76
|
<a href="#" class="minimize">minimize</a>
|
|
69
77
|
<a href="#" class="deactivate">deactivate</a>
|
|
70
78
|
</nav>
|
|
71
|
-
<#{tag_name} class="
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
79
|
+
<#{tag_name} class="title">Terminal</#{tag_name}>
|
|
80
|
+
<pre>
|
|
81
|
+
#{content}
|
|
82
|
+
</pre>
|
|
77
83
|
</div>}
|
|
78
84
|
end
|
|
79
85
|
|
|
80
|
-
def promptize(content)
|
|
81
|
-
content = content.strip
|
|
82
|
-
gutters = content.lines.map { |line| gutter(line) }
|
|
83
|
-
lines_of_code = content.lines.map { |line| line_of_code(line) }
|
|
84
|
-
%{
|
|
85
|
-
<table>
|
|
86
|
-
<tr>
|
|
87
|
-
<td class='gutter'>
|
|
88
|
-
#{gutters.join("\n")}
|
|
89
|
-
</td>
|
|
90
|
-
<td class='code'>
|
|
91
|
-
#{lines_of_code.join("\n")}
|
|
92
|
-
</td>
|
|
93
|
-
</tr>
|
|
94
|
-
</table>}
|
|
95
|
-
end
|
|
96
|
-
|
|
97
|
-
def gutter(line)
|
|
98
|
-
gutter_value = line.start_with?("$") ? "$" : " "
|
|
99
|
-
"<span>#{gutter_value}</span><br>"
|
|
100
|
-
end
|
|
101
|
-
|
|
102
86
|
def esc(line)
|
|
103
87
|
CGI.escapeHTML(line.strip)
|
|
104
88
|
end
|
|
105
89
|
|
|
106
|
-
def line_of_code(line)
|
|
107
|
-
if line.start_with?("$")
|
|
108
|
-
%{<span class='command'>#{esc line[1..-1]}</span><br>}
|
|
109
|
-
elsif line.start_with?("/")
|
|
110
|
-
%{<span class='continuation'>#{esc line[1..-1]}</span><br>}
|
|
111
|
-
else
|
|
112
|
-
%{<span class='output'>#{esc line}</span><br>}
|
|
113
|
-
end
|
|
114
|
-
end
|
|
115
90
|
end
|
|
116
91
|
end
|
|
117
92
|
end
|
data/lib/terminal.scss
CHANGED
|
@@ -1,115 +1,99 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/*-----------------------------------------------------------------------------------*/
|
|
4
|
-
|
|
5
|
-
.window {
|
|
1
|
+
.terminal {
|
|
2
|
+
font-family: monospace;
|
|
6
3
|
margin: 0px auto 30px auto;
|
|
7
|
-
background:
|
|
8
|
-
background: -moz-linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
|
|
4
|
+
background: linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
|
|
9
5
|
border-radius: 5px;
|
|
10
6
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 22px 50px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
|
|
11
7
|
text-align: left;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
margin: 0px;
|
|
26
|
-
position: relative;
|
|
27
|
-
z-index: 2;
|
|
28
|
-
color: #3c3c3c;
|
|
29
|
-
font-size: 13px;
|
|
30
|
-
line-height: 21px;
|
|
31
|
-
text-decoration: none;
|
|
32
|
-
text-shadow: 0 1px 1px #e7e7e7;
|
|
33
|
-
text-align: center;
|
|
34
|
-
text-transform: capitalize;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
nav.control-window {
|
|
38
|
-
float: left;
|
|
39
|
-
padding: 2px 0px 0px 10px;
|
|
40
|
-
left: 5px;
|
|
41
|
-
top: 3px;
|
|
42
|
-
z-index: 10;
|
|
43
|
-
height: 19px;
|
|
44
|
-
a {
|
|
45
|
-
display: inline-block;
|
|
46
|
-
margin: 2px 0px 3px 1px;
|
|
47
|
-
width: 12px;
|
|
48
|
-
height: 12px;
|
|
49
|
-
border-radius: 100%;
|
|
50
|
-
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
|
|
51
|
-
text-indent: -9999px;
|
|
52
|
-
position: relative;
|
|
53
|
-
&:before {
|
|
54
|
-
content: '';
|
|
55
|
-
display: block;
|
|
56
|
-
position: absolute;
|
|
57
|
-
border-radius: 100%;
|
|
58
|
-
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
|
|
59
|
-
top: 0px;
|
|
60
|
-
left: 0px;
|
|
61
|
-
bottom: 0px;
|
|
62
|
-
right: 0px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&:after {
|
|
66
|
-
content: '';
|
|
67
|
-
display: block;
|
|
68
|
-
position: absolute;
|
|
69
|
-
top: 2px;
|
|
70
|
-
left: 1px;
|
|
71
|
-
bottom: 1px;
|
|
72
|
-
right: 1px;
|
|
8
|
+
overflow-y: hidden;
|
|
9
|
+
|
|
10
|
+
& > nav:first-of-type {
|
|
11
|
+
float: left;
|
|
12
|
+
padding: 2px 0px 0px 10px;
|
|
13
|
+
left: 5px;
|
|
14
|
+
top: 3px;
|
|
15
|
+
height: 19px;
|
|
16
|
+
a {
|
|
17
|
+
display: inline-block;
|
|
18
|
+
margin: 2px 0px 3px 1px;
|
|
19
|
+
width: 12px;
|
|
20
|
+
height: 12px;
|
|
73
21
|
border-radius: 100%;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
22
|
+
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
|
|
23
|
+
text-indent: -9999px;
|
|
24
|
+
position: relative;
|
|
25
|
+
&:before {
|
|
26
|
+
content: '';
|
|
27
|
+
display: block;
|
|
28
|
+
position: absolute;
|
|
29
|
+
border-radius: 100%;
|
|
30
|
+
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
|
|
31
|
+
top: 0px;
|
|
32
|
+
left: 0px;
|
|
33
|
+
bottom: 0px;
|
|
34
|
+
right: 0px;
|
|
35
|
+
}
|
|
78
36
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
37
|
+
&:after {
|
|
38
|
+
content: '';
|
|
39
|
+
display: block;
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 2px;
|
|
42
|
+
left: 1px;
|
|
43
|
+
bottom: 1px;
|
|
44
|
+
right: 1px;
|
|
45
|
+
border-radius: 100%;
|
|
46
|
+
background: linear-gradient(white, rgba(255, 255, 255, 0.9) 2%, white, rgba(255, 255, 255, 0.4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.7) 122%, rgba(255, 255, 255, 0.7));
|
|
47
|
+
box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
|
|
48
|
+
}
|
|
88
49
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
margin
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
50
|
+
&.close { background: #FD4E4E; }
|
|
51
|
+
&.minimize { background: #F3BB55; }
|
|
52
|
+
&.maximize { background: #96D16F; }
|
|
53
|
+
&.deactivate { background: #b5b5b5; }
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
// Don't use a tag but a class as the tag is configurable.
|
|
57
|
+
& > .title {
|
|
58
|
+
font-size: small !important;
|
|
59
|
+
margin: 0px;
|
|
60
|
+
position: relative;
|
|
61
|
+
color: #3c3c3c;
|
|
62
|
+
font-size: 13px;
|
|
63
|
+
line-height: 21px;
|
|
64
|
+
text-decoration: none;
|
|
65
|
+
text-shadow: 0 1px 1px #e7e7e7;
|
|
66
|
+
text-align: center;
|
|
67
|
+
text-transform: capitalize;
|
|
68
|
+
}
|
|
69
|
+
& > pre:first-of-type {
|
|
70
|
+
white-space: pre-wrap;
|
|
71
|
+
margin: 0;
|
|
72
|
+
padding: 1em;
|
|
73
|
+
border-radius: 0;
|
|
74
|
+
background: #333;
|
|
75
|
+
font-size: 100%;
|
|
76
|
+
span {
|
|
77
|
+
margin-top: 0.5em;
|
|
78
|
+
&:before { content: '$ '; }
|
|
79
|
+
&.command {
|
|
80
|
+
color: #FFF;
|
|
105
81
|
}
|
|
106
|
-
&.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
span.output { color: #BBB; }
|
|
82
|
+
&.continuation {
|
|
83
|
+
color: #FFF;
|
|
84
|
+
&:before { visibility: hidden; }
|
|
110
85
|
}
|
|
111
|
-
|
|
86
|
+
&.output {
|
|
87
|
+
color: #BBB;
|
|
88
|
+
-webkit-touch-callout: none;
|
|
89
|
+
-webkit-user-select: none;
|
|
90
|
+
-khtml-user-select: none;
|
|
91
|
+
-moz-user-select: none;
|
|
92
|
+
-ms-user-select: none;
|
|
93
|
+
user-select: none;
|
|
94
|
+
&:before { visibility: hidden; }
|
|
95
|
+
}
|
|
96
|
+
}
|
|
112
97
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
98
|
+
}
|
|
99
|
+
|