summaryrefslogtreecommitdiff
path: root/www/wiki/docs/kss
diff options
context:
space:
mode:
Diffstat (limited to 'www/wiki/docs/kss')
-rw-r--r--www/wiki/docs/kss/Makefile19
-rw-r--r--www/wiki/docs/kss/README.txt21
-rwxr-xr-xwww/wiki/docs/kss/scripts/kss-node-check.sh20
-rw-r--r--www/wiki/docs/kss/styleGuideModules.txt10
-rw-r--r--www/wiki/docs/kss/styleguide-template/index.html87
-rw-r--r--www/wiki/docs/kss/styleguide-template/public/kss.less193
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;
+ }
+ }
+}
generated by cgit v1.2.1 (git 2.18.0) at 2024-04-27 18:16:46 +0000