Merge pull request #1711 from IgnusG/tailwindcss-devdocs

Tailwindcss Devdocs v3

assets/javascripts/news.json

@@ -1,6 +1,10 @@
 [
   [
-    "2021-01-12",
+    "2022-02-21",
+    "New documentation: <a href=\"/tailwindcss/\">Tailwind CSS</a>"
+  ],
+  [
+    "2022-01-12",
     "New documentation: <a href=\"/react_router/\">React Router</a>"
   ],
   [

assets/javascripts/templates/pages/about_tmpl.coffee

@@ -842,6 +842,11 @@ credits = [
     '2004-2017 Fabien Potencier',
     'MIT',
     'https://symfony.com/doc/current/contributing/code/license.html'
+  ], [
+    'TailwindCSS',
+    '2022 Tailwind Labs, Inc.',
+    'MIT',
+    'https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/LICENSE'
   ], [
     'Tcl/Tk',
     'The Regents of the University of California, Sun Microsystems, Inc., Scriptics Corporation, and other parties',

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',

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);
+  }
+}

lib/docs/filters/tailwindcss/clean_html.rb

@@ -0,0 +1,114 @@
+module Docs
+  class Tailwindcss
+    class CleanHtmlFilter < Filter
+      def call
+        # Remove main page headers (top level sticky)
+        css('#__next > .sticky').remove
+        # And anything absolutely positioned (fancy floating navigation elements we don't care about)
+        css('#__next .absolute').remove
+        # Remove the left-navigation we scraped
+        css('nav').remove
+
+        css('svg').remove if root_page?
+
+        # Remove the duplicate category name at the top of the page - redundant
+        at_css('header#header > div:first-child > p:first-child').remove
+
+        # Remove the right navigation sidebar
+        at_css('header#header').parent.css('> div:has(h5:contains("On this page"))').remove
+
+        # Remove footer + prev/next navigation
+        at_css('footer').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 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
+        css('div > button:contains("Show all classes")').each do |node|
+          node.parent.remove
+        end
+
+        # Remove class examples - not part of devdocs styleguide? (similar to bootstrap)
+        # Refer to https://github.com/freeCodeCamp/devdocs/pull/1534#pullrequestreview-649818936
+        css('.not-prose').each do |node|
+          if node.parent.children.length == 1
+            node.parent.remove
+          else
+            node.remove
+          end
+        end
+
+        # Properly format code examples
+        css('pre > code:first-child').each do |node|
+          node.parent['data-language'] = node['class'][/language-(\w+)/, 1] if node['class'] and node['class'][/language-(\w+)/]
+          node.parent.content = node.parent.content
+        end
+
+        @doc.traverse { |node| cleanup_tailwind_classes(node) }
+
+        #remove weird <hr> (https://github.com/damms005/devdocs/commit/8c9fbd859b71a2525b94a35ea994393ce2b6fedb#commitcomment-50091018)
+        css('hr').remove
+
+        doc
+      end
+
+      # Removes all classes not allowlisted in the below semantic_classes array - such as tailwinds utility classes
+      def cleanup_tailwind_classes(node)
+        class_name = node.attr("class")
+
+        if class_name == nil
+          return node.children.each { |child| cleanup_tailwind_classes(child) }
+        end
+
+        semantic_classes = ["code", "color-swatch", "color-swatch-container", "color-tone-information", "color-swatch-group", "color", "colors", "long-quick-reference"]
+
+        classes = class_name.split.select do |klas|
+          semantic_classes.include? klas
+        end
+
+        if classes.length === 0
+          node.delete("class")
+        else
+          node.set_attribute("class", classes.join(" "))
+        end
+
+        node.children.each { |child| cleanup_tailwind_classes(child) }
+      end
+    end
+  end
+end

lib/docs/filters/tailwindcss/entries.rb

@@ -0,0 +1,24 @@
+module Docs
+  class Tailwindcss
+    class EntriesFilter < Docs::EntriesFilter
+      def get_type
+        # We are only interested in children list items
+        selector = "nav li li a[href='#{result[:path]}']"
+
+        anchor = at_css(selector)
+        category_list = anchor.ancestors('li')[1]
+        title = category_list.css('h5')
+
+        return title.inner_text
+      end
+
+      def get_name
+        # We are only interested in children list items
+        selector = "nav li li a[href='#{result[:path]}']"
+        item = at_css(selector)
+
+        return item.inner_text
+      end
+    end
+  end
+end

lib/docs/filters/tailwindcss/noop.rb

@@ -0,0 +1,9 @@
+module Docs
+  class Tailwindcss
+    class NoopFilter < Filter
+      def call
+        return html
+      end
+    end
+  end
+end

lib/docs/scrapers/tailwindcss.rb

@@ -0,0 +1,59 @@
+module Docs
+  class Tailwindcss < UrlScraper
+    self.name = 'Tailwind CSS'
+    self.type = 'tailwindcss'
+    self.slug = 'tailwindcss'
+    self.base_url = 'https://tailwindcss.com/docs'
+    self.root_path = '/'
+    self.release = '3.0.23'
+    self.links = {
+      home: 'tps://tailwindcss.com/',
+      code: 'https://github.com/tailwindlabs/tailwindcss'
+    }
+
+    html_filters.push 'tailwindcss/entries', 'tailwindcss/clean_html'
+
+    # Disable the clean text filter which removes empty nodes - we'll do it ourselves more selectively
+    text_filters.replace("clean_text", "tailwindcss/noop")
+
+    # Fix redirects from older tailwind 2 docs
+    options[:fix_urls] = lambda do |url|
+      if url.include? "installation/"
+        break "/docs/installation"
+      end
+
+      if url.end_with? "/breakpoints"
+        break "/docs/screens#{/#.*$/.match(url)}"
+      end
+      if url.end_with? "/adding-base-styles"
+        break "/docs/adding-custom-styles#adding-base-styles"
+      end
+      if url.end_with? "/ring-opacity"
+        break "/docs/ring-color#changing-the-opacity"
+      end
+
+      if url.match(/\/colors#?/)
+        break "/docs/customizing-colors#{/#.*$/.match(url)}"
+      end
+    end
+
+    options[:skip_patterns] = [
+      # Skip setup instructions
+      /\/browser-support$/,
+      /\/editor-setup$/,
+      /\/installation$/,
+      /\/optimizing-for-production$/,
+      /\/upgrade-guide/,
+      /\/using-with-preprocessors/
+    ]
+
+    #Obtainable from https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE
+    options[:attribution] = <<-HTML
+      &copy; 2022 Tailwind Labs Inc.
+    HTML
+
+    def get_latest_version(opts)
+      get_latest_github_release('tailwindlabs', 'tailwindcss', opts)
+    end
+  end
+end

public/icons/docs/tailwindcss/SOURCE

@@ -0,0 +1 @@
+https://tailwindcss.com/favicons/favicon.ico