jekyll-terminal 0.0.2 → 0.0.3

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: e90fdf64dcb1ceba883a193defb3c75d10ae5330
4
- data.tar.gz: 494c15b2834f8eff63a451e72809597b28f76f5f
3
+ metadata.gz: 269a172dd6591e471877df1a4ddea546a7026276
4
+ data.tar.gz: 0f2255417353b79c86ffd9760418fa6d4c726d64
5
5
  SHA512:
6
- metadata.gz: ba16f25b6dff3c43efcd7ddbbef415430c9b3f1ca0abc529ee4f01e6aed939e440698842e0e35400c28ae831405c0e4f1dbcbfd4f389fd7371a09163e451269b
7
- data.tar.gz: b76e830b1ff515a9508c465e3d1e6f981ff82b24144dc8d424fb944d8aab57a213d6c278b6f735299c9041f29fc7e5ccce46c85c83471459b0266da408ef17ee
6
+ metadata.gz: 4be08d3fe2c43bcc57cee32068f2244d269804af2fd5f69256ef735a2f32c71533304332419fa658c68ef2cfbae6505b7bcdc3d17f278a65389ebb8238ecb978
7
+ data.tar.gz: 11122fe25fd0c51bdb116b956736b3fd515f646a098e5ace5110b75bc0c7488e02b68882cb10cfdf623529a69a8aa42acc9c3d0ef5dad650022aa4a6fe4610f8
@@ -57,42 +57,52 @@ module Jekyll
57
57
 
58
58
  def render(context)
59
59
  output = super(context)
60
- # TODO: make title customizable.
61
- %{<div class="window">
62
- <nav class="control-window">
63
- <a href="#finder" class="close" data-rel="close">close</a>
64
- <a href="#" class="minimize">minimize</a>
65
- <a href="#" class="deactivate">deactivate</a>
66
- </nav>
67
- <h1 class="titleInside">Terminal</h1>
68
- <div class="container"><div class="terminal">#{promptize(output)}</div></div>
69
- </div>}
60
+ %{
61
+ <div class="window">
62
+ <nav class="control-window">
63
+ <a href="#finder" class="close" data-rel="close">close</a>
64
+ <a href="#" class="minimize">minimize</a>
65
+ <a href="#" class="deactivate">deactivate</a>
66
+ </nav>
67
+ <h1 class="titleInside">Terminal</h1>
68
+ <div class="container">
69
+ <div class="terminal">
70
+ #{promptize(output)}
71
+ </div>
72
+ </div>
73
+ </div>}
70
74
  end
71
75
 
72
76
  def promptize(content)
73
77
  content = content.strip
74
78
  gutters = content.lines.map { |line| gutter(line) }
75
79
  lines_of_code = content.lines.map { |line| line_of_code(line) }
76
-
77
- table = "<table><tr>"
78
- table += "<td class='gutter'><pre class='line-numbers'>#{gutters.join("\n")}</pre></td>"
79
- table += "<td class='code'><pre><code>#{lines_of_code.join("")}</code></pre></td>"
80
- table += "</tr></table>"
80
+ %{
81
+ <table>
82
+ <tr>
83
+ <td class='gutter'>
84
+ #{gutters.join("\n")}
85
+ </td>
86
+ <td class='code'>
87
+ #{lines_of_code.join("\n")}
88
+ </td>
89
+ </tr>
90
+ </table>}
81
91
  end
82
92
 
83
93
  def gutter(line)
84
94
  gutter_value = line.start_with?(command_character) ? command_character : "&nbsp;"
85
- "<span class='line-number'>#{gutter_value}</span>"
95
+ "<span>#{gutter_value}</span><br>"
86
96
  end
87
97
 
88
98
  def line_of_code(line)
89
99
  if line.start_with?(command_character)
90
100
  line_class = "command"
91
- line = line.sub(command_character,'').strip
101
+ line = line.sub(command_character,'')
92
102
  else
93
103
  line_class = "output"
94
104
  end
