Add htmlint, fixy errors, move css into own file

rejas · Veeck · commit 964f7512fac2 · 2018-10-19T15:46:21.000+02:00
diff --git a/.htmllintrc b/.htmllintrc
@@ -0,0 +1,72 @@
+{
+    "plugins": [],  // npm modules to load
+
+    "maxerr": false,
+    "raw-ignore-regex": false,
+    "attr-bans": [
+        "align",
+        "background",
+        "bgcolor",
+        "border",
+        "frameborder",
+        "longdesc",
+        "marginwidth",
+        "marginheight",
+        "scrolling",
+        "style",
+        "width"
+    ],
+    "indent-delta": false,
+    "indent-style": "nonmixed",
+    "indent-width": false,
+    "indent-width-cont": false,
+    "spec-char-escape": true,
+    "text-ignore-regex": false,
+    "tag-bans": [
+        "style",
+        "b",
+        "i"
+    ],
+    "tag-close": true,
+    "tag-name-lowercase": true,
+    "tag-name-match": true,
+    "tag-self-close": false,
+    "doctype-first": false,
+    "doctype-html5": false,
+    "attr-name-style": "dash",
+    "attr-name-ignore-regex": false,
+    "attr-no-dup": true,
+    "attr-no-unsafe-char": true,
+    "attr-order": false,
+    "attr-quote-style": "double",
+    "attr-req-value": true,
+    "attr-new-line": false,
+    "attr-validate": true,
+    "id-no-dup": true,
+    "id-class-no-ad": true,
+    "id-class-style": "underscore",
+    "class-no-dup": true,
+    "class-style": false,
+    "id-class-ignore-regex": false,
+    "img-req-alt": true,
+    "img-req-src": true,
+    "html-valid-content-model": true,
+    "head-valid-content-model": true,
+    "href-style": false,
+    "label-req-for": true,
+    "line-end-style": "lf",
+    "line-no-trailing-whitespace": false,
+    "line-max-len": false,
+    "line-max-len-ignore-regex": false,
+    "head-req-title": true,
+    "title-no-dup": true,
+    "title-max-len": 60,
+    "html-req-lang": false,
+    "lang-style": "case",
+    "fig-req-figcaption": false,
+    "focusable-tabindex-style": false,
+    "input-radio-req-name": true,
+    "input-req-label": false,
+    "table-req-caption": false,
+    "table-req-header": false
+}
diff --git a/docs/index.html b/docs/index.html
@@ -8,27 +8,7 @@
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="radar.js"></script>
 
-<style type="text/css">
-  body {
-    font-family: 'Source Sans Pro', arial, helvetica, sans-serif;
-    padding-bottom: 50px;
-  }
-  h3 {
-    margin-top: 50px;
-  }
-  li {
-    margin: 25px 50px 0 0;
-  }
-  table {
-    width: 1400px;
-    margin: 0 50px 0 50px;
-  }
-  td {
-    width: 50%;
-    vertical-align: top;
-    padding-right: 60px;
-  }
-</style>
+<link rel="stylesheet" href="radar.css">
 </head>
 
 <body>
@@ -898,14 +878,14 @@
 <h3>What is the Tech Radar?</h3>
 
 <p>
-The Zalando Tech Radar is a list of technologies, complemented by an assessment result, called <i>ring assignment</i>. We use four rings with the following semantics:
+The Zalando Tech Radar is a list of technologies, complemented by an assessment result, called <em>ring assignment</em>. We use four rings with the following semantics:
 </p>
 
 <ul>
