many improvements

.git.bfg-report/2017-04-08/17-43-43/protected-dirt/0bf747ec-HEAD.csv

@@ -0,0 +1 @@
+a49feb182cf447c0aaed14a9a3fe38e461f25be6,DELETE,executable,deploy.sh,35,

.git.bfg-report/2017-04-08/17-44-29/cache-stats.txt

@@ -0,0 +1,4 @@
+(apply,CacheStats{hitCount=79, missCount=47, loadSuccessCount=47, loadExceptionCount=0, totalLoadTime=125067817, evictionCount=0})
+(tree,CacheStats{hitCount=82, missCount=102, loadSuccessCount=96, loadExceptionCount=0, totalLoadTime=125634641, evictionCount=0})
+(commit,CacheStats{hitCount=23, missCount=24, loadSuccessCount=24, loadExceptionCount=0, totalLoadTime=73256468, evictionCount=0})
+(tag,CacheStats{hitCount=0, missCount=0, loadSuccessCount=0, loadExceptionCount=0, totalLoadTime=0, evictionCount=0})

.git.bfg-report/2017-04-08/17-44-29/deleted-files.txt

@@ -0,0 +1 @@
+a49feb182cf447c0aaed14a9a3fe38e461f25be6 35 deploy.sh

.git.bfg-report/2017-04-08/17-44-29/object-id-map.old-new.txt

@@ -0,0 +1,3 @@
+0ab7b9398887662372f25b8bc918b537ff51e9f5 da43e3bc0804ea2aee5b71873153b65cf0057fce
+0bf747ec9fc2f8477018ec96a119151aa650f0d6 aa5e90a577f0dd0220602dc1b3c93e3cb6982d6b
+f89e623d33a30bf670ef0278b5722b89941386b1 b089146d8b92335cf40906187937a033fdfc76e4

.git.bfg-report/2017-04-08/17-47-25/cache-stats.txt

@@ -0,0 +1,4 @@
+(apply,CacheStats{hitCount=59, missCount=48, loadSuccessCount=48, loadExceptionCount=0, totalLoadTime=193677952, evictionCount=0})
+(tree,CacheStats{hitCount=86, missCount=99, loadSuccessCount=96, loadExceptionCount=0, totalLoadTime=189119312, evictionCount=0})
+(commit,CacheStats{hitCount=24, missCount=25, loadSuccessCount=25, loadExceptionCount=0, totalLoadTime=86157648, evictionCount=0})
+(tag,CacheStats{hitCount=0, missCount=0, loadSuccessCount=0, loadExceptionCount=0, totalLoadTime=0, evictionCount=0})

.git.bfg-report/2017-04-08/17-47-25/deleted-files.txt

@@ -0,0 +1 @@
+89da2a8331786b0a6b180070918b5dca09d36a77 112 watch.sh

.git.bfg-report/2017-04-08/17-47-25/object-id-map.old-new.txt

