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..f0066d80a1 --- /dev/null +++ b/assets/stylesheets/pages/_lit.scss @@ -0,0 +1,57 @@ +._lit { + @extend %simple; + + h4 { + @extend %block-label, %label-blue; + } + + .view-source { + float: right; + } + .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..95873ca4c7 --- /dev/null +++ b/lib/docs/filters/lit/clean_html.rb @@ -0,0 +1,84 @@ +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