From 8d27cd6c2931aa14ff10154b6d517df797368504 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Denilson=20S=C3=A1=20Maia?= <denilsonsa@gmail.com>
Date: Fri, 17 Oct 2025 21:42:09 +0200
Subject: [PATCH 1/3] New docs: Lit

As requested in:

* https://trello.com/c/PVnfdeaN#comment-665fffaa2798a59513617915
* https://trello.com/c/PVnfdeaN#comment-60a7c84181482c8dce7d0f55

In a period of one year, it went from 17k to 20k stars on GitHub.

This is my first time contributing to devdocs, it took me an entire day
to learn how to write a new scraper and new filters for this
documentation, including the time spent fine-tuning the result.
---
 assets/stylesheets/application.css.scss |   1 +
 assets/stylesheets/pages/_lit.scss      |  52 +++++++++++++++++
 lib/docs/filters/lit/clean_html.rb      |  71 +++++++++++++++++++++++
 lib/docs/filters/lit/entries.rb         |  72 ++++++++++++++++++++++++
 lib/docs/scrapers/lit.rb                |  55 ++++++++++++++++++
 public/icons/docs/lit/16.png            | Bin 0 -> 399 bytes
 public/icons/docs/lit/16@2x.png         | Bin 0 -> 538 bytes
 public/icons/docs/lit/SOURCE            |   3 +
 8 files changed, 254 insertions(+)
 create mode 100644 assets/stylesheets/pages/_lit.scss
 create mode 100644 lib/docs/filters/lit/clean_html.rb
 create mode 100644 lib/docs/filters/lit/entries.rb
 create mode 100644 lib/docs/scrapers/lit.rb
 create mode 100644 public/icons/docs/lit/16.png
 create mode 100644 public/icons/docs/lit/16@2x.png
 create mode 100644 public/icons/docs/lit/SOURCE

diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index b45e7b602e..12247d4405 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -82,6 +82,7 @@
         'pages/kubernetes',
         'pages/laravel',
         'pages/liquid',
+        'pages/lit',
         'pages/love',
         'pages/lua',
         'pages/gnu_make',