@@ -0,0 +1,26 @@
+09b347fd00f4c6b867a972a12373de2d8a93891a b2f8535a8158a7bf606849549c2ae5aeb15515c9
+24b8f03d49d2bb4acb7adcb2ea4e31d213004405 250886fc69a28476db8974f09db9cb9ba61d4686
+2bc63e4c8712986bfb7d85f94f20cf804b755b54 736c5d259e6cfa92f934732d1ffeb0a76e0bdca5
+4945c9d40ed8c6050f17ee1ef541786309991d77 feeef725087d815387ac56bc3af5b74ae9a17a82
+50acc3a3dbfb4b65467816c1fae5ed17c3fda9f1 3e4df6610caf25620ef149d8b9c36767791393e4
+55b79516acc306e3274a41421f99919e64f2ad98 307fa7a8b1f22ddcade6283f528a9955004e0413
+643ec05004f981bbbce701c2856bdf894d52d735 a08474118cf911d10b224b7478ea971f8b0290fb
+74202848d2a86fdff729e0bc05c7d554599a8f85 93106add00dab60bdb68f5cefdf8c6c93ce7fd32
+756fdf96e8371f0949524d3a5784c4b215bfb5d5 c0f0efbb0c8df6610991c5b332ec4eb28f486bc2
+77d4f678c3337b2dc7104f4de6a16f3844c110b7 e378cf8bf29c713b889ef9c02802968fc51cdded
+7920797640c21e5aaeb858d0223e54dec5f07742 3cefe785b2a6bd8d2f5c274808cb618b35ad1c41
+7e3b9708863af7a5d0d51372562aa5d350c5fb7a 8a9cb180443eddc4d0be389c1f2a1e0cd5c2b120
+87db97c176f1a40288d5d518f40bfac58d6c06b6 32bfd586a91115b4e41b651d8ffe6c7ab021bbf7
+892a9fb9b6c6cd4cf5865866cec7453f2bca9ae7 de2ea04be1cf53d1030e1de412a4c9658b13f245
+94e316c5f23bd112b206051a8fc705182f8993fa ae2733aaddafd710df7a110f0a509db0a0934ccb
+97eae0f9863514e13321d386a94fe04635529caf 0b8a5e21ad60919763a2f438af38df303328e4d9
+a0f53cf20930362a93039b41ef88dcbb83c2f092 9e14161239a4ee61cd0de1ea48f1f92783656837
+aa5e90a577f0dd0220602dc1b3c93e3cb6982d6b 3132d597ac0199d97cd6cb2204eeec6ad54bc5d7
+aeba33b8effec6b44903db87ac385d9cf58b8ee8 0083705e188bd858664a28241e828df054232604
+b089146d8b92335cf40906187937a033fdfc76e4 425748b432f1ab07f715ffb65614b6fcc0ccc5b3
+b63ad98c993e0d33b58f369c082efc3f1acf2324 506f797b7d40e68c07a673d159148d0950271068
+c60bcfc7bdc44218b0a50ec3cf357c8c30f7158c 1132fac75c039eb42521f0abfbd6cdbeafe50d08
+d8c067ff11302b868cade6e89525e392d52dc7da 8409b4f71fce497003dfdb9a68c8d64769f073c8
+da43e3bc0804ea2aee5b71873153b65cf0057fce c5dc1098c5fd6a3b173b893bf919c1a141316f6a
+f7a657f45daea751be4539485f07b9bc43551b5d ce086dfcbeefcee41e5cadfd9c80cbabd0b34113
+fee2bea6eb4afcb94885927029d070082dcc14a7 ca1fa7a5d1aada654624d92dcc066cea7c794872

.git.bfg-report/2017-04-08/17-47-28/cache-stats.txt

@@ -0,0 +1,4 @@
+(apply,CacheStats{hitCount=72, missCount=49, loadSuccessCount=48, loadExceptionCount=0, totalLoadTime=144333850, evictionCount=0})
+(tree,CacheStats{hitCount=85, missCount=100, loadSuccessCount=96, loadExceptionCount=0, totalLoadTime=154391122, evictionCount=0})
+(commit,CacheStats{hitCount=24, missCount=25, loadSuccessCount=25, loadExceptionCount=0, totalLoadTime=63369618, evictionCount=0})
+(tag,CacheStats{hitCount=0, missCount=0, loadSuccessCount=0, loadExceptionCount=0, totalLoadTime=0, evictionCount=0})

.git.bfg-report/2017-04-08/17-47-28/deleted-files.txt

@@ -0,0 +1 @@
+ea38b50e5df93397eeb21fdc2d21616bb4ab9571 61 local.sh

.git.bfg-report/2017-04-08/17-47-28/object-id-map.old-new.txt