95
- "<span class='line #{line_class}'>#{line}</span>"
105
+ %{<span class='#{line_class}'>#{line.strip}</span><br>}
96
106
  end
97
107
 
98
108
  def command_character
@@ -0,0 +1,114 @@
1
+ /*-----------------------------------------------------------------------------------*/
2
+ /* Window
3
+ /*-----------------------------------------------------------------------------------*/
4
+
5
+ .window {
6
+ margin: 0px auto 30px auto;
7
+ background: -webkit-linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
8
+ background: -moz-linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
9
+ border-radius: 5px;
10
+ 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
+ text-align: left;
12
+ z-index: 0;
13
+ visibility: hidden;
14
+ opacity: 0;
15
+ visibility: visible;
16
+ opacity: 1;
17
+ }
18
+
19
+ .container {
20
+ border-radius: 5px;
21
+ }
22
+
23
+ h1.titleInside {
24
+ font-size: small !important;
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;
73
+ border-radius: 100%;
74
+ background: -webkit-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));
75
+ background: -moz-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));
76
+ box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
77
+ }
78
+
79
+ &.close { background: #FD4E4E; }
80
+ &.minimize { background: #F3BB55; }
81
+ &.maximize { background: #96D16F; }
82
+ &.deactivate { background: #b5b5b5; }
83
+ }
84
+ }
85
+ /*-----------------------------------------------------------------------------------*/
86
+ /* Terminal Console Layout
87
+ /*-----------------------------------------------------------------------------------*/
88
+
89
+ .terminal {
90
+ background: #333;
91
+ color: #DDD;
92
+ padding: 0;
93
+ margin: 0;
94
+ border-bottom-left-radius: 5px;
95
+ border-bottom-right-radius: 5px;
96
+ width: 100%;
97
+ table {
98
+ margin-left: 10px;
99
+ margin-right: 10px;
100
+ td {
101
+ font-family: monospace;
102
+ vertical-align: top;
103
+ &.gutter {
104
+ span { color: white; }
105
+ }
106
+ &.code {
107
+ span.command { color: #FFF; }
108
+ span.output { color: #BBB; }
109
+ }
110
+ }
111
+ }
112
+ overflow-x: auto;
113
+ overflow-y: hidden;
114
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-terminal
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.2
4
+ version: 0.0.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Xavier Décoret
@@ -40,15 +40,15 @@ dependencies:
40
40
  version: '2.0'
41
41
  description: |
42
42
  Add a Liquid block `%terminal` for displaying shell commands
43
- inside a Mac-like terminal. Useful for blogs about programming
43
+ nicely in HTML. Useful for Jekyll-based blogs about programming
44
44
  that gives command-line instructions.
45
45
  email: xavier.decoret+jekyll@gmail.com
46
46
  executables: []
47
47
  extensions: []
48
48
  extra_rdoc_files: []
49
49
  files:
50
- - lib/jekyll-terminal.rb
51
- - lib/terminal.scss
50
+ - lib/jekyll-terminal/jekyll-terminal.rb
51
+ - lib/jekyll-terminal/terminal.scss
52
52
  homepage: https://github.com/Xadeck/jekyll-terminal
53
53
  licenses:
54
54
  - MIT
data/lib/terminal.scss DELETED
@@ -1,149 +0,0 @@
1
- /*-----------------------------------------------------------------------------------*/
2
- /* Window
3
- /*-----------------------------------------------------------------------------------*/
4
-
5
- .window {
6
- margin: 0px auto 30px auto;
7
- background: -webkit-linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
8
- background: -moz-linear-gradient(rgba(233, 233, 233, 1), rgba(178, 178, 178, 1) 21px, #EDEDED, #EDEDED 23px);
9
- border-radius: 5px;
10
- 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
- text-align: left;
12
- z-index: 0;
13
- visibility: hidden;
14
- opacity: 0;
15
- visibility: visible;
16
- opacity: 1;
17
- }
18
-
19
- .container {
20
- border-radius: 5px;
21
- }
22
-
23
- h1.titleInside {
24
- font-size: small !important;
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
- }
45
-
46
- nav.control-window a {
47
- display: inline-block;
48
- margin: 2px 0px 3px 1px;
49
- width: 12px;
50
- height: 12px;
51
- border-radius: 100%;
52
- box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
53
- text-indent: -9999px;
54
- position: relative;
55
- }
56
-
57
- nav.control-window a:before {
58
- content: '';
59
- display: block;
60
- position: absolute;
61
- border-radius: 100%;
62
- box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
63
- top: 0px;
64
- left: 0px;
65
- bottom: 0px;
66
- right: 0px;
67
- }
68
-
69
- nav.control-window a:after {
70
- content: '';
71
- display: block;
72
- position: absolute;
73
- top: 2px;
74
- left: 1px;
75
- bottom: 1px;
76
- right: 1px;
77
- border-radius: 100%;
78
- background: -webkit-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));
79
- background: -moz-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));
80
- box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
81
- }
82
-
83
- nav.control-window a.close {
84
- background: #FD4E4E;
85
- }
86
-
87
- nav.control-window a.minimize {
88
- background: #F3BB55;
89
- }
90
-
91
- nav.control-window a.maximize {
92
- background: #96D16F;
93
- }
94
-
95
- nav.control-window a.deactivate {
96
- background: #b5b5b5;
97
- }
98
-
99
- /*-----------------------------------------------------------------------------------*/
100
- /* Terminal Console Layout
101
- /*-----------------------------------------------------------------------------------*/
102
-
103
- .terminal {
104
- background: #333;
105
- color: #DDD;
106
- white-space: pre-line;
107
- border-bottom-left-radius: 5px;
108
- border-bottom-right-radius: 5px;
109
- width: 100%;
110
- }
111
-
112
- .terminal table {
113
- margin-left: 10px;
114
- margin-right: 10px;
115
- }
116
-
117
- div.terminal td {
118
- vertical-align: top;
119
- }
120
-
121
- div.terminal pre {
122
- background: none;
123
- border: none;
124
- padding-left: 0px;
125
- box-shadow: none;
126
- -webkit-box-shadow: none;
127
- margin: 0px;
128
- }
129
-
130
- div.terminal pre span {
131
- display: block;
132
- }
133
-
134
- div.terminal {
135
- overflow-x: auto;
136
- overflow-y: hidden;
137
- }
138
-
139
- div.terminal pre.line-numbers span {
140
- display: inline;
141
- }
142
-
143
- div.terminal span.command {
144
- color: #FFF;
145
- }
146
-
147
- div.terminal span.output {
148
- color: #BBB;
149
- }