diff options
author | Yaco <franco@reevo.org> | 2020-06-04 11:01:00 -0300 |
---|---|---|
committer | Yaco <franco@reevo.org> | 2020-06-04 11:01:00 -0300 |
commit | fc7369835258467bf97eb64f184b93691f9a9fd5 (patch) | |
tree | daabd60089d2dd76d9f5fb416b005fbe159c799d /www/wiki/docs/kss |
first commit
Diffstat (limited to 'www/wiki/docs/kss')
-rw-r--r-- | www/wiki/docs/kss/Makefile | 19 | ||||
-rw-r--r-- | www/wiki/docs/kss/README.txt | 21 | ||||
-rwxr-xr-x | www/wiki/docs/kss/scripts/kss-node-check.sh | 20 | ||||
-rw-r--r-- | www/wiki/docs/kss/styleGuideModules.txt | 10 | ||||
-rw-r--r-- | www/wiki/docs/kss/styleguide-template/index.html | 87 | ||||
-rw-r--r-- | www/wiki/docs/kss/styleguide-template/public/kss.less | 193 |
6 files changed, 350 insertions, 0 deletions
diff --git a/www/wiki/docs/kss/Makefile b/www/wiki/docs/kss/Makefile new file mode 100644 index 00000000..392ad1ac --- /dev/null +++ b/www/wiki/docs/kss/Makefile @@ -0,0 +1,19 @@ +MEDIAWIKI_LOAD_URL ?= http://localhost/w/load.php + +kss: kssnodecheck +# Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader, then applies it to the +# KSS style guide + $(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX)) + $(eval MODULE_STR := $(shell paste -sd "|" styleGuideModules.txt)) +# See ResourceLoaderClientHtml::makeLoad. + @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=${MODULE_STR}&only=styles" > $(KSS_RL_TMP) + @node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template + @rm $(KSS_RL_TMP) + +kssopen: kss + @echo Opening the generated style guide... + @command -v xdg-open >/dev/null 2>&1 || { open ${PWD}/static/index.html; exit 0; } + @xdg-open ${PWD}/static/index.html + +kssnodecheck: + @scripts/kss-node-check.sh diff --git a/www/wiki/docs/kss/README.txt b/www/wiki/docs/kss/README.txt new file mode 100644 index 00000000..76cfb627 --- /dev/null +++ b/www/wiki/docs/kss/README.txt @@ -0,0 +1,21 @@ +The Makefile, package.json, scripts, styleguide-template, and +mediawiki.ui/styleguide.md files and directories here and in +resources/src/mediawiki.ui/ support the automatic generation +of CSS documentation from the source LESS files using kss for +node.js, https://github.com/kneath/kss + +To build and open in your web browser, run: + +MEDIAWIKI_LOAD_URL=mediawiki_hostname/w/load.php make kssopen + +For example, + +MEDIAWIKI_LOAD_URL=1.2.3.4/w/load.php make kssopen + +If MediaWiki is running on localhost, you can omit MEDIAWIKI_LOAD_URL. + +To rebuild without opening the web browser, run: + +MEDIAWIKI_LOAD_URL=mediawiki_hostname/w/load.php make + +When modifying styleGuideModules.txt, keep the list in strict alphabetical order (with no extra formatting), so CSS loads in the same order as ResourceLoader's addModuleStyles does; this can affect rendering. diff --git a/www/wiki/docs/kss/scripts/kss-node-check.sh b/www/wiki/docs/kss/scripts/kss-node-check.sh new file mode 100755 index 00000000..84ee1c4e --- /dev/null +++ b/www/wiki/docs/kss/scripts/kss-node-check.sh @@ -0,0 +1,20 @@ +#!/usr/bin/env bash + +if command -v npm > /dev/null ; then + npm install +else + # If npm isn't installed, but kss-node is, exit normally. + # This allows setting it up on one machine, and running it on + # another (e.g. Tools Labs execution nodes) that doesn't have npm + # installed. However, "npm install" still needs to be run + # occasionally to keep kss updated. + + KSS_NODE="${BASH_SOURCE%/*}/../node_modules/.bin/kss-node" + if ! [ -x "$KSS_NODE" ] ; then + echo "Neither kss-node nor npm are installed." + echo "To install npm, see http://nodejs.org/" + echo "When npm is installed, the Makefile can automatically" + echo "install kss-node." + exit 1 + fi +fi diff --git a/www/wiki/docs/kss/styleGuideModules.txt b/www/wiki/docs/kss/styleGuideModules.txt new file mode 100644 index 00000000..20910105 --- /dev/null +++ b/www/wiki/docs/kss/styleGuideModules.txt @@ -0,0 +1,10 @@ +mediawiki.legacy.commonPrint +mediawiki.legacy.shared +mediawiki.ui +mediawiki.ui.anchor +mediawiki.ui.button +mediawiki.ui.checkbox +mediawiki.ui.icon +mediawiki.ui.input +mediawiki.ui.radio +mediawiki.ui.text diff --git a/www/wiki/docs/kss/styleguide-template/index.html b/www/wiki/docs/kss/styleguide-template/index.html new file mode 100644 index 00000000..d1ae26af --- /dev/null +++ b/www/wiki/docs/kss/styleguide-template/index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="generator" content="kss-node" /> + + <title>MediaWiki Living Styleguide</title> + + <link rel="stylesheet" href="public/kss.css"> + <link rel="stylesheet" href="public/style.css"> +</head> +<body><div id="kss-wrapper"> + <header id="kss-header"> + <div class="container"> + <hgroup><h1>Mediawiki.UI</h1></hgroup> + </div> + </header> + + <div class="container"> + <nav> + <ul> + <li><a href="index.html"><span>0.0</span> Overview</a></li> + {{#eachRoot}} + <li> + <a href="section-{{ reference }}.html"> + <span>{{ reference }}.0</span> {{ header }} + </a> + <ul> + {{#eachSection reference}} + {{#whenDepth 2}} + <li> + <a href="section-{{../../reference}}.html#section-{{ reference }}"> + <span>{{ reference }}</span> + {{ header }} + </a> + </li> + {{/whenDepth}} + {{/eachSection}} + </ul> + </li> + {{/eachRoot}} + </ul> + </nav> + + <div class="content"> + {{#if overview}} + {{html overview}} + {{else}} + {{#eachSection rootNumber}} + <div> + {{#whenDepth 1}} + <h1>{{ reference }}.0 {{ header }}</h1> + {{else}} + {{#whenDepth 2}} + <a name="section-{{ reference }}"></a> + <h2><a href="#section-{{ reference }}">{{ reference }} {{ header }}</a></h2> + {{/whenDepth}} + {{#whenDepth 3}} + <a name="section-{{ reference }}"></a> + <h3><a href="#section-{{ reference }}">{{ reference }} {{ header }}</a></h3> + {{/whenDepth}} + {{/whenDepth}} + {{#ifAny markup modifiers}} + <div>{{html description}}</div> + <div class="example"> + <pre class="prettyprint lang-html">{{markup}}</pre> + <blockquote>{{modifierMarkup}}</blockquote> + </div> + {{#eachModifier}} + <h4>{{name}}</h4> + {{html description}} + <blockquote>{{modifierMarkup}}</blockquote> + {{/eachModifier}} + {{else}} + {{#if description}} + {{html description}} + {{/if}} + {{/ifAny}} + </div> + {{/eachSection}} + {{/if}} + </div> + </div> +</div></body> +</html> diff --git a/www/wiki/docs/kss/styleguide-template/public/kss.less b/www/wiki/docs/kss/styleguide-template/public/kss.less new file mode 100644 index 00000000..3727694d --- /dev/null +++ b/www/wiki/docs/kss/styleguide-template/public/kss.less @@ -0,0 +1,193 @@ +.container { + width: 100%; +} + +nav { + display: none; +} + +.content { + .example { + blockquote { + margin-top: 20px; + } + } +} + +body { + margin: 0; + padding: 0; + padding-top: 3px; + padding-bottom: 40px; + + // FIXME: Remove when typography module in mediawiki-ui + font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +} + +.kss-no-margin { + // FIXME: Is this being used anywhere? Remove if not. + margin: 0; +} + +.container { + margin: 0 auto; + display: -webkit-flex; + display: flex; + +} + +header { + padding: 0; + margin: 0; + border-bottom: 1px solid #eee; + + hgroup { + min-width: 149px; + + h1 { + padding: 16px 28px; + font-size: 15px; + text-transform: uppercase; + margin: 0; + width: 92px; + border-right: 1px solid #eee; + } + } +} + +nav { + -webkit-flex: initial; + flex: initial; + min-width: 139px; + margin-top: 25px; + + ul { + list-style: none; + padding: 0; + + li { + margin-left: 10px; + margin-bottom: 20px; + + a { + text-transform: uppercase; + color: #aaa; + font-size: 12px; + font-weight: bold; + text-decoration: none; + + &:hover { + color: #538DF8; + } + + span { + display: inline-block; + width: 35px; + } + } + + ul { + li { + margin: 0; + } + + li a { + text-transform: none; + font-weight: normal; + } + } + } + } +} + +.content { + -webkit-flex: 1; + flex: 1; + + h1, h2, h3, h4, h5, h6, p { + margin-left: 20px; + + a { + text-decoration: none; + color: #000; + } + } + + p { + width: 338px; + } + + h1 { + margin-bottom: 0; + } + + .example { + display: -webkit-flex; + display: flex; + flex-wrap: wrap; + + pre { + -webkit-flex: initial; + flex: initial; + background: #f8f8f8; + padding: 20px; + color: #999; + word-wrap: break-word; + // word-wrap in pre not affecting Firefox, so add white-space. + white-space: pre-wrap; + float: left; + margin: 0; + margin-right: 22px; + } + + blockquote { + -webkit-flex: 1; + flex: 1; + display: block; + margin: 0; + margin-left: 20px; + + div { + margin-bottom: 5px; + } + } + } +} + +@media (min-width: 768px) { + nav { + display: block; + width: 100px; + } + + @columnWidth: (768px - 100px ) / 2; + .example { + pre, + blockquote { + width: @columnWidth; + } + } +} + +@media (min-width: 980px) { + nav { + width: auto; + } + + .content { + margin-left: 30px; + } + + .container { + width: 980px; + } + + .example { + pre { + width: 338px; + } + blockquote { + width: auto; + } + } +} |