@@ -0,0 +1,12 @@
+0083705e188bd858664a28241e828df054232604 d75b19edfb41c96ba7c5282a572c5f1738de461e
+250886fc69a28476db8974f09db9cb9ba61d4686 338b5a3edfd11633b764c9c17a51e1476a981b0a
+307fa7a8b1f22ddcade6283f528a9955004e0413 e05c5e812166552da1e75db3ccc5d780f2850b6b
+3132d597ac0199d97cd6cb2204eeec6ad54bc5d7 73f4485773686d787c610ebdf425752bde290dba
+3cefe785b2a6bd8d2f5c274808cb618b35ad1c41 620a7eeef462527b568acf2171a0f577fc9468e5
+425748b432f1ab07f715ffb65614b6fcc0ccc5b3 ac81eeeef91aedcd70e8597b72a844071bf21147
+a08474118cf911d10b224b7478ea971f8b0290fb 94bd5b457103128e9255ff0fe2369096e0c85bbb
+ae2733aaddafd710df7a110f0a509db0a0934ccb ed15a8b100e19187d5e88aac2547447a22d799ee
+c5dc1098c5fd6a3b173b893bf919c1a141316f6a 3a3a2dea91aaa9bfb8a374fbc4acf1a84813fdb5
+ce086dfcbeefcee41e5cadfd9c80cbabd0b34113 7333e5fa8d3a953b6b8a644941222227e6c1e4cb
+de2ea04be1cf53d1030e1de412a4c9658b13f245 a6b0a13239cf964b3af12648986e0e3fcaa9dd9d
+e378cf8bf29c713b889ef9c02802968fc51cdded ae779c5c6c08269a42059327e996d450467cd1bd

.gitignore

@@ -7,3 +7,4 @@ build
 node_modules
 .sass_cache/*
 deploy.sh
+tags

build/comment.py

@@ -1,18 +0,0 @@
-from json import dumps
-
-def comment(author, title, text):
-    return {
-            "title"  : title,
-            "author" : author,
-            "text"   : text
-            }
-
-
-testcomments = {
-                1 : dumps(
-                    [
-                        comment("Anonymous Coward 0", "Some comment?", "super duper awesome comment here"),
-                        comment("Anonymous Coward 1", "Something? IDEK", "super duper worse comment here"),
-                        comment("Anonymous Coward 2", "Some other comment?", "super duper dang terrible comment here")
-                        ])
-                    }

build/posts.py

@@ -23,8 +23,6 @@ class Posts:
                 }
         return jsonify(self.db.save(doc))
 
-    def getposts(self, start, end):
-        return jsonify([])
-
-    def getcomments(self, postID):
-        return jsonify([])
+    def getposts(self, limit, start):
+        result = self.db.iterview("blogPosts/blog-posts", 10, include_docs=True, limit=limit, skip=start)
+        return jsonify(list(result))

build/requirements.txt

@@ -1,15 +1,41 @@
-appdirs==1.4.0
+appdirs==1.4.3
+cffi==1.9.1
 click==6.7
 CouchDB==1.1
+cryptography==1.7.2
+dominate==2.3.1
+elasticsearch==5.1.0
+elasticsearch-dsl==5.1.0
+Fabric==1.13.1
 Flask==0.12
 flask-appconfig==0.11.1
+Flask-Bootstrap==3.3.7.1
 flask-marshmallow==0.7.0
+greenlet==0.4.12
+idna==2.2
 itsdangerous==0.24
-Jinja2==2.9.5
+Jinja2==2.9.4
+lxml==3.7.2
 MarkupSafe==0.23
-marshmallow==2.13.0
+marshmallow==2.13.5
 packaging==16.8
-pyparsing==2.1.10
+paramiko==2.1.1
+pbr==1.10.0
+pyasn1==0.2.1
+pycparser==2.17
+pyparsing==2.2.0
+PySocks==1.6.6
+python-dateutil==2.6.0
 python-memcached==1.58
+pyxdg==0.25
+requests==2.13.0
 six==1.10.0
+stevedore==1.20.0
+urllib3==1.19.1
+uWSGI==2.0.14
+virtualenv==15.1.0
+virtualenv-clone==0.2.6
+virtualenvwrapper==4.7.2
+visitor==0.1.3
 Werkzeug==0.11.15
+youtube-dl==2017.1.28

build/styles/riotblog.min.css

@@ -1,6 +1,38 @@
-.post-text, .blog-title, .post, .postnav {
+.post-text, .ltb-title, .post, .postnav {
   text-align: center; }
 
+.navigate {
+  width: 70%;
+  margin: auto; }
+
+.content-box, .projects-box, .posts-box {
+  display: flex;
+  /* defines flexbox */
+  flex-direction: column;
+  /* top to bottom */
+  justify-content: space-between;
+  /* first item at start, last at end */
+  position: relative; }
+
+.projects-box {
+  height: 350px !important; }
+
+.posts-box {
+  height: 250px !important; }
+
+.content {
+  margin: auto;
+  max-width: 40%; }
+  @media (max-width: 1000px) {
+    .content {
+      max-width: 60%; } }
+  @media (max-width: 800px) {
+    .content {
+      max-width: 70%; } }
+  @media (max-width: 400px) {
+    .content {
+      max-width: 80%; } }
+
 .post-content {
   max-width: 50%;
   text-align: justify;
@@ -14,39 +46,6 @@
   .post-content {
     max-width: 90%; } }
 
