fix: support named tab groups for independent tab switching (#698)

* Initial plan

* Implement named tab groups for independent tab functionality

Co-authored-by: henryiii <[email protected]>

* Remove vendor and .bundle from git, add to .gitignore

Co-authored-by: henryiii <[email protected]>

* style: pre-commit fixes

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: henryiii <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

.gitignore

@@ -161,3 +161,7 @@ _readthedocs
 
 # UV output
 /uv.lock
+
+# Jekyll build artifacts
+vendor/
+.bundle/

docs/_plugins/tabs.rb

@@ -3,15 +3,21 @@
 module SP
   # Sets up a tabs with top switcher bar
   class Tabs < Liquid::Block
+    def initialize(tag_name, markup, tokens)
+      super
+      @group = markup.strip.empty? ? 'default' : markup.strip
+    end
+
     def render(context)
       tab_bar_content = ''
       context['tabs'] = []
+      context['tab_group'] = @group
       result = super
 
       context['tabs'].each_with_index do |(label, title), index|
         res = index.zero? ? ' btn-purple' : ''
         tab_bar_content += <<~CONTENT
-          <button class="skhep-bar-item #{label}-btn btn m-2#{res}" onclick="openTab('#{label}')">#{title}</button>
+          <button class="skhep-bar-item #{@group}-#{label}-btn btn m-2#{res}" onclick="openTab('#{label}', '#{@group}')">#{title}</button>
         CONTENT
       end
 
@@ -26,8 +32,14 @@ def render(context)
 
   # Sets up tabs without the top switcher bar
   class TabBodies < Liquid::Block
+    def initialize(tag_name, markup, tokens)
+      super
+      @group = markup.strip.empty? ? 'default' : markup.strip
+    end
+
     def render(context)
       context['tabs'] = []
+      context['tab_group'] = @group
       super
     end
   end
@@ -42,10 +54,11 @@ def initialize(tag_name, markup, tokens)
     def render(context)
       raise SyntaxError, "'tab' be in 'tabs' or 'tabbodies'" unless context.key?('tabs')
 
+      group = context['tab_group'] || 'default'
       res = context['tabs'].empty? ? '' : ' style="display:none;"'
       context['tabs'] << [@label, @title]
       <<~RETURN
-        <div class="skhep-tab #{@label}-tab" markdown="1"#{res}>
+        <div class="skhep-tab #{group}-#{@label}-tab" markdown="1"#{res}>
         #{super}
         </div>
       RETURN

docs/assets/js/tabs.js

@@ -1,12 +1,27 @@
-function openTab(tabName) {
+function openTab(tabName, groupName = "default") {
   var tab = document.getElementsByClassName("skhep-tab");
   for (const t of tab) {
-    t.style.display = t.classList.contains(`${tabName}-tab`) ? "block" : "none";
+    if (t.classList.contains(`${groupName}-${tabName}-tab`)) {
+      t.style.display = "block";
+    } else if (
+      Array.from(t.classList).some(
+        (c) => c.startsWith(`${groupName}-`) && c.endsWith("-tab"),
+      )
+    ) {
+      t.style.display = "none";
+    }
   }
   var btn = document.getElementsByClassName("skhep-bar-item");
   for (const b of btn) {
-    if (b.classList.contains(`${tabName}-btn`)) b.classList.add("btn-purple");
-    else b.classList.remove("btn-purple");
+    if (b.classList.contains(`${groupName}-${tabName}-btn`)) {
+      b.classList.add("btn-purple");
+    } else if (
+      Array.from(b.classList).some(
+        (c) => c.startsWith(`${groupName}-`) && c.endsWith("-btn"),
+      )
+    ) {
+      b.classList.remove("btn-purple");
+    }
   }
 }
 function ready() {

docs/pages/guides/style.md

@@ -102,7 +102,7 @@ There are a _few_ options, mostly to enable/disable certain files, remove string
 normalization, and to change the line length, and those go in your
 `pyproject.toml` file.
 
-{% tabs %} {% tab ruff Ruff-format %}
+{% tabs formatters %} {% tab ruff Ruff-format %}
 
 Ruff, the powerful Rust-based linter, has a formatter that is designed with the
 help of some of the Black authors to look 99.9% like Black, but run 30x faster.
@@ -214,7 +214,7 @@ won't tell you what or why it fixed things.
 
 {% rr RF001 %} Ruff is configured in your `pyproject.toml`. Here's an example:
 
-{% tabs %} {% tab ruff-simple Simple config %}
+{% tabs ruff-config %} {% tab ruff-simple Simple config %}
 
 ```toml
 [tool.ruff.lint]