Add a markdown-view directive and change all uses of markdown in the partials to use the directive

static/css/quay.css

@@ -27,6 +27,10 @@
   margin-left: 10px;
 }
 
+.organization-header-element .team-name {
+  text-transform: capitalize;
+}
+
 .namespace-selector-dropdown .namespace {
   padding: 6px;
   padding-left: 10px;
@@ -1390,13 +1394,15 @@ p.editable:hover i {
 .org-view .team-listing {
   margin: 10px;
   padding: 10px;
-  border-bottom: 1px solid #eee;
-  min-width: 400px;
-  display: inline-block;
+}
+
+.org-view .team-listing i {
+  margin-right: 10px;
 }
 
 .org-view .team-title { 
   font-size: 20px;
+  text-transform: capitalize;
 }
 
 /* Overrides for typeahead to work with bootstrap 3. */

static/directives/markdown-view.html

@@ -0,0 +1 @@
+<span class="markdown-view-content" ng-bind-html-unsafe="getMarkedDown(content, firstLineOnly)"></span>

static/js/app.js

@@ -1,3 +1,40 @@
+function getFirstTextLine(commentString) {
+  if (!commentString) { return ''; }
+      
+  var lines = commentString.split('\n');
+  var MARKDOWN_CHARS = {
+    '#': true,
+    '-': true,
+    '>': true,
+    '`': true
+  };
+
+  for (var i = 0; i < lines.length; ++i) {
+    // Skip code lines.
+    if (lines[i].indexOf('    ') == 0) {
+      continue;
+    }
+
+    // Skip empty lines.
+    if ($.trim(lines[i]).length == 0) {
+      continue;
+    }
+
+    // Skip control lines.
+    if (MARKDOWN_CHARS[$.trim(lines[i])[0]]) {
+      continue;
+    }
+
+    return getMarkedDown(lines[i]);
+  }
+
+  return '';
+}
+
+function getMarkedDown(string) {
+  return Markdown.getSanitizingConverter().makeHtml(string || '');
+}
+
 // Start the application code itself.
 quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics', 'angulartics.mixpanel', '$strap.directives'], function($provide) {
     $provide.factory('UserService', ['Restangular', function(Restangular) {
@@ -215,6 +252,31 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
     RestangularProvider.setBaseUrl('/api/');
   });
 
+
+quayApp.directive('markdownView', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/markdown-view.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'content': '=content',
+      'firstLineOnly': '=firstLineOnly'
+    },
+    controller: function($scope, $element) {
+      $scope.getMarkedDown = function(content, firstLineOnly) {
+        if (firstLineOnly) {
+          content = getFirstTextLine(content);
+        }
+        return getMarkedDown(content);
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('repoCircle', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -25,43 +25,6 @@ function getRestUrl(args) {
   return url;
 }
 
-function getFirstTextLine(commentString) {
-  if (!commentString) { return; }
-      
-  var lines = commentString.split('\n');
-  var MARKDOWN_CHARS = {
-    '#': true,
-    '-': true,
-    '>': true,
-    '`': true
-  };
-
-  for (var i = 0; i < lines.length; ++i) {
-    // Skip code lines.
-    if (lines[i].indexOf('    ') == 0) {
-      continue;
-    }
-
-    // Skip empty lines.
-    if ($.trim(lines[i]).length == 0) {
-      continue;
-    }
-
-    // Skip control lines.
-    if (MARKDOWN_CHARS[$.trim(lines[i])[0]]) {
-      continue;
-    }
-
-    return getMarkedDown(lines[i]);
-  }
-
-  return '';
-}
-
-function getMarkedDown(string) {
-  return Markdown.getSanitizingConverter().makeHtml(string || '');
-}
-
 function HeaderCtrl($scope, $location, UserService, Restangular) {
   $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
     $scope.user = currentUser;
@@ -195,15 +158,6 @@ function RepoListCtrl($scope, Restangular, UserService) {
     $scope.user = currentUser;
   }, true);
 
-  $scope.getCommentFirstLine = function(commentString) {
-    return getMarkedDown(getFirstTextLine(commentString));
-  };
-
-  $scope.getMarkedDown = function(string) {
-    if (!string) { return ''; }
-    return getMarkedDown(string);
-  };
-
   $scope.loading = true;
   $scope.public_repositories = null;
   $scope.private_repositories = null;
@@ -245,10 +199,6 @@ function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyS
   $scope.awaitingConfirmation = false;
   $scope.registering = false;
 
-  $scope.getCommentFirstLine = function(commentString) {
-    return getMarkedDown(getFirstTextLine(commentString));
-  };
-
   $scope.register = function() {
     $('.form-signup').popover('hide');
     $scope.registering = true;
@@ -322,19 +272,10 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
     return Date.parse(dateString);
   };
 
-  $scope.getCommentFirstLine = function(commentString) {
-    return getMarkedDown(getFirstTextLine(commentString));
-  };
-
   $scope.getTimeSince = function(createdTime) {
       return moment($scope.parseDate(createdTime)).fromNow();
   };
 
-  $scope.getMarkedDown = function(string) {
-    if (!string) { return ''; }
-    return getMarkedDown(string);
-  };
-
   var getDefaultTag = function() {
     if ($scope.repo === undefined) {
       return undefined;
@@ -866,11 +807,6 @@ function ImageViewCtrl($scope, $routeParams, $rootScope, Restangular) {
 
   $('#copyClipboard').clipboardCopy();
 
-  $scope.getMarkedDown = function(string) {
-    if (!string) { return ''; }
-    return getMarkedDown(string);
-  };
-
   $scope.parseDate = function(dateString) {
     return Date.parse(dateString);
   };
@@ -1079,11 +1015,6 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, Restangula
     $('#editModal').modal({});
   };
 
-  $scope.getMarkedDown = function(string) {
-    if (!string) { return ''; }
-    return getMarkedDown(string);
-  };
-
   $scope.saveDescription = function() {
     $('#editModal').modal('hide');
     $scope.repo.description = $('#wmd-input-description')[0].value;  
@@ -1180,15 +1111,6 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, Restangula
 function OrgViewCtrl($scope, Restangular, $routeParams) {
   var orgname = $routeParams.orgname;
 
-  $scope.getDescriptionFirstLine = function(commentString) {
-    return getMarkedDown(getFirstTextLine(commentString));
-  };
-
-  $scope.getMarkedDown = function(string) {
-    if (!string) { return ''; }
-    return getMarkedDown(string);
-  };
-
   var loadOrganization = function() {
     var getOrganization = Restangular.one(getRestUrl('organization', orgname));
     getOrganization.get().then(function(resp) {

static/partials/image-view.html

@@ -20,7 +20,9 @@
    </div>
 
   <!-- Comment -->
-  <blockquote ng-show="image.comment" ng-bind-html-unsafe="getMarkedDown(image.comment)"></blockquote>
+  <blockquote ng-show="image.comment">
+    <span class="markdown-view" content="image.comment"></span>
+  </blockquote>
 
   <!-- Information -->
   <dl class="dl-normal">

static/partials/landing.html

@@ -17,7 +17,7 @@
             <div class="repo-listing" ng-repeat="repository in myrepos">
               <span class="repo-circle no-background" repo="repository"></span>
               <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
-              <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+              <div class="markdown-view description" content="repository.description" first-line-only="true"></div>
             </div>
           </div>
           <div ng-show="!loadingmyrepos && myrepos.length == 0">

static/partials/new-repo.html

@@ -40,7 +40,7 @@
       <div class="section">
         <strong>Description:</strong><br>
         <p class="description lead editable" ng-click="editDescription()">
-          <span class="content" ng-bind-html-unsafe="getMarkedDown(repo.description)"></span>
+          <span class="markdown-view content" content="repo.description"></span>
           <i class="fa fa-edit"></i>
         </p>
       </div>

static/partials/org-view.html

@@ -19,6 +19,6 @@
         {{ team.name }}
       </span>
     </div>
-    <div class="team-description" ng-bind-html-unsafe="getCommentFirstLine(team.description)"></div>
+    <div class="team-description markdown-view" content="team.description"></div>
   </div>
 </div>

static/partials/repo-list.html

@@ -16,7 +16,7 @@
       <div class="repo-listing" ng-repeat="repository in private_repositories">
         <span class="repo-circle no-background" repo="repository"></span>
         <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
-        <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+        <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
       </div>
     </div>
 
@@ -34,7 +34,7 @@
     <div class="repo-listing" ng-repeat="repository in public_repositories">
       <span class="repo-circle no-background" repo="repository"></span>
       <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
-      <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+      <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
     </div>
   </div>
 </div>

static/partials/view-repo.html

@@ -54,7 +54,7 @@
   <!-- Description -->
   <div class="description">
     <p ng-class="'lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()">
-      <span class="content" ng-bind-html-unsafe="getMarkedDown(repo.description)"></span>
+      <span class="markdown-view content" content="repo.description"></span>
       <i class="fa fa-edit"></i>
     </p>
   </div>
@@ -122,7 +122,8 @@
             <div class="panel-body">
               <div id="current-image">
                 <div ng-show="currentImage.comment">
-                  <blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentImage.comment)">
+                  <blockquote style="margin-top: 10px;">
+                    <span class="markdown-view" content="currentImage.comment"></span>
                   </blockquote>
                 </div>