ldapp
Version:
JavaScript Linked Data Stack
113 lines (103 loc) • 4.27 kB
HTML
<html>
<head>
<title>Blog</title>
<script src="/js/promise-3.2.0.js"></script>
<script src="/js/rdf-ext.js"></script>
<script src="/js/rdf-jsonify.js"></script>
<script src="/js/identity.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.7.0.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrap-ext.css">
</head>
<body data-ng-app="BlogApp">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login">Login</a></li>
</ul>
</div>
</div>
</div>
<div data-ng-controller="Blog" class="container">
<div>
<h1>{{header.name}}</h1>
<p>{{header.description}}</p>
</div>
<div class="row">
<div class="col-sm-8" id="blog-posts">
<div data-ng-controller="PostForm">
<span data-ng-show="!show" data-ng-click="toggle();" class="glyphicon glyphicon-chevron-left" style="cursor:pointer;"></span>
<span data-ng-show="show" data-ng-click="toggle();" class="glyphicon glyphicon-chevron-right" style="cursor:pointer;"></span>
<form data-ng-show="show" role="form">
<div class="form-group">
<input data-ng-model="title" class="form-control" value="" placeholder="Title"></input>
<textarea data-ng-model="text" class="form-control" value="" style="resize:none;" rows="5" placeholder="Text"></textarea>
</div>
<button data-ng-click="post();" class="btn btn-xs btn-primary">post</button>
</form>
</div>
<div data-ng-repeat="post in posts" data-ng-controller="Post">
<div class="blog-post">
<h2>{{post.headline}}</h2>
<p>{{post.articleBody}}</p>
<small>published {{post.datePublished | timestamp}} by <foaf-name-link href="post.author['@id']" /></small>
</div>
<div data-ng-repeat="comment in post.comments">
<blockquote class="blog-post blog-post-comment">
<p>{{comment.commentText}}</p>
<small>created {{comment.commentTime | timestamp}} by <foaf-name-link href="comment.creator['@id']" /></small>
</blockquote>
</div>
<form data-ng-controller="CommentForm">
<div class="form-group">
<textarea data-ng-model="text" data-ng-focus="gotFocus();" data-ng-blur="lostFocus();" class="form-control" value="" style="resize:none;" rows="{{focus ? 5 : 1}}"></textarea>
</div>
<button data-ng-show="focus" data-ng-click="comment();" class="btn btn-xs btn-primary">comment</button>
</form>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
<script src="/js/blog-ajs.js"></script>
</body>
</html>