diff --git a/assets/stylesheets/pages/_lit.scss b/assets/stylesheets/pages/_lit.scss
new file mode 100644
index 0000000000..c12f99c073
--- /dev/null
+++ b/assets/stylesheets/pages/_lit.scss
@@ -0,0 +1,52 @@
+._lit {
+  @extend %simple;
+
+  h4 { @extend %block-label, %label-blue; }
+
+  .propertyDetails {
+    padding-left:1.5em
+  }
+  .heading.property {
+    margin-top:2em
+  }
+  .heading.property > h4 {
+    font-weight:400
+  }
+  .newKeyword,
+  .readonlyKeyword,
+  .staticKeyword {
+    font-style:italic
+  }
+  .functionName,
+  .propertyName {
+    font-weight:700
+  }
+  aside.litdev-aside {
+    display: flex;
+    border-style: solid;
+    border-width: 1px;
+    padding: 1em 1em 1em 0em;
+    margin: 1em 0;
+    svg {
+      width: 1.5em;
+      margin-inline: 1em;
+    }
+  }
+  litdev-switchable-sample {
+    pre[data-language] {
+      position: relative;
+    }
+    pre[data-language]::before {
+      position: absolute;
+      top: 0;
+      right: 16px;
+      opacity: 0.5;
+    }
+    pre[data-language="js"]::before {
+      content: "JavaScript";
+    }
+    pre[data-language="ts"]::before {
+      content: "TypeScript";
+    }
+  }
+}
diff --git a/lib/docs/filters/lit/clean_html.rb b/lib/docs/filters/lit/clean_html.rb
new file mode 100644
index 0000000000..da7eb03c2c
--- /dev/null
+++ b/lib/docs/filters/lit/clean_html.rb
@@ -0,0 +1,71 @@
+module Docs
+  class Lit
+    class CleanHtmlFilter < Filter
+      def call
+
+        css('.offscreen, #inlineToc, a.anchor, [aria-hidden="true"], #prevAndNextLinks').remove
+
+        css('[tabindex]').remove_attribute('tabindex')
+
+        # Removing the side navigation.
+        css('#docsNavWrapper, #rhsTocWrapper').remove
+
+        # Removing this extra div.
+        div = at_css('#articleWrapper')
+        article = div.at_css('article')
+        article.remove_attribute('id')
+        div.replace(article)
+
+        # Expanding and replacing the <template>, statically.
+        # This code is a hacky incomplete implementation of
+        # https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/src/components/litdev-aside.ts
+        css('litdev-aside').each do |node|
+          frag = Nokogiri::HTML::DocumentFragment.new(node.document)
+          template = node.at_css('template')
+          aside = template.children.first
+          aside['class'] = 'litdev-aside'
+          frag.add_child(aside)
+          template.remove
+          div = Nokogiri::XML::Node.new('div', @doc)
+          div.add_child(node.children)
+          aside.add_child(div)
+          node.replace(aside)
+        end
+
+        # Removing the live playground examples.
+        # https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/src/components/litdev-example.ts
+        # Someday we can try enabling the live examples by adding appropriate code to assets/javascripts/views/pages/.
+        css('litdev-example').each do |node|
+          node.remove
+        end
+
+        # Cleaning up the preformatted example code.
+        css('pre:has(code[class])').each do |node|
+          lang = node.at_css('code')['class']
+          lang.sub! /^language-/, ''
+          node.content = node.css('.cm-line').map(&:content).join("\n")
+          node['data-language'] = lang
+        end
+
+        # Cleaning up example import.
+        css('div.import').each do |node|
+          pre = Nokogiri::XML::Node.new('pre', @doc)
+          pre.content = node.css('.cm-line').map(&:content).join("\n")
+          pre['data-language'] = 'javascript'
+          node.replace(pre)
+        end
+
+        # Moving the "kind" to inside the header.
+        # Because it looks better this way.
+        css('.kindTag').each do |kindtag|
+          heading = kindtag.parent
+          next unless heading['class'].include? 'heading'
+          h = heading.at_css('h2, h3, h4')
+          h.prepend_child(kindtag)
+        end
+
+        doc
+      end
+    end
+  end
+end
diff --git a/lib/docs/filters/lit/entries.rb b/lib/docs/filters/lit/entries.rb
new file mode 100644
index 0000000000..c3606cbfdc
--- /dev/null
+++ b/lib/docs/filters/lit/entries.rb
@@ -0,0 +1,72 @@
+module Docs
+  class Lit
+    class EntriesFilter < Docs::EntriesFilter
+
+      def get_name
+        name = at_css('h1').content.strip
+      end
+
+      def get_type
+        # The type/category is section name from the sidebar.
+        active = at_css('#docsNav details li.active')
+        return nil unless active
+        summary = active.ancestors('details').first.at_css('summary')
+        return nil unless summary
+        summary.css('[aria-hidden="true"]').remove
+        summary.content.strip
+      end
+
+      def additional_entries
+        entries = []
+
+        # Code for the API reference pages (and other similar pages).
+        scope_name = ''
+        css('.heading > h2[id], .heading > h3[id], .heading > h4[id]').each do |node|
+          name = node.content.strip
+          id = node['id']
+          # The kindTag has these values:
+          # class, decorator, directive, function, namespace, type, value
+          kind = node.parent.at_css('.kindTag')&.content&.strip
+
+          if kind
+            # Saving the current "scope", i.e. the current class name.
+            # This is useful to prefix the method/property names, which are defined after this element.
+            scope_name = name
+            name = kind + " " + name
+          else
+            # If this is a method/property, it has a different markup.
+            # Let's extract them and add a prefix for disambiguation.
+            function = node.at_css('.functionName')
+            property = node.at_css('.propertyName')
+            if function
+              # Note how "functions" are actually "methods" of some class.
+              # Bare (top-level) functions are extracted when `.kindTag` is "function".
+              name = scope_name + '.' + function.content.strip
+              kind = 'method'
+            elsif property
+              name = scope_name + '.' + property.content.strip
+              kind = 'property'
+            end
+          end
+
+          # If we couldn't figure out the kind, this is a header tag that we can ignore.
+          entries << [name, id, kind] if kind
+        end
+
+        # Code for the Built-in Directives page.
+        # This page has a TOC of the built-in directives, with a clear documentation of each one.
+        # Note that the directives are also indexed in the API reference pages.
+        # Yes, each directive is indexed twice, because each one is documented twice.
+        css('.directory a[href^="#"]').each do |node|
+          name = node.content.strip
+          id = node['href'].sub /^#/, ''
+          # type will be "Built-in directives"
+          type = node.ancestors('article').at_css('h1').content.strip
+          entries << [name, id, type]
+        end
+
+        entries
+      end
+    end
+  end
+end
diff --git a/lib/docs/scrapers/lit.rb b/lib/docs/scrapers/lit.rb
new file mode 100644
index 0000000000..6a8684788d
--- /dev/null
+++ b/lib/docs/scrapers/lit.rb
@@ -0,0 +1,55 @@
+module Docs
+  class Lit < UrlScraper
+    self.name = 'Lit'
+    self.slug = 'lit'
+    self.type = 'lit'
+
+    self.links = {
+      home: 'https://lit.dev/',
+      code: 'https://github.com/lit/lit/'
+    }
+
+    options[:container] = 'main'
+
+    options[:max_image_size] = 250_000
+
+    # Note: the copyright will change soon due to https://lit.dev/blog/2025-10-14-openjs/
+    options[:attribution] = <<-HTML
+      &copy; Google LLC<br>
+      Licensed under the Creative Commons Attribution 3.0 Unported License.
+    HTML
+
+    options[:fix_urls] = ->(url) do
+      # A name without any extension is assumed to be a directory.
+      # example.com/foobar -> example.com/foobar/
+      url.sub! /(\/[-a-z0-9]+)([#?]|$)/i, '\1/\2'
+
+      url
+    end
+
+    # The order of the filters is important.
+    # The entries filter is applied to the raw (mostly) unmodified HTML.
+    # The clean_html filter reformats the HTML to the a more appropriate markup for devdocs.
+    html_filters.push 'lit/entries', 'lit/clean_html'
+
+    version '3' do
+      self.release = '3.3.1'
+      self.base_url = 'https://lit.dev/docs/'
+      options[:skip_patterns] = [/v\d+\//]
+    end
+
+    version '2' do
+      self.release = '2.8.0'
+      self.base_url = 'https://lit.dev/docs/v2/'
+    end
+
+    version '1' do
+      self.release = '1.0.1'
+      self.base_url = 'https://lit.dev/docs/v1/'
+    end
+
+    def get_latest_version(opts)
+      get_npm_version('lit', opts)
+    end
+  end
+end
diff --git a/public/icons/docs/lit/16.png b/public/icons/docs/lit/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dfe35fbe745de1dda2186d4be69e5707f20c359
GIT binary patch
literal 399
zcmV;A0dW3_P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00042Nkl<ZcmbW#
z18gL56vy#7J9cvBdUtS&FFM;+-NsfCTeWQ)u~o-KT-*M2-Xw4BBs25Z_p=lL_`Jl|
zNTR2|%Wo{c0>T0~4hs-p!c3t%a9d0_8^p95fq~bM+yRR3*fMADi0M+u0LSVDpMdxV
zIw=w-+yPw-_HN7BixfKpbe0+hD2h~r)*DZ7iUD05aC{Wtm;o(*g?eh-0T5z+g@^hm
zY*H*txdQt8`S&PRFZcpr_`cY8e2ijOK>a8%ec9}xGd=<9(*<1p-iBkdTg$?<1GueZ
z<3jy7?!;lwCt!QFysndqaph|rw8bre5RNr00q_b~9t}t9<U)Ei1{hhmP&>Xyu^T|w
zA3Gp?s6KYbmQ~>f?5NipVG_^Oc*_NNjXL@@7;r%}VE<sBV%}p!1@<jp(8)0a_Dhno
tPF#v;YCSzR|JUOmH;uPfQ_#&ZUx$t5fvZ;g6=(ne002ovPDHLkV1o5jtiJ#N

literal 0
HcmV?d00001

diff --git a/public/icons/docs/lit/16@2x.png b/public/icons/docs/lit/16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c4a5197f005e70869d5815bc1decb4f97e5ccd0
GIT binary patch
literal 538
zcmV+#0_FXQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80005uNkl<ZcmciF
zGu#|O0EY36%h+hnzTJ)8#ztRU`sS)wP1M9j9lMKd+qRv&*$F<pzqxPbG{ti8{M)er
z6nr^DF<Cr|xr&NALja=yjvEDV+$ezKrU4u`5AZ_6L`)apx=ZQ>oCT560fr)@3lQ;e
zdhv#^vm|2>KyiC9i~=}r6u@!g0FD<0a5Jcv55OLZUm<tNMiJBnaHD!?FxGYIk5)PW
zdpOW&CpcUqz#fI>-rAM90Yh-YyDl+80Az9Ni4wr^v!bB_fDr;9i)#Ql4lMv91c2k3
z0FLVc7$E@mF#Mvp67Vm6j`mao7!ezXc@$RyB7HVyIbIlG@XufECtSK_J<|sS`mTmQ
z`}v+Et_DyXvF^LkYT91Z{`mc~1R;$#IPwx5W&;HQC@wY?fWH&I1B8&p#s4Az6t4=9
zAY}340ABo8)i?tPQ5iq{;(xqwfIax@MUFFo5gacH5be5k3&$Bih=&ahJbz7b6<}9R
zKq9fQaoApRLKE=JyOP!;M7-c*O~6@q5SqyWgdl)4{{NE^4B$8e6bJ%PoDmG*xEeqR
z0&rZ8s0tX0a~xL#2q6HqzW#VCkINAPkQ$5I6juZI3c5?0wVb){fb|V&?bFUvB-<{;
cVOgB7-x+S0%QTkAod5s;07*qoM6N<$f_@p^+yDRo

literal 0
HcmV?d00001

diff --git a/public/icons/docs/lit/SOURCE b/public/icons/docs/lit/SOURCE
new file mode 100644
index 0000000000..00e4611ac4
--- /dev/null
+++ b/public/icons/docs/lit/SOURCE
@@ -0,0 +1,3 @@
+https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/images/flame.svg
+https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/images/icon.svg
+https://github.com/lit/lit/blob/main/packages/lit/logo.svg

From 5fdeff7c5c6b6633dfc72e233390f145b41fa545 Mon Sep 17 00:00:00 2001
From: Simon Legner <Simon.Legner@gmail.com>
Date: Sat, 18 Oct 2025 17:56:02 +0200
Subject: [PATCH 2/3] lit: view-source float right

---
 assets/stylesheets/pages/_lit.scss | 17 +++++++++++------
 lib/docs/filters/lit/clean_html.rb |  7 +++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/assets/stylesheets/pages/_lit.scss b/assets/stylesheets/pages/_lit.scss
index c12f99c073..f0066d80a1 100644
--- a/assets/stylesheets/pages/_lit.scss
+++ b/assets/stylesheets/pages/_lit.scss
@@ -1,25 +1,30 @@
 ._lit {
   @extend %simple;
 
-  h4 { @extend %block-label, %label-blue; }
+  h4 {
+    @extend %block-label, %label-blue;
+  }
 
+  .view-source {
+    float: right;
+  }
   .propertyDetails {
-    padding-left:1.5em
+    padding-left: 1.5em;
   }
   .heading.property {
-    margin-top:2em
+    margin-top: 2em;
   }
   .heading.property > h4 {
-    font-weight:400
+    font-weight: 400;
   }
   .newKeyword,
   .readonlyKeyword,
   .staticKeyword {
-    font-style:italic
+    font-style: italic;
   }
   .functionName,
   .propertyName {
-    font-weight:700
+    font-weight: 700;
   }
   aside.litdev-aside {
     display: flex;
diff --git a/lib/docs/filters/lit/clean_html.rb b/lib/docs/filters/lit/clean_html.rb
index da7eb03c2c..b79fa1a6b8 100644
--- a/lib/docs/filters/lit/clean_html.rb
+++ b/lib/docs/filters/lit/clean_html.rb
@@ -64,6 +64,13 @@ def call
           h.prepend_child(kindtag)
         end
 
+        # View source
+        css('h2 ~ a.viewSourceLink, h3 ~ a.viewSourceLink, h4 ~ a.viewSourceLink').each do |node|
+          node['class'] = 'view-source'
+          node.content = 'Source'
+          node.previous_element << node
+        end
+
         doc
       end
     end

From 53564c7de579fcfcc59388b3e745d5b5999da8ff Mon Sep 17 00:00:00 2001
From: Simon Legner <Simon.Legner@gmail.com>
Date: Sat, 18 Oct 2025 17:59:04 +0200
Subject: [PATCH 3/3] lit: remove mdnIcon

---
 lib/docs/filters/lit/clean_html.rb | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/docs/filters/lit/clean_html.rb b/lib/docs/filters/lit/clean_html.rb
index b79fa1a6b8..95873ca4c7 100644
--- a/lib/docs/filters/lit/clean_html.rb
+++ b/lib/docs/filters/lit/clean_html.rb
@@ -71,6 +71,12 @@ def call
           node.previous_element << node
         end
 
+        css('.mdnIcon').each do |node|
+          parent = node.parent
+          node.remove
+          parent.content = parent.content.strip
+        end
+
         doc
       end
     end