Create document about log configuration

gulpjs · Apr 16, 2018 · cd9ceb2 · cd9ceb2
1 parent de9af35
commit cd9ceb2
Show file tree

Hide file tree

Showing 8 changed files with 648 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,8 @@ Supported configurations properties:
 | flags.gulpfile     | Set a default gulpfile |
 | flags.silent       | Silence logging by default |
 | flags.series       | Run tasks given on the CLI in series (the default is parallel) |
+| log.messages.*     | Configure log messages. (See [ConfigLog.html](./docs/ConfigLog.html)) |
+| log.theme.*        | Configure log theme. |
 
 ## Flags
 

diff --git a/docs/ConfigLog.html b/docs/ConfigLog.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8"/>
+ <title>Gulp Configurable Log List</title>
+ <script src="js/copy-props.js"></script>
+ <script src="js/theming-log.min.js"></script>
+ <link rel="stylesheet" href="css/ConfigLog.css"/>
+</head>
+<body>
+ <header>
+ <h1>Gulp Configurable Log List</h1>
+ <div class="page-desc">
+ This document lists configurable logs outputted by gulp-cli.
+ These logs are configured with gulp config files (<code>.gulp.*</code> in cwd or user home directory), and the listed key paths below are defined as property trees of <code>log.messages</code> property object in a gulp config file, as follows:
+  <div class="configfile-example js-code">
+   <code><pre>
+// .gulp.js
+module.exports = {
+  log: {
+    messages: {
+      help: {
+        usage: '\n{TITLE: Usage:} gulp {OPTION: [options]} {TASK: tasks}',
+        ...,
+      },
+      ...,
+    },
+  },
+};</pre></code></div>
+ </div>
+ </header>
+ <main>
+ </main>
+</body>
+ <script>
+ var module = { exports: {} };
+ </script>
+ <script src="../lib/shared/log/log-msgs.js"></script>
+ <script>
+ var logMsgs = module.exports;
+ </script>
+ <script src="../lib/shared/log/log-theme.js"></script>
+ <script>
+ var logTheme = module.exports;
+ </script>
+ <script src="js/log-dictionary.js"></script>
+ <script src="js/ConfigLog.js"></script>
+</html>
diff --git a/docs/css/ConfigLog.css b/docs/css/ConfigLog.css
@@ -0,0 +1,53 @@
+header {
+  border-bottom: solid 1px gray;
+}
+
+h1 {
+  margin: 0.5rem;
+}
+
+div.page-desc {
+  padding: 1rem;
+}
+
+div.configfile-example {
+  margin: 1rem;
+}
+
+main {
+  margin: 0.5rem;
+}
+
+section {
+  padding: 1rem 0rem; margin: 0rem 0.5rem;
+}
+
+section:not(:first-of-type) {
+  border-top: solid 1px gray;
+}
+
+h2 {
+  margin: 0rem -0.5rem 0.8rem -0.5rem;
+}
+
+h3 {
+  margin-bottom: 0.3rem;
+}
+
+ol {
+  margin: 0px;
+}
+
+pre {
+  margin: 0px; padding: 0px;
+}
+
+div.example-body {
+  padding: 0.5rem; color: white; background-color: #333;
+  overflow-x: auto;
+}
+
+div.js-code {
+  padding: 0.3rem; border: solid 1px #ccc; background-color: #eee;
+  overflow-x: auto;
+}
diff --git a/docs/js/ConfigLog.js b/docs/js/ConfigLog.js
@@ -0,0 +1,111 @@
+'use strict';
+
+copyProps({
+  TIMESTAMP: function() {
+    return '[<span style="color: #999">11:22:33</span>] ';
+  },
+  gray: function(v) {
+    return '<span style="color: #999">' + v + '</span>';
+  },
+  magenta: function(v) {
+    return '<span style="color: magenta">' + v + '</span>';
+  },
+  cyan: function(v) {
+    return '<span style="color: cyan">' + v + '</span>';
+  },
+  red: function(v) {
+    return '<span style="color: red">' + v + '</span>';
+  },
+  blue: function(v) {
+    return '<span style="color: #39f;">' + v + '</span>';
+  },
+  yellow: function(v) {
+    return '<span style="color: yellow">' + v + '</span>';
+  },
+  bold: function(v) {
+    return '<span style="font-weight: bold">' + v + '</span>';
+  },
+  code: function(v) {
+    return '<code>' + v + '</code>';
+  },
+}, logTheme);
+
+
+var main = document.getElementsByTagName('main')[0];
+copyProps(logMsgs, null, function(src) {
+  var logItem = logDictionary[src.keyChain] || {};
+  var desc = format(escape(logItem.desc));
+  var params = createParameters(logItem);
+  var example = createExample(src.value, logItem);
+
+  main.innerHTML += format(
+    '<section id="{1:key path}">' +
+    '<h2 class="keypath">.{1:key path}</h2>' +
+    '<div class="description">{2:desc}</div>' +
+    '<div class="parameters">{3:params}</div>' +
+    '<div class="template">' +
+    '<h3 class="template-title">Template:</h3>' +
+    '<div class="template-body js-code"><code>\'{4:template}\'</code></div>' +
+    '</div>' +
+    '<div class="example">' +
+    '<h3 class="example-title">Example:</h3>' +
+    '<div class="example-body"><samp><pre>{5:example}</pre></samp></div>' +
+    '</div>' +
+    '</section>',
+    src.keyChain, desc, params, escapeTemplate(src.value), example);
+});
+
+function createParameters(logItem) {
+  if (!logItem.params || !logItem.params.length) {
+    return '';
+  }
+
+  return '<h3 class="parameter-title">Parameters:</h3>' +
+    '<ol class="parameter-list">' +
+    logItem.params.map(function(param) {
+      return format('<li class="parameter-item">{1}</li>', escape(param.desc));
+    }).join('') +
+    '</ol>';
+}
+
+function createExample(template, logItem) {
+  return format(escape(template), (logItem.params || []).map(getExampleParam));
+}
+
+function getExampleParam(param) {
+  return escape(param.example);
+}
+
+function format(template) {
+  var args;
+  if (Array.isArray(arguments[1])) {
+    args = [logTheme, template].concat(arguments[1]);
+  } else {
+    args = [logTheme].concat(Array.prototype.slice.call(arguments));
+  }
+  return themingLog.format.apply(null, args);
+}
+
+function escape(s) {
+  return (s || '').replace(/[<>&\n]/g, function(c) {
+    return {
+      '<': '&lt;',
+      '>': '&gt;',
+      '&': '&amp;',
+      '\n': '<br/>',
+    }[c];
+  });
+}
+
+function escapeTemplate(s) {
+  return (s || '').replace(/[<>&' \n]/g, function(c) {
+    return {
+      '<': '&lt;',
+      '>': '&gt;',
+      '&': '&amp;',
+      '\'': '\\\'',
+      ' ': '&nbsp;',
+      '\n': '\\n',
+    }[c];
+  });
+}
diff --git a/docs/js/copy-props.js b/docs/js/copy-props.js
diff --git a/docs/js/each-props.js b/docs/js/each-props.js