History

Merge pull request #1711 from IgnusG/tailwindcss-devdocs

Tailwindcss Devdocs v3

Simon Legner committed 4 years ago

Commit 2584ecc2 parents 6bcdaaa 034f29111 files · +264 −-1Browse files

Unified · Split

11 files
  1. assets/javascripts/news.json +5 −1
  2. assets/javascripts/templates/pages/about_tmpl.coffee +5 −0
  3. assets/stylesheets/application.css.scss +1 −0
  4. assets/stylesheets/pages/_tailwindcss.scss +48 −0
  5. lib/docs/filters/tailwindcss/clean_html.rb +114 −0
  6. lib/docs/filters/tailwindcss/entries.rb +24 −0
  7. lib/docs/filters/tailwindcss/noop.rb +9 −0
  8. lib/docs/scrapers/tailwindcss.rb +59 −0
  9. public/icons/docs/tailwindcss/16.png +0 −0
  10. public/icons/docs/tailwindcss/16@2x.png +0 −0
  11. public/icons/docs/tailwindcss/SOURCE +1 −0
assets/javascripts/news.json+5−1
@@ -1,6 +1,10 @@
1[1[
2 [2 [
3 "2021-01-12",3 "2022-02-21",
4 "New documentation: <a href=\"/tailwindcss/\">Tailwind CSS</a>"
5 ],
6 [
7 "2022-01-12",
4 "New documentation: <a href=\"/react_router/\">React Router</a>"8 "New documentation: <a href=\"/react_router/\">React Router</a>"
5 ],9 ],
6 [10 [
assets/javascripts/templates/pages/about_tmpl.coffee+5−0
@@ -842,6 +842,11 @@ credits = [ · 841 unmodified lines
842 '2004-2017 Fabien Potencier',842 '2004-2017 Fabien Potencier',
843 'MIT',843 'MIT',
844 'https://symfony.com/doc/current/contributing/code/license.html'844 'https://symfony.com/doc/current/contributing/code/license.html'
845 ], [
846 'TailwindCSS',
847 '2022 Tailwind Labs, Inc.',
848 'MIT',
849 'https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/LICENSE'
845 ], [850 ], [
846 'Tcl/Tk',851 'Tcl/Tk',
847 'The Regents of the University of California, Sun Microsystems, Inc., Scriptics Corporation, and other parties',852 'The Regents of the University of California, Sun Microsystems, Inc., Scriptics Corporation, and other parties',
assets/stylesheets/application.css.scss+1−0
@@ -116,6 +116,7 @@ · 115 unmodified lines
116 'pages/sphinx_simple',116 'pages/sphinx_simple',
117 'pages/sqlite',117 'pages/sqlite',
118 'pages/support_tables',118 'pages/support_tables',
119 'pages/tailwindcss',
119 'pages/tcl_tk',120 'pages/tcl_tk',
120 'pages/tensorflow',121 'pages/tensorflow',
121 'pages/terraform',122 'pages/terraform',
assets/stylesheets/pages/_tailwindcss.scss+48−0
@@ -0,0 +1,48 @@
1._tailwindcss {
2 // Styling for customizing-colors page - color swatches (based on original tailwind display design)
3 .colors {
4 display: flex;
5 flex-direction: column;
6 gap: 1.2rem;
7
8 // Text offset
9 margin-bottom: 1rem;
10 }
11
12 // Color swatch title
13 .color > div:first-child {
14 font-weight: bold;
15 }
16
17 .color-swatch-group {
18 display: flex;
19 gap: 1rem;
20 flex-wrap: wrap;
21 }
22
23 .color-swatch-container {
24 display: inline-block;
25 }
26
27 // Tiny box with the color set as background
28 .color-swatch {
29 width: 120px;
30 height: 40px;
31 border-radius: 4px;
32 }
33
34 .color-tone-information {
35 display: flex;
36 justify-content: space-between;
37 }
38
39 // Styling for large quick-reference lookup tables
40 .long-quick-reference {
41 max-height: 40vh;
42 width: fit-content;
43 overflow-y: auto;
44 padding: .3rem;
45 border-top: 1px solid var(--textColor);
46 border-bottom: 1px solid var(--textColor);
47 }
48}
lib/docs/filters/tailwindcss/clean_html.rb+114−0
@@ -0,0 +1,114 @@
1module Docs
2 class Tailwindcss
3 class CleanHtmlFilter < Filter
4 def call
5 # Remove main page headers (top level sticky)
6 css('#__next > .sticky').remove
7 # And anything absolutely positioned (fancy floating navigation elements we don't care about)
8 css('#__next .absolute').remove
9 # Remove the left-navigation we scraped
10 css('nav').remove
11
12 css('svg').remove if root_page?
13
14 # Remove the duplicate category name at the top of the page - redundant
15 at_css('header#header > div:first-child > p:first-child').remove
16
17 # Remove the right navigation sidebar
18 at_css('header#header').parent.css('> div:has(h5:contains("On this page"))').remove
19
20 # Remove footer + prev/next navigation
21 at_css('footer').remove
22
23 # Handle long lists of class reference that otherwise span several scrolled pages
24 if class_reference = at_css('#class-reference')
25 reference_container = class_reference.parent
26 classes_container = reference_container.children.reject{ |child| child == class_reference }.first
27
28 rows = classes_container.css("tr")
29
30 if rows.length > 10
31 classes_container.set_attribute("class", "long-quick-reference")
32 end
33 end
34
35 # Remove border color preview column as it isn't displayed anyway
36 if result[:path] == "border-color" and class_reference = at_css('#class-reference')
37 class_reference.parent.css("thead th:nth-child(3)").remove
38 class_reference.parent.css("tbody td:nth-child(3)").remove
39 end
40
41 if result[:path] == "customizing-colors"
42 # It's nice to be able to quickly find out what a color looks like
43 css('div[style^="background-color:"]').each do |node|
44 node.set_attribute("class", "color-swatch")
45
46 swatch_container = node.parent
47 swatch_container.set_attribute("class", "color-swatch-container")
48 swatch_container.children.reject{ |child| child == node }.first.set_attribute("class", "color-tone-information")
49
50 swatch_group = swatch_container.parent
51 swatch_group.set_attribute("class", "color-swatch-group")
52
53 color = swatch_group.parent
54 color.set_attribute("class", "color")
55
56 color_list = color.parent.parent
57 color_list.set_attribute("class", "colors")
58 end
59 end
60
61 # Remove buttons to expand lists - those are already expanded and the button is useless
62 css('div > button:contains("Show all classes")').each do |node|
63 node.parent.remove
64 end
65
66 # Remove class examples - not part of devdocs styleguide? (similar to bootstrap)
67 # Refer to https://github.com/freeCodeCamp/devdocs/pull/1534#pullrequestreview-649818936
68 css('.not-prose').each do |node|
69 if node.parent.children.length == 1
70 node.parent.remove
71 else
72 node.remove
73 end
74 end
75
76 # Properly format code examples
77 css('pre > code:first-child').each do |node|
78 node.parent['data-language'] = node['class'][/language-(\w+)/, 1] if node['class'] and node['class'][/language-(\w+)/]
79 node.parent.content = node.parent.content
80 end
81
82 @doc.traverse { |node| cleanup_tailwind_classes(node) }
83
84 #remove weird <hr> (https://github.com/damms005/devdocs/commit/8c9fbd859b71a2525b94a35ea994393ce2b6fedb#commitcomment-50091018)
85 css('hr').remove
86
87 doc
88 end
89
90 # Removes all classes not allowlisted in the below semantic_classes array - such as tailwinds utility classes
91 def cleanup_tailwind_classes(node)
92 class_name = node.attr("class")
93
94 if class_name == nil
95 return node.children.each { |child| cleanup_tailwind_classes(child) }
96 end
97
98 semantic_classes = ["code", "color-swatch", "color-swatch-container", "color-tone-information", "color-swatch-group", "color", "colors", "long-quick-reference"]
99
100 classes = class_name.split.select do |klas|
101 semantic_classes.include? klas
102 end
103
104 if classes.length === 0
105 node.delete("class")
106 else
107 node.set_attribute("class", classes.join(" "))
108 end
109
110 node.children.each { |child| cleanup_tailwind_classes(child) }
111 end
112 end
113 end
114end
lib/docs/filters/tailwindcss/entries.rb+24−0
@@ -0,0 +1,24 @@
1module Docs
2 class Tailwindcss
3 class EntriesFilter < Docs::EntriesFilter
4 def get_type
5 # We are only interested in children list items
6 selector = "nav li li a[href='#{result[:path]}']"
7
8 anchor = at_css(selector)
9 category_list = anchor.ancestors('li')[1]
10 title = category_list.css('h5')
11
12 return title.inner_text
13 end
14
15 def get_name
16 # We are only interested in children list items
17 selector = "nav li li a[href='#{result[:path]}']"
18 item = at_css(selector)
19
20 return item.inner_text
21 end
22 end
23 end
24end
lib/docs/filters/tailwindcss/noop.rb+9−0
@@ -0,0 +1,9 @@
1module Docs
2 class Tailwindcss
3 class NoopFilter < Filter
4 def call
5 return html
6 end
7 end
8 end
9end
lib/docs/scrapers/tailwindcss.rb+59−0
@@ -0,0 +1,59 @@
1module Docs
2 class Tailwindcss < UrlScraper
3 self.name = 'Tailwind CSS'
4 self.type = 'tailwindcss'
5 self.slug = 'tailwindcss'
6 self.base_url = 'https://tailwindcss.com/docs'
7 self.root_path = '/'
8 self.release = '3.0.23'
9 self.links = {
10 home: 'tps://tailwindcss.com/',
11 code: 'https://github.com/tailwindlabs/tailwindcss'
12 }
13
14 html_filters.push 'tailwindcss/entries', 'tailwindcss/clean_html'
15
16 # Disable the clean text filter which removes empty nodes - we'll do it ourselves more selectively
17 text_filters.replace("clean_text", "tailwindcss/noop")
18
19 # Fix redirects from older tailwind 2 docs
20 options[:fix_urls] = lambda do |url|
21 if url.include? "installation/"
22 break "/docs/installation"
23 end
24
25 if url.end_with? "/breakpoints"
26 break "/docs/screens#{/#.*$/.match(url)}"
27 end
28 if url.end_with? "/adding-base-styles"
29 break "/docs/adding-custom-styles#adding-base-styles"
30 end
31 if url.end_with? "/ring-opacity"
32 break "/docs/ring-color#changing-the-opacity"
33 end
34
35 if url.match(/\/colors#?/)
36 break "/docs/customizing-colors#{/#.*$/.match(url)}"
37 end
38 end
39
40 options[:skip_patterns] = [
41 # Skip setup instructions
42 /\/browser-support$/,
43 /\/editor-setup$/,
44 /\/installation$/,
45 /\/optimizing-for-production$/,
46 /\/upgrade-guide/,
47 /\/using-with-preprocessors/
48 ]
49
50 #Obtainable from https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE
51 options[:attribution] = <<-HTML
52 &copy; 2022 Tailwind Labs Inc.
53 HTML
54
55 def get_latest_version(opts)
56 get_latest_github_release('tailwindlabs', 'tailwindcss', opts)
57 end
58 end
59end
public/icons/docs/tailwindcss/16.png+0−0

Binary file not shown.

public/icons/docs/tailwindcss/16@2x.png+0−0

Binary file not shown.

public/icons/docs/tailwindcss/SOURCE+1−0
@@ -0,0 +1 @@
1https://tailwindcss.com/favicons/favicon.ico