jekyll-tabs 0.1.0

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.
Files changed (10) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +118 -0
  3. data/docs/tabs-example.png +0 -0
  4. data/docs/tabs.css +49 -0
  5. data/docs/tabs.js +43 -0
  6. data/jekyll-tabs.gemspec +20 -0
  7. data/lib/jekyll-tabs/version.rb +5 -0
  8. data/lib/jekyll-tabs.rb +52 -0
  9. data/lib/template.erb +12 -0
  10. metadata +71 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 0d185d006213d88d8c868fdc87ea6d96c74e25bfe5d011c2a622709898941908
4
+ data.tar.gz: f61a02d72b2ac297b106501f0cec38bad8b3026b8627c1a9ec7a64f94294d61d
5
+ SHA512:
6
+ metadata.gz: 5e7678fdfdc74b7a904f290e5e5a66f31ffee674d63e5a0f9f733e4ec2aa53710196be7d6af7ec956ce70101eba4da4e7801d30d4da36a1dc0f1de01ee1ae955
7
+ data.tar.gz: 8eb8778c72af726a3121738da8afbec68bdfe33a61dbe0e3af63b2a31da94a130423d972b85d81658a739f06568a750caef03d112cc30dab71a561a71a0733c8
data/README.md ADDED
@@ -0,0 +1,118 @@
1
+ Jekyll Tabs
2
+ ===========
3
+
4
+ This Jekyll plugin provides tags used to add tabs in your content.
5
+
6
+ Installation
7
+ ------------
8
+
9
+ ### Install the plugin
10
+
11
+ Add this line to your Gemfile:
12
+
13
+ ```ruby
14
+ group :jekyll_plugins do
15
+
16
+ gem "jekyll-tabs"
17
+ end
18
+ ```
19
+
20
+ Add in you _config.yml:
21
+
22
+ ```yaml
23
+ plugins:
24
+ - jekyll-tabs
25
+ ```
26
+
27
+ And then execute:
28
+
29
+ $ bundle
30
+
31
+ and put this in your ``_config.yml``
32
+
33
+ ```yaml
34
+ plugins:
35
+ - jekyll-tabs
36
+ ```
37
+
38
+ ### Add the javascripts
39
+
40
+ Copy the content of [this file](docs/tabs.js) in your public folder, let's say **public/js/tabs.js**.
41
+ Include the script in your layout, for instance in **_layouts_/default.html**
42
+
43
+ ```html
44
+ <!DOCTYPE html>
45
+ <html lang="en-us">
46
+ {% include head.html %}
47
+ <body>
48
+ {{ content }}
49
+ <script src="/public/js/tabs.js"></script>
50
+ </body>
51
+ </html>
52
+ ```
53
+
54
+ ### Add some style to the tabs
55
+
56
+ Feel free to style it the way you want. Here is an example.
57
+
58
+ Create a file called **custom.css** in **public/css** with [this content](docs/tabs.css). Include it in **_include/head.html*
59
+
60
+ ```html
61
+ <link rel="stylesheet" href="/public/css/custom.css">
62
+ ```
63
+
64
+ That's it
65
+
66
+ Usage
67
+ -----
68
+
69
+ ### Create the markup
70
+
71
+ ````
72
+ ### First tabs
73
+
74
+ {% tabs log %}
75
+
76
+ {% tab log php %}
77
+ ```php
78
+ var_dump('hello');
79
+ ```
80
+ {% endtab %}
81
+
82
+ {% tab log js %}
83
+ ```javascript
84
+ console.log('hello');
85
+ ```
86
+ {% endtab %}
87
+
88
+ {% tab log ruby %}
89
+ ```javascript
90
+ pputs 'hello'
91
+ ```
92
+ {% endtab %}
93
+
94
+ {% endtabs %}
95
+
96
+ ### Second tabs
97
+
98
+ {% tabs data-struct %}
99
+
100
+ {% tab data-struct yaml %}
101
+ ```yaml
102
+ hello:
103
+ - 'whatsup'
104
+ - 'hi'
105
+ ```
106
+ {% endtab %}
107
+
108
+ {% tab data-struct json %}
109
+ ```json
110
+ {
111
+ "hello": ["whatsup", "hi"]
112
+ }
113
+ ```
114
+ {% endtab %}
115
+
116
+ {% endtabs %}
117
+
118
+ ````
data/docs/tabs-example.png ADDED
Binary file
data/docs/tabs.css ADDED
@@ -0,0 +1,49 @@
1
+ .tab {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ margin-left: -20px;
5
+ padding: 0;
6
+ list-style: none;
7
+ position: relative;
8
+ }
9
+
10
+ .tab > * {
11
+ flex: none;
12
+ padding-left: 20px;
13
+ position: relative;
14
+ }
15
+
16
+ .tab > * > a {
17
+ display: block;
18
+ text-align: center;
19
+ padding: 9px 20px;
20
+ color: #999;
21
+ border-bottom: 2px solid
22
+ transparent;
23
+ border-bottom-color: transparent;
24
+ font-size: 12px;
25
+ text-transform: uppercase;
26
+ transition: color .1s ease-in-out;
27
+ line-height: 20px;
28
+ }
29
+
30
+ .tab > .active > a {
31
+ color:#222;
32
+ border-color: #1e87f0;
33
+ }
34
+
35
+ .tab li a {
36
+ text-decoration: none;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .tab-content{
41
+ padding: 0;
42
+ }
43
+
44
+ .tab-content li {
45
+ display: none;
46
+ }
47
+ .tab-content li.active {
48
+ display: initial;
49
+ }
data/docs/tabs.js ADDED
@@ -0,0 +1,43 @@
1
+ const removeActiveClasses = function (ulElement) {
2
+ const lis = ulElement.querySelectorAll('li');
3
+ Array.prototype.forEach.call(lis, function(li) {
4
+ li.classList.remove('active');
5
+ });
6
+ }
7
+
8
+ const getChildPosition = function (element) {
9
+ var parent = element.parentNode;
10
+ var i = 0;
11
+ for (var i = 0; i < parent.children.length; i++) {
12
+ if (parent.children[i] === element) {
13
+ return i;
14
+ }
15
+ }
16
+
17
+ throw new Error('No parent found');
18
+ }
19
+
20
+ window.addEventListener('load', function () {
21
+ const tabLinks = document.querySelectorAll('ul.tab li a');
22
+
23
+ Array.prototype.forEach.call(tabLinks, function(link) {
24
+ link.addEventListener('click', function (event) {
25
+ event.preventDefault();
26
+
27
+ liTab = link.parentNode;
28
+ ulTab = liTab.parentNode;
29
+ position = getChildPosition(liTab);
30
+ if (liTab.className.includes('active')) {
31
+ return;
32
+ }
33
+
34
+ removeActiveClasses(ulTab);
35
+ tabContentId = ulTab.getAttribute('data-tab');
36
+ tabContentElement = document.getElementById(tabContentId);
37
+ removeActiveClasses(tabContentElement);
38
+
39
+ tabContentElement.querySelectorAll('li')[position].classList.add('active');
40
+ liTab.classList.add('active');
41
+ }, false);
42
+ });
43
+ });
data/jekyll-tabs.gemspec ADDED
@@ -0,0 +1,20 @@
1
+ lib = File.expand_path('../lib', __FILE__)
2
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
3
+ require 'jekyll-tabs/version'
4
+
5
+ Gem::Specification.new do |spec|
6
+
7
+ spec.name = 'jekyll-tabs'
8
+ spec.summary = 'A Jekyll plugin to add tabs'
9
+ spec.description = 'Generate a tabbed interface on top of markup'
10
+ spec.version = Jekyll::Tabs::VERSION
11
+
12
+ spec.authors = ['Baptiste Bouchereau']
13
+ spec.email = ['baptiste.bouchereau@gmail.com']
14
+ spec.homepage = 'https://github.com/ovski4/jekyll-tabs'
15
+ spec.licenses = ['MIT']
16
+
17
+ spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r!^(test|spec|features)/!) }
18
+ spec.require_paths = ['lib']
19
+ spec.add_dependency 'jekyll', '>= 3.0', '< 5.0'
20
+ end
data/lib/jekyll-tabs/version.rb ADDED
@@ -0,0 +1,5 @@
1
+ module Jekyll
2
+ module Tabs
3
+ VERSION = "0.1.0"
4
+ end
5
+ end
data/lib/jekyll-tabs.rb ADDED
@@ -0,0 +1,52 @@
1
+ require 'securerandom'
2
+ require 'erb'
3
+
4
+ module Jekyll
5
+ module Tabs
6
+ class TabsBlock < Liquid::Block
7
+ def initialize(block_name, markup, tokens)
8
+ super
9
+ if markup == ''
10
+ raise SyntaxError.new("Block #{block_name} requires 1 attribute")
11
+ end
12
+ @name = markup.strip
13
+ end
14
+
15
+ def render(context)
16
+ environment = context.environments.first
17
+ super
18
+
19
+ uuid = SecureRandom.uuid
20
+ currentDirectory = File.dirname(__FILE__)
21
+ templateFile = File.read(currentDirectory + '/template.erb')
22
+ template = ERB.new(templateFile)
23
+ template.result(binding)
24
+ end
25
+ end
26
+
27
+ class TabBlock < Liquid::Block
28
+ alias_method :render_block, :render
29
+
30
+ def initialize(block_name, markup, tokens)
31
+ super
32
+ markups = markup.split(' ')
33
+ if markups.length != 2
34
+ raise SyntaxError.new("Block #{block_name} requires 2 attributes")
35
+ end
36
+ @name = markups[0]
37
+ @tab = markups[1]
38
+ end
39
+
40
+ def render(context)
41
+ site = context.registers[:site]
42
+ converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
43
+ environment = context.environments.first
44
+ environment["tabs-#{@name}"] ||= {}
45
+ environment["tabs-#{@name}"][@tab] = converter.convert(render_block(context))
46
+ end
47
+ end
48
+ end
49
+ end
50
+
51
+ Liquid::Template.register_tag('tab', Jekyll::Tabs::TabBlock)
52
+ Liquid::Template.register_tag('tabs', Jekyll::Tabs::TabsBlock)
data/lib/template.erb ADDED
@@ -0,0 +1,12 @@
1
+ <ul class="tab" data-tab="<%= uuid %>">
2
+ <% environment["tabs-#{@name}"].each_with_index do |(key, value), index| %>
3
+ <li<%= index == 0 ? ' class="active"' : ''%>>
4
+ <a href=""><%= key %></a>
5
+ </li>
6
+ <% end %>
7
+ </ul>
8
+ <ul class="tab-content" id="<%= uuid %>">
9
+ <% environment["tabs-#{@name}"].each_with_index do |(key, value), index| %>
10
+ <li<%= index == 0 ? ' class="active"' : ''%>><%= value %></li>
11
+ <% end %>
12
+ </ul>
metadata ADDED
@@ -0,0 +1,71 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jekyll-tabs
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Baptiste Bouchereau
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2020-01-24 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '3.0'
20
+ - - "<"
21
+ - !ruby/object:Gem::Version
22
+ version: '5.0'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ version: '3.0'
30
+ - - "<"
31
+ - !ruby/object:Gem::Version
32
+ version: '5.0'
33
+ description: Generate a tabbed interface on top of markup
34
+ email:
35
+ - baptiste.bouchereau@gmail.com
36
+ executables: []
37
+ extensions: []
38
+ extra_rdoc_files: []
39
+ files:
40
+ - README.md
41
+ - docs/tabs-example.png
42
+ - docs/tabs.css
43
+ - docs/tabs.js
44
+ - jekyll-tabs.gemspec
45
+ - lib/jekyll-tabs.rb
46
+ - lib/jekyll-tabs/version.rb
47
+ - lib/template.erb
48
+ homepage: https://github.com/ovski4/jekyll-tabs
49
+ licenses:
50
+ - MIT
51
+ metadata: {}
52
+ post_install_message:
53
+ rdoc_options: []
54
+ require_paths:
55
+ - lib
56
+ required_ruby_version: !ruby/object:Gem::Requirement
57
+ requirements:
58
+ - - ">="
59
+ - !ruby/object:Gem::Version
60
+ version: '0'
61
+ required_rubygems_version: !ruby/object:Gem::Requirement
62
+ requirements:
63
+ - - ">="
64
+ - !ruby/object:Gem::Version
65
+ version: '0'
66
+ requirements: []
67
+ rubygems_version: 3.0.1
68
+ signing_key:
69
+ specification_version: 4
70
+ summary: A Jekyll plugin to add tabs
71
+ test_files: []