jekyll-bulma-tabs 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 7077c00bf3aaeb0ed31fc92548e513d7c7c11210c2fca8ee539dd7a0413a9da4
+  data.tar.gz: 6794ebc37b5996b9f72f035f3bdcf5cd8f868f8d23608065019499767de37534
+SHA512:
+  metadata.gz: 0b9a369230e6f040ad968147c4ccec08fa14d1f4a014a905923252be77a9eaa27b59c2f64af93cd11155c54911f1d4767a92e655ee78363aa06bb15fdb866105
+  data.tar.gz: f5d16e3363b2cf0270f310fdb8f0b4b33eb51c6345bb8db9e1627d8fe363499392fb38fa776a0f67ce7bf16a1cd5f0c71d571f0286f62d605c67a53557c77697

data/Gemfile

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in jekyll-bulma-tabs.gemspec
+gemspec
+
+gem "rake", "~> 13.0"
+
+gem "rspec", "~> 3.0"

data/README.md

@@ -0,0 +1,102 @@
+# Jekyll Bulma Tabs Plugin
+
+This is a Jekyll tags plugin to add [bulma](https://bulma.io/) style tabs to the GitHub pages
+along with the [bulma-clean-theme](https://github.com/chrisrhymes/bulma-clean-theme).
+
+This plugin was created based on the [Jekyll Tabs](https://github.com/Ovski4/jekyll-tabs) plugin.
+Like the Jekyll Tabs does, Jekyll Bulma Tabs has features:
+- works with multiple tab panels on the same page
+- doesn't require a specific JavaScript framework
+
+## Installation
+
+#### Plugin
+
+Add the plugin in the Jekyll GitHub pages `Gemfile`.
+```ruby
+group :jekyll_plugins do
+  # ... other gems
+  gem "jekyll-bulma-tabs"
+end
+```
+
+Also, add the plugin in the Jekyll Github pages `_config.yml`.
+```yml
+plugins:
+  - jekyll-bulma-tabs
+```
+
+Run the command below to install the plugin.
+```bash
+bundle install
+```
+
+#### JavaScript and CSS
+Copy JavaScript and CSS files to the Jekyll Github pages public directory.
+In general, the places are `assets/js` and `assets/css`.
+- JavaScript: [https://raw.githubusercontent.com/yokolet/jekyll-bulma-tabs/main/docs/tabs.js](https://raw.githubusercontent.com/yokolet/jekyll-bulma-tabs/main/docs/tabs.js)
+- CSS: [https://raw.githubusercontent.com/yokolet/jekyll-bulma-tabs/main/docs/tabs.css](https://raw.githubusercontent.com/yokolet/jekyll-bulma-tabs/main/docs/tabs.css)
+
+Add `tabs.js` and `tabs.css` to  GitHub pages' header/footer area. Exactly what file depends on how the GitHub pages are
+created. For example, if the theme is bulma-clean-theme, the `tabs.js` goes to `_includes/footer-scripts.html` while the
+`tabs.css` goes to `_includes/head.html`.
+
+Example:
+- `_includes/footer-scripts.html`
+```html
+<script src="{{ "/assets/js/tabs.js" | prepend: site.baseurl }}" type="text/javascript"></script>
+```
+- `_includes/head.html`
+```html
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tabs.css">
+```
+
+## Usage
+
+#### Markup
+The markup looks like below:
+
+````markdown
+{% tabs data-struct is-centered is-boxed %}
+
+{% tab data-struct yaml %}
+```yaml
+hello:
+  - 'whatsup'
+  - 'hi'
+```
+{% endtab %}
+
+{% tab data-struct json %}
+```json
+{
+    "hello": ["whatsup", "hi"]
+}
+```
+{% endtab %}
+
+{% endtabs %}
+````
+
+#### Description
+The syntax is:
+```markdown
+{% tabs tabs-group-id bulma-tabs-options %}
+{% tab tabs-group-id tab-title-1 %}
+contents1
+{% endtab %}
+{% tab tabs-group-id tab-title-2 %}
+contents2
+{% endtab %}
+{% endtabs %}
+```
+
+- tabs-group-id: (mandate) The id of tabs group and used to switch contents.
+- bulma-tabs-options: (optional) Among the bulma tabs styling options, those used with tabs class are supported such as `is-centered` or `is-boxed`.
+- tab-title: (mandate) The title appears in the tab.
+- contents: (mandate) The contents tied to the tab title.
+
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/docs/tabs.css

@@ -0,0 +1,7 @@
+div.tab-content {
+    display: none;
+}
+
+div.tab-content.is-active {
+    display: block;
+}

data/docs/tabs.js

@@ -0,0 +1,40 @@
+const TABS = [...document.querySelectorAll('div.tabs ul li')];
+const CONTENTS = [...document.querySelectorAll('div.tab-content')];
+const ACTIVE_CLASS = 'is-active';
+
+const updateActiveTab = (selected) => {
+    let tabs_group = selected.substring(0, selected.lastIndexOf('-'));
+    TABS.forEach((tab) => {
+        let data = tab.getAttribute('data-tab');
+        if (tab && data.startsWith(tabs_group) && tab.classList.contains(ACTIVE_CLASS)) {
+            tab.classList.remove(ACTIVE_CLASS);
+        }
+        if (data === selected) {
+            tab.classList.add(ACTIVE_CLASS);
+        }
+    });
+}
+
+const updateActiveContent = (selected) => {
+    let tabs_group = selected.substring(0, selected.lastIndexOf('-'));
+    CONTENTS.forEach((content) => {
+        let data = content.getAttribute('data-content');
+        if (content && data.startsWith(tabs_group) && content.classList.contains(ACTIVE_CLASS)) {
+            content.classList.remove(ACTIVE_CLASS);
+        }
+        if (data === selected) {
+            content.classList.add(ACTIVE_CLASS);
+        }
+    });
+}
+
+window.addEventListener('load', (event) => {
+    TABS.forEach((tab) => {
+      tab.addEventListener('click', (event) => {
+          event.preventDefault();
+          let selected = tab.getAttribute('data-tab');
+          updateActiveTab(selected);
+          updateActiveContent(selected);
+      });
+    });
+});

data/lib/jekyll/bulma/tabs/version.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module Bulma
+    module Tabs
+      VERSION = "0.1.0"
+    end
+  end
+end

data/lib/jekyll/bulma/tabs.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+require_relative "tabs/version"
+
+module Jekyll
+  module Bulma
+    module Tabs
+      class Error < StandardError; end
+
+      class TabsBlock < Liquid::Block
+        def initialize(tag_name, markup, options)
+          super
+          markups = markup.split(' ', 2)
+          if markups.length == 0
+            raise SyntaxError.new("Block #{tag_name} requires 1 attribute")
+          end
+          @tabs_group = markups[0]
+          @tabs_opts = markups[1]
+        end
+
+        def render(context)
+          super
+          environment = context.environments.first
+          currentDirectory = File.dirname(__FILE__)
+          templateFile = File.read(currentDirectory + '/template.erb')
+          template = ERB.new(templateFile)
+          template.result(binding)
+        end
+      end
+
+      class TabBlock < Liquid::Block
+        alias_method :render_block, :render
+
+        def initialize(tag_name, markup, options)
+          super
+          markups = markup.split(' ', 2)
+          if markups.length != 2
+            raise SyntaxError.new("Block #{tag_name} requires 2 attributes")
+          end
+          @tabs_group = markups[0]
+          @tab_id = markups[1]
+        end
+
+        def render(context)
+          super
+          site = context.registers[:site]
+          converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+          environment = context.environments.first
+          environment["tabs-#{@tabs_group}"] ||= {}
+          environment["tabs-#{@tabs_group}"][@tab_id] = converter.convert(render_block(context))
+        end
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('tab', Jekyll::Bulma::Tabs::TabBlock)
+Liquid::Template.register_tag('tabs', Jekyll::Bulma::Tabs::TabsBlock)

data/lib/jekyll/bulma/template.erb

@@ -0,0 +1,20 @@
+<div class="tabs <%= @tabs_opts %>" id="<%= @tabs_group %>">
+  <div class="container">
+    <ul>
+      <% environment["tabs-#{@tabs_group}"].each_with_index do |(key, value), index| %>
+        <li<%= index == 0 ? ' class="is-active"' : ''%>
+           data-tab="<%= @tabs_group + '-' + index.to_s %>">
+          <a><span><%= key %></span></a>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>
+<div id="<%= @tabs_group %>-content">
+  <div class="container box">
+    <% environment["tabs-#{@tabs_group}"].each_with_index do |(key, value), index| %>
+      <div<%= index == 0 ? ' class="is-active tab-content"' : ' class="tab-content"'%>
+         data-content="<%= @tabs_group + '-' + index.to_s %>"><%= value %></div>
+    <% end %>
+  </div>
+</div>

data/sig/jekyll/bulma/tabs.rbs

@@ -0,0 +1,8 @@
+module Jekyll
+  module Bulma
+    module Tabs
+      VERSION: String
+      # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+    end
+  end
+end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-bulma-tabs
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Yoko Harada
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2022-11-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.6'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.6'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: Generate a tabbed interface with bulma as a CSS framework.
+email:
+- yokolet@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- README.md
+- Rakefile
+- docs/tabs.css
+- docs/tabs.js
+- lib/jekyll/bulma/tabs.rb
+- lib/jekyll/bulma/tabs/version.rb
+- lib/jekyll/bulma/template.erb
+- sig/jekyll/bulma/tabs.rbs
+homepage: https://github.com/yokolet/jekyll-bulma-tabs.
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/yokolet/jekyll-bulma-tabs.
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.6.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.7
+signing_key:
+specification_version: 4
+summary: A Jekyll plugin to add bulma compatible tabs.
+test_files: []