[devdocsgjs/main: 186/239] Add support for displaying color swatches and long class reference

[Andy Holmes <andyholmes src gnome org>]

commit a65f995b70a48956e346d48a388597fb5a2330f8
Author: IgnusG <6438760+IgnusG users noreply github com>
Date:   Mon Feb 21 21:43:21 2022 +0100

    Add support for displaying color swatches and long class reference

 assets/stylesheets/application.css.scss    |  1 +
 assets/stylesheets/pages/_tailwindcss.scss | 48 ++++++++++++++++++++++++++++++
 lib/docs/filters/tailwindcss/clean_html.rb | 40 ++++++++++++++++++++-----
 3 files changed, 82 insertions(+), 7 deletions(-)
---
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index 05967c18..3a6d428e 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -116,6 +116,7 @@
         'pages/sphinx_simple',
         'pages/sqlite',
         'pages/support_tables',
+        'pages/tailwindcss',
         'pages/tcl_tk',
         'pages/tensorflow',
         'pages/terraform',
diff --git a/assets/stylesheets/pages/_tailwindcss.scss b/assets/stylesheets/pages/_tailwindcss.scss
new file mode 100644
index 00000000..b4dd10e6
--- /dev/null
+++ b/assets/stylesheets/pages/_tailwindcss.scss
@@ -0,0 +1,48 @@
+._tailwindcss {
+  // Styling for customizing-colors page - color swatches (based on original tailwind display design)
+  .colors {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+
+    // Text offset
+    margin-bottom: 1rem;
+  }
+
+  // Color swatch title
+  .color > div:first-child {
+    font-weight: bold;
+  }
+
+  .color-swatch-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .color-swatch-container {
+    display: inline-block;
+  }
+
+  // Tiny box with the color set as background
+  .color-swatch {
+    width: 120px;
+    height: 40px;
+    border-radius: 4px;
+  }
+
+  .color-tone-information {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  // Styling for large quick-reference lookup tables
+  .long-quick-reference {
+    max-height: 40vh;
+    width: fit-content;
+    overflow-y: auto;
+    padding: .3rem;
+    border-top: 1px solid var(--textColor);
+    border-bottom: 1px solid var(--textColor);
+  }
+}
diff --git a/lib/docs/filters/tailwindcss/clean_html.rb b/lib/docs/filters/tailwindcss/clean_html.rb
index 503ee3a2..e1a9767a 100644
--- a/lib/docs/filters/tailwindcss/clean_html.rb
+++ b/lib/docs/filters/tailwindcss/clean_html.rb
@@ -41,16 +41,42 @@ module Docs
         # Remove footer + prev/next navigation
         at_css('footer').remove
 
-        css('#nav ul li').each do |node|
-          link = node.css("a").attr('href').to_s
-          if link.include? "https://";
-            node.remove()
+        # Handle long lists of class reference that otherwise span several scrolled pages
+        if class_reference = at_css('#class-reference')
+          reference_container = class_reference.parent
+          classes_container = reference_container.children.reject{ |child| child == class_reference }.first
+
+          rows = classes_container.css("tr")
+
+          if rows.length > 10
+            classes_container.set_attribute("class", "long-quick-reference")
           end
         end
 
-        # Remove right sidebar
-        css('#content-wrapper > div > div.hidden.xl\:text-sm.xl\:block.flex-none.w-64.pl-8.mr-8 > div > 
div').each do |node|
-          node.remove
+        # Remove border color preview column as it isn't displayed anyway
+        if result[:path] == "border-color" and class_reference = at_css('#class-reference')
+          class_reference.parent.css("thead th:nth-child(3)").remove
+          class_reference.parent.css("tbody td:nth-child(3)").remove
+        end
+
+        if result[:path] == "customizing-colors"
+          # It's nice to be able to quickly find out what a color looks like
+          css('div[style^="background-color:"]').each do |node|
+            node.set_attribute("class", "color-swatch")
+
+            swatch_container = node.parent
+            swatch_container.set_attribute("class", "color-swatch-container")
+            swatch_container.children.reject{ |child| child == node }.first.set_attribute("class", 
"color-tone-information")
+
+            swatch_group = swatch_container.parent
+            swatch_group.set_attribute("class", "color-swatch-group")
+
+            color = swatch_group.parent
+            color.set_attribute("class", "color")
+
+            color_list = color.parent.parent
+            color_list.set_attribute("class", "colors")
+          end
         end
 
         # Remove buttons to expand lists - those are already expanded and the button is useless