Merge branch 'utkarshcmu-help-text'

package.json

@@ -78,7 +78,7 @@
     "sinon": "1.17.6",
     "systemjs-builder": "^0.15.34",
     "tether": "^1.4.0",
-    "tether-drop": "^1.4.2",
+    "tether-drop": "git://github.com/torkelo/drop",
     "tslint": "^4.0.2",
     "typescript": "^2.1.4",
     "virtual-scroll": "^1.1.1"

public/app/features/dashboard/model.ts

@@ -51,7 +51,7 @@ export class DashboardModel {
     this.style = data.style || "dark";
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
-    this.graphTooltip = data.graphTooltip || false;
+    this.graphTooltip = data.graphTooltip || 0;
     this.hideControls = data.hideControls || false;
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.timepicker = data.timepicker || {};
@@ -272,7 +272,7 @@ export class DashboardModel {
   }
 
   sharedTooltipModeEnabled() {
-    return this.graphTooltip !== 0;
+    return this.graphTooltip > 0;
   }
 
   sharedCrosshairModeOnly() {

public/app/features/dashboard/partials/inspector.html

@@ -1,7 +1,8 @@
 <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			Inspector
+			<i class="fa fa-frown-o"></i>
+			<span class="p-l-1">Inspector</span>
 		</h2>
 
 		<ul class="gf-tabs">

public/app/features/dashboard/partials/panel_info.html

@@ -0,0 +1,17 @@
+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-info-circle"></i>
+			<span class="p-l-1">Panel Description</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content markdown-html" ng-bind-html="html">
+	</div>
+
+</div>
+

public/app/features/panel/metrics_panel_ctrl.ts

@@ -12,7 +12,6 @@ import * as dateMath from 'app/core/utils/datemath';
 import {Subject} from 'vendor/npm/rxjs/Subject';
 
 class MetricsPanelCtrl extends PanelCtrl {
-  error: any;
   loading: boolean;
   datasource: any;
   datasourceName: any;

public/app/features/panel/panel_ctrl.ts

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import $ from 'jquery';
 import {profiler} from 'app/core/profiler';
+import Remarkable from 'remarkable';
 
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
@@ -15,6 +16,7 @@ import {Emitter} from 'app/core/core';
 
 export class PanelCtrl {
   panel: any;
+  error: any;
   row: any;
   dashboard: any;
   editorTabIndex: number;
@@ -243,15 +245,57 @@ export class PanelCtrl {
     });
   }
 
-  openInspector() {
+  getInfoMode() {
+    if (this.error) {
+      return 'error';
+    }
+    if (!!this.panel.description) {
+      return 'info';
+    }
+    if (this.panel.links.length > 0) {
+      return 'links';
+    }
+    return '';
+  }
+
+  getInfoContent() {
+    var markdown = this.error || this.panel.description;
+    var linkSrv = this.$injector.get('linkSrv');
+    var templateSrv = this.$injector.get('templateSrv');
+    var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
+    var html = '<div class="markdown-html">';
+
+    html += new Remarkable().render(interpolatedMarkdown);
+
+    if (this.panel.links && this.panel.links.length > 0) {
+      html += '<ul>';
+      for (let link of this.panel.links) {
+        var info = linkSrv.getPanelLinkAnchorInfo(link, this.panel.scopedVars);
+        html += '<li><a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a></li>';
+      }
+      html += '</ul>';
+    }
+
+    return html + '</div>';
+  }
+
+  openInfo() {
     var modalScope = this.$scope.$new();
     modalScope.panel = this.panel;
     modalScope.dashboard = this.dashboard;
-    modalScope.inspector = $.extend(true, {}, this.inspector);
 
-    this.publishAppEvent('show-modal', {
+    if (this.error) {
-      src: 'public/app/partials/inspector.html',
+      modalScope.inspector = $.extend(true, {}, this.inspector);
-      scope: modalScope
+      this.publishAppEvent('show-modal', {
-    });
+        src: 'public/app/features/dashboard/partials/inspector.html',
+        scope: modalScope
+      });
+    } else {
+      modalScope.html = this.getInfoContent();
+      this.publishAppEvent('show-modal', {
+        src: 'public/app/features/dashboard/partials/panel_info.html',
+        scope: modalScope
+      });
+    }
   }
 }

public/app/features/panel/panel_directive.ts

@@ -2,16 +2,17 @@
 
 import angular from 'angular';
 import $ from 'jquery';
+import _ from 'lodash';
+import Drop from 'tether-drop';
 
 var module = angular.module('grafana.directives');
 
 var panelTemplate = `
   <div class="panel-container">
     <div class="panel-header">
-      <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
+      <span class="panel-info-corner" ng-click="ctrl.openInfo()">
-        <span data-placement="top" bs-tooltip="ctrl.error">
+        <i class="fa"></i>
-          <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
+        <span class="panel-info-corner-inner"></span>
-        </span>
       </span>
 
       <span class="panel-loading" ng-show="ctrl.loading">
@@ -64,7 +65,9 @@ module.directive('grafanaPanel', function($rootScope) {
     scope: { ctrl: "=" },
     link: function(scope, elem) {
       var panelContainer = elem.find('.panel-container');
+      var cornerInfoElem = elem.find('.panel-info-corner')[0];
       var ctrl = scope.ctrl;
+      var infoDrop;
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
@@ -139,11 +142,38 @@ module.directive('grafanaPanel', function($rootScope) {
         }
       }, scope);
 
+      function updatePanelCornerInfo() {
+        var cornerMode = ctrl.getInfoMode();
+        cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
+
+        if (cornerMode) {
+          if (infoDrop) {
+            infoDrop.destroy();
+          }
+
+          infoDrop = new Drop({
+            target: cornerInfoElem,
+            content: ctrl.getInfoContent.bind(ctrl),
+            position: 'right middle',
+            classes: ctrl.error ? 'drop-error' : 'drop-help',
+            openOn: 'hover',
+            hoverOpenDelay: 400,
+          });
+        }
+      }
+
+      scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
+      scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
+
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);
 
       scope.$on('$destroy', function() {
         elem.off();
+
+        if (infoDrop) {
+          infoDrop.destroy();
+        }
       });
     }
   };
@@ -233,4 +263,19 @@ module.directive('panelResizer', function($rootScope) {
   };
 });
 
+module.directive('panelHelpCorner', function($rootScope) {
+  return {
+    restrict: 'E',
+    template: `
+      <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
+        <span data-placement="top" bs-tooltip="ctrl.error">
+          <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
+        </span>
+      </span>
+    `,
+    link: function(scope, elem) {
+    }
+  };
+});
+
 

public/app/features/panel/panel_menu.js

@@ -9,28 +9,14 @@ function (angular, $, _, Tether) {
 
   angular
     .module('grafana.directives')
-    .directive('panelMenu', function($compile, linkSrv) {
+    .directive('panelMenu', function($compile) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
             '<span class="icon-gf panel-alert-icon"></span>' +
             '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
-            '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
             '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
           '</span>';
 
-      function createExternalLinkMenu(ctrl) {
-        var template = '<div class="panel-menu small">';
-        template += '<div class="panel-menu-row">';
-
-        if (ctrl.panel.links) {
-          _.each(ctrl.panel.links, function(link) {
-            var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
-            template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
-          });
-        }
-        return template;
-      }
-
       function createMenuTemplate(ctrl) {
         var template = '<div class="panel-menu small">';
 
@@ -76,7 +62,6 @@ function (angular, $, _, Tether) {
         restrict: 'A',
         link: function($scope, elem) {
           var $link = $(linkTemplate);
-          var $panelLinksBtn = $link.find(".panel-links-btn");
           var $panelContainer = elem.parents(".panel-container");
           var menuScope = null;
           var ctrl = $scope.ctrl;
@@ -86,12 +71,6 @@ function (angular, $, _, Tether) {
 
           elem.append($link);
 
-          $scope.$watchCollection('ctrl.panel.links', function(newValue) {
-            var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== '';
-            // cannot use toggle here, only works for attached elements
-            $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
-          });
-
           function dismiss(time, force) {
             clearTimeout(timeout);
             timeout = null;
@@ -132,11 +111,7 @@ function (angular, $, _, Tether) {
             }
 
             var menuTemplate;
-            if ($(e.target).hasClass('fa-external-link')) {
+            menuTemplate = createMenuTemplate(ctrl);
-              menuTemplate = createExternalLinkMenu(ctrl);
-            } else {
-              menuTemplate = createMenuTemplate(ctrl);
-            }
 
             $menu = $(menuTemplate);
             $menu.mouseleave(function() {

public/app/features/panellinks/module.html

@@ -3,60 +3,44 @@
 		Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
 	</h5>
 
-	<div ng-repeat="link in panel.links" style="margin-top: 20px;">
+	<div class="gf-form-group" ng-repeat="link in panel.links">
-		<div class="gf-form-group">
+		<div class="section">
-
+			<div class="gf-form max-width-25">
-			<div class="gf-form-inline">
+				<span class="gf-form-label width-7">Type</span>
-				<div class="gf-form width-2">
+				<div class="gf-form-select-wrapper gf-form--grow">
-					<i class="fa fa-fw fa-unlink"></i>
+					<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-				</div>
-
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Type</span>
-					<div class="gf-form-select-wrapper width-14">
-						<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-					</div>
-				</div>
-
-				<div class="gf-form">
-					<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
-					<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
-
-					<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
-					<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
-				</div>
-
-				<div class="gf-form">
-					<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
 				</div>
 			</div>
 
-			<div class="gf-form-inline">
+			<div class="gf-form max-width-25">
-				<div class="gf-form width-2">
+				<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
-					<i class="fa fa-fw fa-unlink invisible"></i>
+				<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input" ng-blur="dashboardChanged(link)">
-				</div>
 
-				<div class="gf-form">
+				<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
-					<div class="gf-form-label width-7">Title</div>
+				<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
-					<input type="text" ng-model="link.title" class="gf-form-input">
-				</div>
-
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Url params</span>
-					<input type="text" ng-model="link.params" class="gf-form-input">
-				</div>
 			</div>
 
-			<div class="gf-form-inline">
+			<div class="gf-form max-width-25">
-				<div class="gf-form width-2">
+				<div class="gf-form-label width-7">Title</div>
-					<i class="fa fa-fw fa-unlink invisible"></i>
+				<input type="text" ng-model="link.title" class="gf-form-input">
-				</div>
+			</div>
 
-				<div class="gf-form">
+		</div>
-					<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
+
-					<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
+		<div class="section">
-					<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
+			<div class="gf-form">
-				</div>
+				<span class="gf-form-label width-10">Url params</span>
+				<input type="text" ng-model="link.params" class="gf-form-input width-10">
+			</div>
+
+			<gf-form-switch class="gf-form" label-class="width-10" label="Include time range" checked="link.keepTime"></gf-form-switch>
+			<gf-form-switch class="gf-form" label-class="width-10" label="Include variables" checked="link.includeVars"></gf-form-switch>
+			<gf-form-switch class="gf-form" label-class="width-10" label="Open in new tab " checked="link.targetBlank"></gf-form-switch>
+		</div>
+
+		<div class="section">
+			<div class="gf-form">
+				<button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)"><i class="fa fa-trash"></i> Remove Link</button>
 			</div>
 		</div>
 	</div>

public/app/features/plugins/partials/plugin_edit.html

@@ -31,7 +31,7 @@
 
   <div class="page-body">
     <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-      <div ng-bind-html="ctrl.readmeHtml" class="plugin-markdown-readme">
+      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
       </div>
     </div>
 

public/app/headers/common.d.ts

@@ -62,3 +62,8 @@ declare module 'mousetrap' {
   var config: any;
   export default config;
 }
+
+declare module 'remarkable' {
+  var config: any;
+  export default config;
+}

public/app/partials/panelgeneral.html

@@ -1,34 +1,44 @@
-<div class="gf-form-group">
+<div class="editor-row">
-	<div class="gf-form-inline">
+	<div class="section gf-form-group">
-		<div class="gf-form max-width-21">
+		<h5 class="section-heading">Info</h5>
-			<span class="gf-form-label width-8">Title</span>
-			<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
-		</div>
 		<div class="gf-form">
-			<span class="gf-form-label width-6">Span</span>
+			<span class="gf-form-label width-7">Title</span>
-			<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
+			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
 		</div>
-		<div class="gf-form">
+		<div class="gf-form gf-form--v-stretch">
-			<span class="gf-form-label width-8">Height</span>
+			<span class="gf-form-label width-7">Description</span>
-			<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
+			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description"  placeholder="Panel description, supports markdown & links"></textarea>
 		</div>
-		<gf-form-switch class="gf-form" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
 	</div>
 
-	<div class="gf-form-inline">
+	<div class="section gf-form-group">
-		<div class="gf-form max-width-21">
+		<h5 class="section-heading">Dimensions</h5>
-			<span class="gf-form-label width-8">Repeat Panel</span>
+		<div class="gf-form">
-      <dash-repeat-option model="ctrl.panel"></dash-repeat-option>
+			<span class="gf-form-label width-7">Span</span>
+			<select class="gf-form-input width-6" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label width-6">Min span</span>
+			<span class="gf-form-label width-7">Height</span>
+			<input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
+		</div>
+		<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Templating</h5>
+		<div class="gf-form">
+			<span class="gf-form-label width-8">Repeat Panel</span>
+			<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-8">Min span</span>
 			<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
 				<option value=""></option>
 			</select>
 		</div>
 	</div>
-</div>
+	</div>
 
-<panel-links-editor panel="ctrl.panel"></panel-links-editor>
+	<panel-links-editor panel="ctrl.panel"></panel-links-editor>
 
 

public/app/plugins/panel/text/module.html

@@ -1,2 +1,2 @@
-<p class="panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
+<p class="markdown-html panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
 </p>

public/sass/base/_type.scss

@@ -290,3 +290,46 @@ a.external-link {
 .pointer {
   cursor: pointer;
 }
+
+.markdown-html {
+  img {
+    max-width: 100%;
+  }
+
+  ul {
+    padding-left: $spacer*1.5;
+    margin-bottom: $spacer;
+  }
+
+  table {
+    td, th {
+      padding: $spacer*.5 $spacer;
+    }
+    th {
+      font-weight: normal;
+      background: $table-bg-accent;
+    }
+  }
+
+  table, th, td {
+    border: 1px solid $table-border;
+    border-collapse: collapse;
+  }
+
+  a {
+    text-decoration: underline;
+    color: $external-link-color;
+    &:hover {
+      color: lighten($external-link-color, 10%);
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ul:last-child {
+    margin-bottom: 0;
+  }
+}
+

public/sass/components/_alerts.scss

@@ -6,8 +6,6 @@
 // Base styles
 // -------------------------
 
-
-
 .alert {
   padding: 0.5rem 2rem 0.5rem 1rem;
   margin-bottom: $line-height-base;
@@ -30,9 +28,11 @@
 .alert-error {
   background-color: $errorBackground;
 }
+
 .alert-info {
   background-color: $infoBackground;
 }
+
 .alert-warning {
   background-color: $state-warning-bg;
 }

public/sass/components/_drop.scss

@@ -15,7 +15,6 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   &.drop-open {
     display: block;
   }
-
  }
 
 .drop-element, .drop-element * {
@@ -30,8 +29,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
 }
 
 .drop-help {
-  ul {
+  a {
-    padding-left: $spacer;
+    color: $white;
+    &:hover {
+      color: darken($white, 10%);
+    }
   }
 }
 
@@ -41,9 +43,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
     display: none;
   }
 }
+
 @include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-theme("error", $errorBackground, $popover-color);
 @include drop-theme("popover", $popover-bg, $popover-color);
 
 @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
 @include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
 

public/sass/components/_gf-form.scss

@@ -244,6 +244,11 @@ $gf-form-margin: 0.25rem;
   padding-left: $spacer;
   color: $text-color-weak;
 
+  &--bold {
+    color: $text-color-emphasis;
+    padding-left: 0;
+  }
+
   &--right-absolute {
     position: absolute;
     right: $spacer;

public/sass/components/_panel_text.scss

@@ -1,8 +1 @@
 
-.panel-text-content {
-  ul {
-    margin: 0 0 $spacer $spacer * 1.5;
-  }
-  li {line-height: 2;}
-  a { color: $external-link-color; }
-}

public/sass/components/_view_states.scss

@@ -29,6 +29,8 @@
   .dashnav-refresh-action,
   .dashnav-zoom-out,
   .dashnav-action-icons,
+  .panel-info-corner--info,
+  .panel-info-corner--links,
   .dashnav-move-timeframe  {
     opacity: 0;
     transition: all 1.5s ease-in-out 1s;

public/sass/pages/_dashboard.scss

@@ -73,6 +73,11 @@ div.flot-text {
   display: none;
 }
 
+.panel-help-text {
+  margin-left: 10px;
+  display: none;
+}
+
 .panel-loading {
   position:absolute;
   top: -3px;
@@ -84,26 +89,59 @@ div.flot-text {
   text-align: center;
 }
 
-.panel-error {
+.panel-info-corner {
-  color: $white;
+  color: $text-color;
+  cursor: pointer;
   position: absolute;
+  display: none;
   left: 0;
-  padding: 0px 17px 6px 5px;
+  width: 27px;
+  height: 27px;
   top: 0;
   z-index: 10;
-  i {
+
+  .fa {
     position: relative;
     top: -2px;
+    left: -5px;
+    font-size: 90%;
+  }
+
+  &--info {
+    display: block;
+    background: $blue-dark;
+    .fa:before {
+      content: "\f129";
+    }
+  }
+
+  &--links {
+    display: block;
+    background: $blue-dark;
+    .fa {
+      left: -3px;
+    }
+    .fa:before {
+      content: "\f08e";
+    }
+  }
+
+  &--error {
+    display: block;
+    background: $errorBackground !important;
+    .fa:before {
+      content: "\f12a";
+    }
   }
 }
 
-.panel-error-arrow {
+.panel-info-corner-inner {
   width: 0;
   height: 0;
   position: absolute;
-  border-left: 31px solid transparent;
+  border-left: 27px solid transparent;
-  border-right: 30px solid transparent;
+  border-right: 0px solid transparent;
-  border-bottom: 27px solid $panel-bg;
+  border-bottom: 26px solid $panel-bg;
   left: 0;
   bottom: 0;
 }

public/sass/pages/_plugins.scss

@@ -37,32 +37,6 @@
   overflow: hidden;
 }
 
-.plugin-markdown-readme {
-  img {
-    max-width: 100%;
-  }
-
-  ul {
-    padding-left: $spacer*1.5;
-    margin-bottom: $spacer*2;
-  }
-
-  table {
-    td, th {
-      padding: $spacer*.5 $spacer;
-    }
-    th {
-      font-weight: normal;
-      background: $table-bg-accent;
-    }
-  }
-
-  table, th, td {
-    border: 1px solid $table-border;
-    border-collapse: collapse;
-  }
-}
-
 .get-more-plugins-link {
   color: $text-muted;
   font-size: $font-size-sm;

public/test/test-main.js

@@ -12,6 +12,7 @@
     paths: {
       'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
       'eventemitter3': 'vendor/npm/eventemitter3/index.js',
+      'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
       'tether': 'vendor/npm/tether/dist/js/tether.js',
       'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
       'moment': 'vendor/moment.js',