util/gh-pages/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="UTF-8"/>
   5     <meta name="viewport" content="width=device-width, initial-scale=1"/>
   6
   7     <title>ALL the Clippy Lints</title>
   8
   9     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
  10     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css"/>
  11     <style>
  12         blockquote { font-size: 1em; }
  13         [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
  14
  15         .form-inline .checkbox { margin-right: 0.6em }
  16
  17         .panel-heading { cursor: pointer; }
  18         .panel-heading:hover { background-color: #eee; }
  19
  20         .panel-title { display: flex; }
  21         .panel-title .label { display: inline-block; }
  22
  23         .panel-title-name { flex: 1; }
  24         .panel-title-name span { vertical-align: bottom; }
  25
  26         .panel .panel-title-name .anchor { display: none; }
  27         .panel:hover .panel-title-name .anchor { display: inline; color: #fff; }
  28     </style>
  29 </head>
  30 <body>
  31     <div class="container" ng-app="clippy" ng-controller="lintList">
  32         <div class="page-header">
  33             <h1>ALL the Clippy Lints</h1>
  34         </div>
  35
  36         <noscript>
  37             <div class="alert alert-danger" role="alert">
  38                 Sorry, this site only works with JavaScript! :(
  39             </div>
  40         </noscript>
  41
  42         <div ng-cloak>
  43
  44             <div class="alert alert-info" role="alert" ng-if="loading">
  45                 Loading&#x2026;
  46             </div>
  47             <div class="alert alert-danger" role="alert" ng-if="error">
  48                 Error loading lints!
  49             </div>
  50
  51             <div class="panel panel-default" ng-show="data">
  52                 <div class="panel-body row">
  53                     <div class="col-md-6 form-inline">
  54                         <div class="form-group form-group-lg">
  55                             <p class="h4">Lint levels</p>
  56                             <div class="checkbox" ng-repeat="(level, enabled) in levels">
  57                                 <label>
  58                                     <input type="checkbox" ng-model="levels[level]" />
  59                                     {{level}}
  60                                 </label>
  61                             </div>
  62                         </div>
  63                     </div>
  64                     <div class="col-md-6 form-inline">
  65                         <div class="form-group form-group-lg">
  66                             <p class="h4">Lint groups</p>
  67                             <div class="checkbox" ng-repeat="(group, enabled) in groups">
  68                                 <label class="text-capitalize">
  69                                     <input type="checkbox" ng-model="groups[group]" />
  70                                     {{group}}
  71                                 </label>
  72                             </div>
  73                         </div>
  74                     </div>
  75                 </div>
  76                 <div class="panel-body row">
  77                     <div class="col-md-12 form-horizontal">
  78                         <div class="input-group">
  79                             <label class="input-group-addon" id="filter-label" for="filter-input">Filter:</label>
  80                             <input type="text" class="form-control" placeholder="Keywords or search string" id="filter-input" ng-model="search" ng-model-options="{debounce: 50}"/>
  81                             <span class="input-group-btn">
  82                                 <button class="btn btn-default" type="button" ng-click="search = ''">
  83                                     Clear
  84                                 </button>
  85                             </span>
  86                         </div>
  87                     </div>
  88                 </div>
  89             </div>
  90
  91             <article class="panel panel-default" id="{{lint.id}}"
  92                 ng-repeat="lint in data | filter:byLevels | filter:byGroups | filter:bySearch | orderBy:'id' track by lint.id">
  93                 <header class="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
  94                     <h2 class="panel-title">
  95                         <div class="panel-title-name">
  96                             <span>{{lint.id}}</span>
  97                             <a href="#{{lint.id}}" class="anchor label label-default" ng-click="open[lint.id] = true; $event.stopPropagation()">&para;</a>
  98                         </div>
  99
 100                         <div class="panel-title-addons">
 101                             <span class="label label-default text-capitalize">{{lint.group}}</span>
 102
 103                             <span ng-if="lint.level == 'Allow'" class="label label-success">Allow</span>
 104                             <span ng-if="lint.level == 'Warn'" class="label label-warning">Warn</span>
 105                             <span ng-if="lint.level == 'Deny'" class="label label-danger">Deny</span>
 106                             <span ng-if="lint.level == 'Deprecated'" class="label label-default">Deprecated</span>
 107
 108                             <button class="btn btn-default btn-xs">
 109                                 <span ng-show="open[lint.id]">&minus;</span>
 110                                 <span ng-hide="open[lint.id]">&plus;</span>
 111                             </button>
 112                         </div>
 113                     </h2>
 114                 </header>
 115
 116                 <ul class="list-group lint-docs" ng-if="lint.docs" ng-class="{collapse: true, in: open[lint.id]}">
 117                     <li class="list-group-item" ng-repeat="(title, text) in lint.docs">
 118                         <h4 class="list-group-item-heading">
 119                             {{title}}
 120                         </h4>
 121                         <div class="list-group-item-text" ng-bind-html="text | markdown"></div>
 122                         <a ng-if="title == 'Known problems'" href="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+is%3Aopen+{{lint.id}}">Search on GitHub</a>
 123                     </li>
 124                 </ul>
 125             </article>
 126         </div>
 127     </div>
 128
 129     <a href="https://github.com/rust-lang/rust-clippy">
 130         <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on Github"/>
 131     </a>
 132
 133     <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/7.0.0/markdown-it.min.js"></script>
 134     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
 135     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/rust.min.js"></script>
 136     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
 137     <script>
 138     (function () {
 139         var md = window.markdownit({
 140             html: true,
 141             linkify: true,
 142             typographer: true,
 143             highlight: function (str, lang) {
 144                 if (lang && hljs.getLanguage(lang)) {
 145                     try {
 146                         return '<pre class="hljs"><code>' +
 147                             hljs.highlight(lang, str, true).value +
 148                             '</code></pre>';
 149                     } catch (__) {}
 150                 }
 151
 152                 return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
 153             }
 154         });
 155
 156         function scrollToLint(lintId) {
 157             var target = document.getElementById(lintId);
 158             if (!target) {
 159                 return;
 160             }
 161             target.scrollIntoView();
 162         }
 163
 164         function scrollToLintByURL($scope) {
 165             var removeListener = $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
 166                 scrollToLint(window.location.hash.slice(1));
 167                 removeListener();
 168             });
 169         }
 170
 171         function selectGroup($scope, selectedGroup) {
 172             var groups = $scope.groups;
 173             for (var group in groups) {
 174                 if (groups.hasOwnProperty(group)) {
 175                     if (group === selectedGroup) {
 176                         groups[group] = true;
 177                     } else {
 178                         groups[group] = false;
 179                     }
 180                 }
 181             }
 182         }
 183
 184         function searchLint(lint, term) {
 185             for (const field in lint.docs) {
 186                 // Continue if it's not a property
 187                 if (!lint.docs.hasOwnProperty(field)) {
 188                     continue;
 189                 }
 190
 191                 // Return if not found
 192                 if (lint.docs[field].toLowerCase().indexOf(term) !== -1) {
 193                     return true;
 194                 }
 195             }
 196
 197             return false;
 198         }
 199
 200         angular.module("clippy", [])
 201         .filter('markdown', function ($sce) {
 202             return function (text) {
 203                 return $sce.trustAsHtml(
 204                     md.render(text || '')
 205                     // Oh deer, what a hack :O
 206                     .replace('<table', '<table class="table"')
 207                 );
 208             };
 209         })
 210         .directive('onFinishRender', function ($timeout) {
 211             return {
 212                 restrict: 'A',
 213                 link: function (scope, element, attr) {
 214                     if (scope.$last === true) {
 215                         $timeout(function () {
 216                             scope.$emit(attr.onFinishRender);
 217                         });
 218                     }
 219                 }
 220             };
 221         })
 222         .controller("lintList", function ($scope, $http, $timeout) {
 223             // Level filter
 224             var LEVEL_FILTERS_DEFAULT = {Allow: true, Warn: true, Deny: true, Deprecated: true};
 225             $scope.levels = LEVEL_FILTERS_DEFAULT;
 226             $scope.byLevels = function (lint) {
 227                 return $scope.levels[lint.level];
 228             };
 229
 230             $scope.groups = {};
 231             $scope.byGroups = function (lint) {
 232                 return $scope.groups[lint.group];
 233             };
 234
 235             $scope.bySearch = function (lint, index, array) {
 236                 let searchStr = $scope.search;
 237                 // It can be `null` I haven't missed this value
 238                 if (searchStr == null || searchStr.length < 3) {
 239                     return true;
 240                 }
 241                 searchStr = searchStr.toLowerCase();
 242
 243                 // Search by id
 244                 if (lint.id.indexOf(searchStr.replace("-", "_")) !== -1) {
 245                     return true;
 246                 }
 247
 248                 // Search the description
 249                 // The use of `for`-loops instead of `foreach` enables us to return early
 250                 let terms = searchStr.split(" ");
 251                 for (index = 0; index < terms.length; index++) {
 252                     if (lint.id.indexOf(terms[index]) !== -1) {
 253                         continue;
 254                     }
 255
 256                     if (searchLint(lint, terms[index])) {
 257                         continue;
 258                     }
 259
 260                     return false;
 261                 }
 262
 263                 return true;
 264             }
 265
 266             // Get data
 267             $scope.open = {};
 268             $scope.loading = true;
 269
 270             if (window.location.hash.length > 1) {
 271                 $scope.search = window.location.hash.slice(1);
 272                 $scope.open[window.location.hash.slice(1)] = true;
 273                 scrollToLintByURL($scope);
 274             }
 275
 276             $http.get('./lints.json')
 277             .success(function (data) {
 278                 $scope.data = data;
 279                 $scope.loading = false;
 280
 281                 // Initialize lint groups (the same structure is also used to enable filtering)
 282                 $scope.groups = data.reduce(function (result, val) {
 283                     result[val.group] = true;
 284                     return result;
 285                 }, {});
 286
 287                 var selectedGroup = getQueryVariable("sel");
 288                 if (selectedGroup) {
 289                     selectGroup($scope, selectedGroup.toLowerCase());
 290                 }
 291
 292                 scrollToLintByURL($scope);
 293             })
 294             .error(function (data) {
 295                 $scope.error = data;
 296                 $scope.loading = false;
 297             });
 298
 299             window.addEventListener('hashchange', function () {
 300                 // trigger re-render
 301                 $timeout(function () {
 302                     $scope.levels = LEVEL_FILTERS_DEFAULT;
 303                     $scope.search = window.location.hash.slice(1);
 304                     $scope.open[window.location.hash.slice(1)] = true;
 305
 306                     scrollToLintByURL($scope);
 307                 });
 308                 return true;
 309             }, false);
 310         });
 311     })();
 312
 313     function getQueryVariable(variable) {
 314         var query = window.location.search.substring(1);
 315         var vars = query.split('&');
 316         for (var i = 0; i < vars.length; i++) {
 317             var pair = vars[i].split('=');
 318             if (decodeURIComponent(pair[0]) == variable) {
 319                 return decodeURIComponent(pair[1]);
 320             }
 321         }
 322     }
 323     </script>
 324 </body>
 325 </html>