diff options
author | Sarah German <sgerman@gitlab.com> | 2022-08-25 02:06:38 +0300 |
---|---|---|
committer | Sarah German <sgerman@gitlab.com> | 2022-08-25 02:06:38 +0300 |
commit | 88bf282e6db39610c2293de55d6e7a58560f99a8 (patch) | |
tree | 4d54d28c3d52f2ff00c2d9c9acb31e1b3007431c | |
parent | 452c30caebd9db6604d34f1fd04ce19c38ff2273 (diff) |
Add a Nanoc filter to improve tabs usability1262-tabs-markdownlint
-rw-r--r-- | Rules | 1 | ||||
-rw-r--r-- | content/frontend/default/default.js | 5 | ||||
-rw-r--r-- | lib/filters/tabs.rb | 22 | ||||
-rw-r--r-- | spec/lib/filters/tabs_spec.rb | 28 |
4 files changed, 53 insertions, 3 deletions
@@ -98,6 +98,7 @@ compile '/**/*.md' do filter :admonition filter :icons filter :introduced_in + filter :tabs if item[:layout].nil? layout '/default.*' diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js index 5290ab52..22a41b7b 100644 --- a/content/frontend/default/default.js +++ b/content/frontend/default/default.js @@ -86,10 +86,9 @@ document.addEventListener('DOMContentLoaded', () => { const tabTitles = []; const tabContents = []; - const tabTitleElement = tabset.firstElementChild.tagName; - tabset.querySelectorAll(`${tabTitleElement}`).forEach((tab) => { + tabset.querySelectorAll('.tab-title').forEach((tab) => { tabTitles.push(tab.innerText); - tabContents.push(getNextUntil(tab, tabTitleElement)); + tabContents.push(getNextUntil(tab, '.tab-title')); }); return new Vue({ diff --git a/lib/filters/tabs.rb b/lib/filters/tabs.rb new file mode 100644 index 00000000..08385383 --- /dev/null +++ b/lib/filters/tabs.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +class TabsFilter < Nanoc::Filter + identifier :tabs + + TABSET_PATTERN = %r{<p>::Tabs</p>(?<tabs_wrapper>.*?)<p>::EndTabs</p>}mx.freeze + TAB_TITLE_PATTERN = %r{<p>:::TabTitle\s(?<tab_title>.*?)</p>}mx.freeze + + def run(content, params = {}) + new_content = content.gsub(TAB_TITLE_PATTERN) { generateTitles(Regexp.last_match[:tab_title]) } + new_content.gsub(TABSET_PATTERN) { generateWrapper(Regexp.last_match[:tabs_wrapper]) } + end + + def generateTitles(content) + %(<div class="tab-title">#{content}</div>) + end + + def generateWrapper(content) + %(<div class="js-tabs">#{content}</div>) + end + +end diff --git a/spec/lib/filters/tabs_spec.rb b/spec/lib/filters/tabs_spec.rb new file mode 100644 index 00000000..6ae64b0a --- /dev/null +++ b/spec/lib/filters/tabs_spec.rb @@ -0,0 +1,28 @@ +require 'spec_helper' + +require 'filters/tabs' + +describe TabsFilter do + describe '#run' do + let(:content) { nil } + + subject(:run) { described_class.new.run(content) } + + context 'Tab titles' do + let(:content) { '<p>:::TabTitle Cats</p>' } + + it 'returns correct HTML' do + expect(run).to eq('<div class="tab-title">Cats</div>') + end + end + + context 'Tab wrapper' do + let(:content) { '<p>::Tabs</p>Tabs content<p>::EndTabs</p>' } + + it 'returns correct HTML' do + expect(run).to eq("<div class=\"js-tabs\">Tabs content</div>") + end + end + + end +end |