-<li><b>ADOPT</b> &mdash; Technologies we have high confidence in to serve our purpose, also in large scale. Technologies with a usage culture in our Zalando production environment, low risk and recommended to be widely used.</li>
-<li><b>TRIAL</b> &mdash; Technologies that we have seen work with success in project work to solve a real problem; first serious usage experience that confirm benefits and can uncover limitations. TRIAL technologies are slightly more risky; some engineers in our organization walked this path and will share knowledge and experiences.</li>
-<li><b>ASSESS</b> &mdash; Technologies that are promising and have clear potential value-add for us; technologies worth to invest some research and prototyping efforts in to see if it has impact. ASSESS technologies have higher risks; they are often brand new and highly unproven in our organisation. You will find some engineers that have knowledge in the technology and promote it, you may even find teams that have started a prototyping effort.</li>
-<li><b>HOLD</b> &mdash; Technologies not recommended to be used for new projects. Technologies that we think are not (yet) worth to (further) invest in. HOLD technologies should not be used for new projects, but usually can be continued for existing projects.</li>
+<li><strong>ADOPT</strong> &mdash; Technologies we have high confidence in to serve our purpose, also in large scale. Technologies with a usage culture in our Zalando production environment, low risk and recommended to be widely used.</li>
+<li><strong>TRIAL</strong> &mdash; Technologies that we have seen work with success in project work to solve a real problem; first serious usage experience that confirm benefits and can uncover limitations. TRIAL technologies are slightly more risky; some engineers in our organization walked this path and will share knowledge and experiences.</li>
+<li><strong>ASSESS</strong> &mdash; Technologies that are promising and have clear potential value-add for us; technologies worth to invest some research and prototyping efforts in to see if it has impact. ASSESS technologies have higher risks; they are often brand new and highly unproven in our organisation. You will find some engineers that have knowledge in the technology and promote it, you may even find teams that have started a prototyping effort.</li>
+<li><strong>HOLD</strong> &mdash; Technologies not recommended to be used for new projects. Technologies that we think are not (yet) worth to (further) invest in. HOLD technologies should not be used for new projects, but usually can be continued for existing projects.</li>
 </ul>
 
 </td><td>
@@ -919,15 +899,15 @@ <h3>What is the purpose?</h3>
 <h3>How do we maintain it?</h3>
 
 <p>
-The Tech Radar is maintained by the <i>Zalando Technologists Guild</i> &mdash; an open group of  senior Zalando technologists committed to devote time to the Tech Radar purpose. The guild self organises to maintain the Tech Radar documents, including this public version. Assignment of technologies to rings is the outcome of ring change proposals, which are discussed and voted on in guild meetings. The Tech Radar depends on active participation and input from all engineering teams at Zalando.
+The Tech Radar is maintained by the <em>Zalando Technologists Guild</em> &mdash; an open group of  senior Zalando technologists committed to devote time to the Tech Radar purpose. The guild self organises to maintain the Tech Radar documents, including this public version. Assignment of technologies to rings is the outcome of ring change proposals, which are discussed and voted on in guild meetings. The Tech Radar depends on active participation and input from all engineering teams at Zalando.
 </p>
 
 <p>
 There is also an <a href="https://techradar.zalando.net/">internal version of the Tech Radar</a> that contains background information about each technology &mdash; when to use it, pros and cons, main risks, which teams at Zalando are using it, and for what purpose.
 </p>
 
 <p>
-<i>BTW, if you would like to create your own Tech Radar &mdash; we have <a href="https://github.com/zalando/tech-radar">open sourced the code</a> to generate this visualization.</i>
+<em>BTW, if you would like to create your own Tech Radar &mdash; we have <a href="https://github.com/zalando/tech-radar">open sourced the code</a> to generate this visualization.</em>
 </p>
 
 </td></tr>
diff --git a/docs/radar.css b/docs/radar.css
@@ -0,0 +1,19 @@
+body {
+  font-family: 'Source Sans Pro', arial, helvetica, sans-serif;
+  padding-bottom: 50px;
+}
+h3 {
+  margin-top: 50px;
+}
+li {
+  margin: 25px 50px 0 0;
+}
+table {
+  width: 1400px;
+  margin: 0 50px 0 50px;
+}
+td {
+  width: 50%;
+  vertical-align: top;
+  padding-right: 60px;
+}
diff --git a/package.json b/package.json
@@ -10,10 +10,13 @@
   },
   "devDependencies": {
     "browser-sync": "^2.26.3",
-    "eslint": "^5.7.0"
+    "eslint": "^5.7.0",
+    "htmllint": "^0.7.2"
   },
   "scripts": {
     "start": "browser-sync docs -w",
+    "lint": "npm run lint:js && npm run lint:html",
     "lint:js": "eslint docs/*.js",
+    "lint:html": "htmllint docs/*.html"
   }
 }