-.comment-block, .comments, .maxwarn {
-  max-width: 30%; }
-
-@media (max-width: 700px) {
-  .comment-block, .comments, .maxwarn {
-    max-width: 50%; } }
-
-@media (max-width: 500px) {
-  .comment-block, .comments, .maxwarn {
-    max-width: 70%; } }
-
-.comments {
-  margin-top: 5%; }
-
-.comment {
-  margin-top: 2%;
-  max-width: 40%; }
-
-@media (max-width: 700px) {
-  .comment {
-    max-width: 65%; } }
-
-@media (max-width: 500px) {
-  .comment {
-    max-width: 85%; } }
-
-.comments-loader {
-  margin-top: 2%; }
-
-.comment-body {
-  margin-left: 10px;
-  margin-right: 10px; }
-
 .rounded-button {
   border-radius: 13px; }
 
@@ -58,3 +57,6 @@
 
 .footer {
   margin-top: 10%; }
+
+.editor {
+  height: 100% !important; }

build/templates/index.html

@@ -1,37 +1,23 @@
-{% block head %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<head>
+  <link rel="stylesheet" href="/blog/styles/spectre.min.css">
+  <link rel="stylesheet" href="/blog/styles/riotblog.min.css">
+  <link rel="stylesheet" href="/blog/styles/projects.min.css">
+  <link rel="stylesheet" href="/blog/styles/animate.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-<header class="text-center nav navbar">
-  <section class="centered page-top navbar-section">
-    <h1 class="blog-title">nowhere</h1>
-  </section>
-</header>
-{% endblock %}
-
+</head>
 <html>
   <body>
-    {% block content %}
-
-    <posts>
-      <post></post>
-    </posts>
-    <editor>
-    </editor>
-
-    {% endblock %}
-
+    <section class="text-center nav navbar centered page-top navbar-section">
+      <h1 class="blog-title">WK</h1>
+    </section>
+    <app></app>
     <footer class="footer">
     </footer>
 
-{% block styles %}
-
-  <link rel="stylesheet" href="/blog/styles/spectre.min.css">
-  <link rel="stylesheet" href="/blog/styles/riotblog.min.css">
-
-{% endblock %}
-
-{% block scripts %}
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
-{% endblock %}
-
   </body>
 </html>

build/website.py

@@ -1,7 +1,7 @@
 #! /usr/bin/python3
 from functools import partial
 
-from flask import abort, Flask, render_template, flash, request, send_from_directory
+from flask import abort, Flask, render_template, flash, request, send_from_directory, jsonify
 from werkzeug.local import Local, LocalProxy, LocalManager
 from flask_appconfig import AppConfig
 
@@ -9,13 +9,13 @@ from urllib.parse import unquote
 from urllib.parse import quote, unquote
 from json import dumps, loads
 
-from comment import testcomments
-
 from werkzeug.contrib.cache import MemcachedCache
 cache = MemcachedCache(['127.0.0.1:11211'])
 
 import os
+
 from posts import Posts
+from projects import getProjects
 
 posts = Posts()
 
@@ -34,7 +34,6 @@ def cacheit(key, thunk):
     return cached
 
 def NeverWhere(configfile=None):
-
     app = Flask(__name__)
     app.config["TEMPLATES_AUTO_RELOAD"] = True
     app.config["COUCHDB_SERVER"] = "http://localhost:5984"
@@ -43,11 +42,28 @@ def NeverWhere(configfile=None):
         #return send_from_directory("/srv/http/goal/favicon.ico",
                                    #'favicon.ico', mimetype='image/vnd.microsoft.icon')
 
+    @app.route("/blog/projects", methods=("GET",))
+    def projects():
+        return jsonify(cacheit("projects", getProjects))
+
+    @app.route("/blog/stuff", methods=("GET",))
+    def stuff():
+        return render_template("projects.html")
+
+    @app.route("/blog/decision/", methods=("GET", "POST"))
+    def decision():
+        print("matched decision")
+        return render_template("decisions.html")
+
     @app.route("/blog/", methods=("GET", "POST"))
     def index():
         print("matched index")
         return render_template("index.html")
 
+    @app.route("/blog/editor/", methods=("GET", "POST"))
+    def editor():
+        return render_template("write.html")
+
     @app.route("/blog/scripts/<filename>", methods=("GET", "POST"))
     def send_script(filename):
         print("matched scripts route")
@@ -57,30 +73,21 @@ def NeverWhere(configfile=None):
     def send_style(filename):
         return send_from_directory("/srv/http/riotblog/styles", filename)
 
-    @app.route("/blog/switchpost/<pid>")
-    def switchPost(pid):
-        posts = {
-                    "1" : "Post one is now changed as before! ",
-                    "2" : "Post two here and it's changed again and again! "
-                }
-        return posts.get(pid, "false")
-
-
-    @app.route("/blog/comments/<pid>")
-    def comments(pid):
-        try:
-            return testcomments.get(int(pid), dumps([]))
-        except ValueError as e:
-            print(e)
-            return dumps([])
-
     @app.route("/blog/insert/")
     def insert():
         return posts.savepost(**request.args)
 
+    @app.route("/blog/switchpost/<pid>")
+    def getposts(pid):
+        try:
+            index = int(pid)
+        except ValueError:
+            index = 0
+        return posts.getposts(index+1, index)
+
     @app.route("/<path:path>")
     def page_not_found(path):
-        return "Custom failure message"
+        return "Oops, couldn't find that :/"
 
     return app
 

nohup.out

@@ -0,0 +1,2 @@
+Pseudo-terminal will not be allocated because stdin is not a terminal.
+Pseudo-terminal will not be allocated because stdin is not a terminal.

requirements.txt

@@ -1,15 +1,41 @@
-appdirs==1.4.0
+appdirs==1.4.3
+cffi==1.9.1
 click==6.7
 CouchDB==1.1
+cryptography==1.7.2
+dominate==2.3.1
+elasticsearch==5.1.0
+elasticsearch-dsl==5.1.0
+Fabric==1.13.1
 Flask==0.12
 flask-appconfig==0.11.1
+Flask-Bootstrap==3.3.7.1
 flask-marshmallow==0.7.0
+greenlet==0.4.12
+idna==2.2
 itsdangerous==0.24
-Jinja2==2.9.5
+Jinja2==2.9.4
+lxml==3.7.2
 MarkupSafe==0.23
-marshmallow==2.13.0
+marshmallow==2.13.5
 packaging==16.8
-pyparsing==2.1.10
+paramiko==2.1.1
+pbr==1.10.0
+pyasn1==0.2.1
+pycparser==2.17
+pyparsing==2.2.0
+PySocks==1.6.6
+python-dateutil==2.6.0
 python-memcached==1.58
+pyxdg==0.25
+requests==2.13.0
 six==1.10.0
+stevedore==1.20.0
+urllib3==1.19.1
+uWSGI==2.0.14
+virtualenv==15.1.0
+virtualenv-clone==0.2.6
+virtualenvwrapper==4.7.2
+visitor==0.1.3
 Werkzeug==0.11.15
+youtube-dl==2017.1.28

src/scripts/app.tag

@@ -10,12 +10,14 @@
   <div class="content">
     <loading if={!this.state.loaded}></loading>
     <projectsview
-      if={this.active.projects}
+      class="animated fadeInDown"
+      if={this.active.projects && this.state.loaded}
       state={this.state}
       ref="projectsview"
     >
     </projectsview>
     <postsview
+      state={this.state}
       if={this.active.posts}
       ref="postsview"
     >
@@ -32,6 +34,7 @@ this.route = route;
 this.riot = riot;
 
 this.state = {
+  "pid" : 1,
   "projects" : Z.empty,
   "loaded" : false
 };
@@ -66,8 +69,6 @@ to(name) {
 }
 
 this.on("mount", () => {
-  route("/", () => { route("/post/1") });
-  route("/post/*", this.setPost);
   route.start(true);
 });
 

src/scripts/post.tag

@@ -1,53 +1,52 @@
 <post>
-  <h4 class="content-box centered" if={this.nomore}>
-    No More Posts!
-  </h4>
+  <div class="posts-box post centered">
+    <div class="text-break animated fadeIn">
       <div
-    if={!(this.loading || this.nomore)}
-    class="content-box post centered"
+        if={this.swipe}
+        class={`animated ${this.transition}`}
       >
+        <div if={this.nomore}>
+          <h4>No more posts!</h4>
+        </div>
+
+        <div if={!this.nomore}>
           <h4>{ this.title }</h4>
           <h5>Posted by { this.author }</h5>
           <p class="post-content centered text-break">
             { this.content }
           </p>
+        </div>
         <div class="divider"></div>
       </div>
-  <div class="controls container">
-    <div class="columns">
-      <div class="column col-6">
-        <button class={"btn btn-lg nav-button float-right " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading}
-                onclick={this.prev}
-        >
-
-          <i class="fa fa-arrow-left" aria-hidden="true"></i>
-        </button>
     </div>
-      <div class="column col-6">
-        <button class={"btn btn-lg nav-button float-left  " + (this.nomore ? "disabled" : " ") + this.nextloading}
-                onclick={this.next}
+    <div
+      data-is="postcontrols"
+      state={this.opts.state}
+      prevloading={this.prevloading}
+      prev={this.prev}
+      nomore={this.nomore}
+      nextloading={this.nextloading}
+      next={this.next}
     >
-          <i class="fa fa-arrow-right" aria-hidden="true"></i>
-        </button>
-      </div>
     </div>
   </div>
 <script>
 
 import 'whatwg-fetch';
 import { default as R } from 'ramda';
+import './postcontrols.tag';
 
 var self = this;
 
 self.author = "";
 self.title = "";
 self.content = "";
-self.loading = false;
 self.prevloading = "";
 self.nextloading = "";
-
+self.transition = "";
 self.nomore = false;
 self.content = "";
+self.swipe = true;
 
 prev(ev) {
   ev.preventDefault();
@@ -55,14 +54,13 @@ prev(ev) {
     return;
   }
   self.prevloading = " loading";
-  if (self.nomore) {
-    self.nomore = false;
-  }
-  if (self.pid > 1) {
-    self.pid--;
+
+  if (self.opts.state.pid > 1) {
+    self.opts.state.pid--;
     self.update();
   }
-  self.setPost(self.pid);
+  self.update({"swipe" : false});
+  self.setPost(self.opts.state.pid, "fadeInLeft");
 }
 
 next(ev) {
@@ -72,51 +70,55 @@ next(ev) {
   }
   self.nextloading = " loading";
   if (!self.nomore) {
-    self.pid++;
+    self.opts.state.pid++;
     self.update();
   }
-  self.setPost(self.pid);
+  self.update({"swipe" : false});
+  self.setPost(self.opts.state.pid, "fadeInRight");
 }
 
-setPost(pid) {
-  this.pid = pid;
-  this.update();
-  this.loading = true;
-  fetch(`/blog/switchpost/${pid-1}`)
+setPost(pid, transition) {
+  this.opts.state.pid = pid;
+  fetch(`/blog/switchpost/${this.opts.state.pid-1}`)
     .then((resp) => resp.text())
     .then(
       (body) => {
         if (body === "false") {
           self.nomore = true;
+          self.prevloading = "";
+          self.nextloading = "";
+          self.swipe = true;
+          self.transition = transition;
           self.update()
+          return;
         }
         else {
           var postcontent = JSON.parse(body);
           if (postcontent.length == 0) {
-            self.loading = false;
             self.prevloading = "";
             self.nextloading = "";
-            self.author = "";
-            self.content = "";
-            self.title = "No more posts!";
             self.nomore = true;
+            self.swipe = true;
+            self.transition = transition;
             self.update();
             return;
           }
           self.author = postcontent[0].doc.author[0];
           self.content = postcontent[0].doc.content[0];
           self.title = postcontent[0].doc.title[0];
+          self.transition = transition;
+          self.swipe = true;
+          self.nomore = false;
           self.update();
         }
 
-        self.loading = false;
         self.prevloading = "";
         self.nextloading = "";
         self.update();
       });
 }
 
-this.setPost(this.opts.pid);
+this.setPost(this.opts.state.pid);
 
 </script>
 </post>

src/scripts/postcontrols.tag

@@ -0,0 +1,21 @@
+<postcontrols>
+    <div class="container centered">
+      <div class="columns">
+        <div class="column col-6">
+          <button class={"btn btn-lg nav-button float-right " + (this.opts.state.pid <= 1 ? "disabled" : " ") + this.opts.prevloading}
+                  onclick={this.opts.prev}
+          >
+
+            <i class="fa fa-arrow-left" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="column col-6">
+          <button class={"btn btn-lg nav-button float-left  " + (this.opts.nomore ? "disabled" : " ") + this.opts.nextloading}
+                  onclick={this.opts.next}
+          >
+            <i class="fa fa-arrow-right" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+</postcontrols>

src/scripts/postsview.tag

@@ -1,5 +1,5 @@
 <postsview>
   <posts>
-    <post pid={1}></post>
+    <post state={this.parent.opts.state}></post>
   </posts>
 </postsview>

src/scripts/projects.tag

@@ -1,9 +1,7 @@
 <projects>
-    <div class="content-box">
+    <div class="projects-box">
       <h3>Projects for { this.username }</h3>
-      <div
-        class="text-break"
-      >
+      <div class="text-break">
         <div if={this.swipe} class={`card animated ${this.transition}`}>
           <div class="card-header">
             <h4 class="card-title">{ this.project().name }</h4>
@@ -19,7 +17,6 @@
           </div>
         </div>
       </div>
-    </div>
       <div class="controls container">
         <div class="columns">
           <div class="column col-6">
@@ -41,6 +38,7 @@
         </div>
       </div>
     </div>
+    </div>
 <script>
 import Z from './zipper.js';
 

src/styles/riotblog.scss

@@ -3,14 +3,27 @@
 }
 
 .navigate {
-  margin: auto;
   width: 70%;
+  margin: auto;
 }
 
 .content-box {
+  display: flex;                   /* defines flexbox */
+  flex-direction: column;          /* top to bottom */
+  justify-content: space-between;  /* first item at start, last at end */
+  position: relative;
+}
+
+.projects-box {
+  @extend .content-box;
   height: 350px !important;
 }
 
+.posts-box {
+  @extend .content-box;
+  height: 250px !important;
+}
+
 .content {
   margin: auto;
   max-width: 40%;

src/templates/index.html

@@ -8,14 +8,11 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<header class="text-center nav navbar">
-  <section class="centered page-top navbar-section">
-    <h1 class="blog-title">WK</h1>
-  </section>
-</header>
-
 <html>
   <body>
+    <section class="text-center nav navbar centered page-top navbar-section">
+      <h1 class="blog-title">WK</h1>
+    </section>
     <app></app>
     <footer class="footer">
     </footer>

src/templates/projects.html

@@ -7,14 +7,13 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<header class="text-center nav navbar">
+<html>
+  <body>
+  <header class="text-center nav navbar">
     <section class="centered page-top navbar-section">
       <h1 class="blog-title">hmmm</h1>
     </section>
-</header>
-
-<html>
-  <body>
+  </header>
     <projects>
     </projects>
     <footer class="footer">