JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="microblog-wrapper" ng-app="DemoApplication" ng-controller="DemoController">
    <div class="microblog" micro-blog="blogData"></div>
</div>

JavaScript

angular.module('DemoApplication',[])
.controller('DemoController', function($scope){
  $scope.blogData = {
      author: {
          name: 'Some User'
      },
      title: "Something Creative",
      post: "This is the post's content.",
      published: new Date(),
      created: new Date(),
      likes: ['user-id-1', 'user-id-2', 'user-id-3'],
      dislikes: ['user-id-7'],
      comments: [{
          author: {
              name: "Other user 1"
          },
          post: "This is a test comment 1",
          published: new Date(),
          created: new Date(),
          likes: ['user-id-1', 'user-id-2', 'user-id-3', 'user-id-4', 'user-id-5' ],
          dislikes: ['user-id-6', 'user-id-7'],
          comments: [{
              author: {
                  name: "Other user 2"
              },
              post: "This is a test reply 1",
              published: new Date(),
              created: new Date(),
              likes: ['user-id-1', 'user-id-2' ],
              dislikes: ['user-id-6'],
              comments: []
          }]
      }, {
          author: {
              name: "Other user 2"
          },
          post: "This is a test comment 12",
          published: new Date(),
          created: new Date(),
          likes: [],
          dislikes: [],
          comments: []
      }]
  }
})
.directive('microBlog', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            var
            template = [
                '<div ng-show="o.ready">',
                '<h4 ng-show="b.title" ng-hide="o.hideTitle">{{b.title}}</h4>',
                '<div class="info" ng-show="b.author||b.published||b.created" ng-hide="o.hideInfo">',
                '<span class="created" ng-show="b.created && !b.published"><i>Created:</i> {{b.created | date}}</span>',
                '<span class="published" ng-show="b.published"><i>Published:</i> {{b.published | date}}</span>',
                '<span class="author"...