use hashes for posts rather than increments

src/posts.py

@@ -33,9 +33,36 @@ class Posts:
         print("post was saved %s" % doc)
         return jsonify(self.db.save(doc))
 
-    def getposts(self, limit, start):
-        result = self.db.iterview("blogPosts/blog-posts", 10, include_docs=True, limit=limit, skip=start)
-        return jsonify(list(result))
+    def getpost(self, _id):
+        results = self.db.iterview("blogPosts/blog-posts", 1, include_docs=True, key=_id)
+        return jsonify([result.doc for result in results][0])
+
+    def iterpost(self, endkey=False, startkey=False):
+        if startkey and not endkey:
+            results = self.db.iterview("blogPosts/blog-posts", 2, include_docs=True, startkey=startkey)
+        elif endkey and not startkey:
+            results = self.db.iterview("blogPosts/blog-posts", 1, include_docs=True, endkey=endkey)
+        else:
+            results = self.db.iterview("blogPosts/blog-posts", 2, include_docs=True)
+
+        doc_ids = [result.doc for result in results]
+
+        if not doc_ids:
+            return jsonify(False)
+
+        if endkey and not startkey:
+            if len(doc_ids) < 2 or doc_ids[0] == endkey:
+                return jsonify(False)
+            return jsonify(doc_ids[-2])
+
+        if len(doc_ids) == 1:
+            return jsonify(doc_ids[0])
+
+        if doc_ids:
+            # if no startkey or endkey were specified, return the 0th post
+            return jsonify(doc_ids[1 if startkey else 0])
+
+        return jsonify(False)
 
     def allposts(self):
         result = self.db.iterview("blogPosts/blog-posts", 10, include_docs=True)
@@ -50,9 +77,6 @@ class Posts:
 
         return jsonify(posts)
 
-    def getpost(self, _id):
-        return jsonify(self.db[_id])
-
     def delete(self, _id):
         doc = self.db[_id]
         try:

src/scripts/app.tag

@@ -54,7 +54,7 @@ this.route = route;
 this.riot = riot;
 
 this.state = {
-  "pid" : 1,
+  "_id" : false,
   "projects" : Z.empty,
   "loaded" : false
 };
@@ -80,9 +80,9 @@ var projects = activate("projects");
 var about = activate("about");
 var links = activate("links");
 
-function posts(pid) {
+function posts(_id) {
   console.log(self.state);
-  self.state.pid = parseInt(pid, 10);
+  self.state._id = _id;
   activate("posts")();
   self.update();
 }
@@ -100,7 +100,7 @@ to(name) {
 
 this.route("/", self.to("posts"));
 this.route("posts/*", posts);
-this.route("posts", (() => {posts(self.state.pid)}));
+this.route("posts", (() => {posts(self.state._id)}));
 this.route("projects", projects);
 this.route("about", about);
 this.route("links", links);

src/scripts/post.tag

@@ -14,7 +14,6 @@
     </div>
     <div
       data-is="postcontrols"
-      state={this.opts.state}
       prevloading={this.prevloading}
       prev={this.prev}
       nomore={this.nomore}
@@ -38,6 +37,7 @@ var self = this;
 
 self.route = route;
 
+self._id = "";
 self.author = "";
 self.title = "";
 self.content = "";
@@ -47,7 +47,7 @@ self.transition = "";
 self.nomore = false;
 self.content = "";
 self.swipe = false;
-self.loading = !self.opts.state.loaded;
+self.loading = self.opts.state.loaded;
 
 prev(ev) {
   ev.preventDefault();
@@ -55,13 +55,8 @@ prev(ev) {
     return;
   }
   self.prevloading = " loader-branded";
-
-  if (self.opts.state.pid > 1) {
-    self.opts.state.pid--;
-    self.update();
-  }
   self.update({"swipe" : !self.swipe});
-  self.setPost(self.opts.state.pid, "fadeIn");
+  self.prevPost(self._id, "fadeIn");
 }
 
 next(ev) {
@@ -71,59 +66,76 @@ next(ev) {
   }
   self.nextloading = " loader-branded";
   if (!self.nomore) {
-    self.opts.state.pid++;
     self.update();
   }
   self.update({"swipe" : !self.swipe});
-  self.setPost(self.opts.state.pid, "fadeIn");
+  self.nextPost(self._id, "fadeIn");
 }
 
-setPost(pid, transition) {
-  self.update({"loading" : self.opts.state.loaded});
-  fetch(`/blog/switchpost/${pid-1}`)
-    .then((resp) => resp.text())
-    .then(
-      (body) => {
-        if (body === "false") {
-          self.nomore = true;
-          self.prevloading = "";
-          self.nextloading = "";
-          self.loading = false;
-          self.update()
-          return;
-        }
-        else {
-          var postcontent = JSON.parse(body);
-          if (postcontent.length == 0) {
-            self.prevloading = "";
-            self.nextloading = "";
-            self.nomore = true;
-            self.swipe = !self.swipe;
-            self.transition = "";
-            self.opts.state.pid--;
-            self.loading = false;
-            self.update();
-            return;
-          }
-          self.opts.state.pid = pid;
-          self.author = postcontent[0].doc.author;
-          self.content = postcontent[0].doc.content;
-          self.title = postcontent[0].doc.title;
-          self.transition = transition;
-          self.swipe = !self.swipe;
-          self.nomore = false;
-          self.loading = false;
-          self.update();
-        }
+updatePost(body, transition) {
+  if (body === "false") {
+    self.nomore = true;
+    self.prevloading = "";
+    self.nextloading = "";
+    self.loading = false;
+    self.update()
+    return;
+  }
+  else {
+    var postcontent = JSON.parse(body);
+    if (!postcontent) {
+      self.prevloading = "";
+      self.nextloading = "";
+      self.nomore = true;
+      self.swipe = !self.swipe;
+      self.transition = "";
+      self.loading = false;
+      self.update();
+      return;
+    }
+    self._id = postcontent._id.slice(-8);
+    self.author = postcontent.author;
+    self.content = postcontent.content;
+    self.title = postcontent.title;
+    self.transition = transition;
+    self.swipe = !self.swipe;
+    self.nomore = false;
+    self.loading = false;
+    self.update();
+  }
 
-        self.prevloading = "";
-        self.nextloading = "";
-        self.route(`/posts/${self.opts.state.pid}`);
-        self.update();
-      });
+  self.prevloading = "";
+  self.nextloading = "";
+  self.route(`/posts/${self._id}`);
+  self.update();
+}
+
+nextPost(_id, transition) {
+  fetch(`/blog/switchpost/${_id.slice(-8)}`)
+  .then((resp) => resp.text())
+  .then((resp) => { self.updatePost(resp, transition) })
+}
+
+prevPost(_id, transition) {
+  fetch(`/blog/prevpost/${_id.slice(-8)}`)
+  .then((resp) => resp.text())
+  .then((resp) => { self.updatePost(resp, transition) })
+}
+
+getPost(_id, transition) {
+  var url;
+  if (_id !== undefined && _id) {
+    url = `/blog/getpost/${_id.slice(-8)}`;
+  }
+  else {
+    url = "/blog/switchpost/";
+  }
+  fetch(url)
+  .then((resp) => resp.text())
+  .then((resp) => {self.updatePost(resp, transition) })
 }
 
-this.setPost(this.opts.state.pid);
+this.getPost(this.opts.state._id, "fadeIn");
 
 </script>
 </post>

src/scripts/postcontrols.tag

@@ -2,7 +2,7 @@
     <div class="controls container">
       <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}
+          <button class={"btn btn-lg nav-button float-right " + (false ? "disabled" : " ") + this.opts.prevloading}
                   onclick={this.opts.prev}
           >
 
@@ -10,7 +10,7 @@
           </button>
         </div>
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-left  " + (this.opts.nomore ? "disabled" : " ") + this.opts.nextloading}
+          <button class={"btn btn-lg nav-button float-left  " + (false ? "disabled" : " ") + this.opts.nextloading}
                   onclick={this.opts.next}
           >
             <i class="fa fa-arrow-right" aria-hidden="true"></i>

src/scripts/projects.tag

@@ -17,20 +17,22 @@
       <div class="text-break">
         <div if={this.swipe} class={`card animated ${this.transition}`}>
           <div class="card-header">
-            <h4 class="card-title post-title">{ this.project().name }</h4>
-            <h6 class="post-author">{ this.project().description }</h6>
+            <h3 class="card-title project-title">{ this.project().name }</h3>
+            <h5 class="project-description">{ this.project().description }</h5>
           </div>
           <div class="card-body">
+            <div class="tile">
+              <div class="tile-content">
+                <p class="tile-title">Written primarily in { this.project().language} </p>
+                <p class="tile-subtitle">Started on {moment(this.project().created_at).format("MMMM Do YYYY") }</p>
+              </div>
+              <div class="tile-action">
               <a
                 target="_blank"
                 href={this.project().html_url}>
-                <button class="btn btn-small">
-                    See on github
-                </button>
+                  <button class="btn btn-primary">See on github</button>
               </a>
-            <div class="project-content">
-              <p>Written primarily in { this.project().language }</p>
-              <p>Started on { moment(this.project().created_at).format("MMMM Do YYYY") }</p>
+              </div>
             </div>
           </div>
         </div>
@@ -63,11 +65,9 @@ import moment from 'moment';
 
 var cycle_timeout = 12;
 
-this.username = "Wes";
-this.avatar_url = "";
-
 var self = this;
 
+self.avatar_url = "";
 self.transition = "";
 self.swipe = true;
 self.moment = moment;

src/styles/riotblog.scss

@@ -77,6 +77,20 @@ p, h6, h4 {
 	color: #3A4145;
 }
 
+.project-title {
+	font-family: 'Open Sans',sans-serif !important;
+	font-size: 1.9em !important;
+	line-height: 1.6em !important;
+	color: #3A4145 !important;
+}
+
+.project-description {
+	font-family: 'Open Sans',sans-serif !important;
+	font-size: 1.2em !important;
+	line-height: 1.2em !important;
+	color: #3A4145 !important;
+}
+
 .navigate {
   width: 20% !important;
   margin-bottom: 25px !important;
@@ -133,7 +147,7 @@ p, h6, h4 {
   }
 }
 
-img, code {
+p > img, code {
   margin: auto;
   max-width: 85%;
   @media (max-width: 1000px) {
@@ -150,11 +164,17 @@ pre {
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    margin: auto;
+}
+
+code {
+  text-indent: 0mm;
+  margin: auto;
 }
 
 .projects-content {
   margin: auto;
-  max-width: 30%;
+  max-width: 22%;
   @media (max-width: 1000px) {
     max-width: 60%;
   }

src/templates/index.html

@@ -8,7 +8,7 @@
 <html>
   <body>
     <section class="text-center nav navbar centered page-top navbar-section">
-      <h1 class="blog-title">Wesley Kerfoot</h1>
+      <h1 class="blog-title">Wes Kerfoot</h1>
     </section>
     <app csrf_token="{{ csrf_token() }}"></app>
     <footer class="footer">

src/website.py

@@ -85,22 +85,32 @@ def NeverWhere(configfile=None):
     def send_style(filename):
         return send_from_directory("/srv/http/riotblog/styles", filename)
 
+    # get the next post
     @app.route("/blog/switchpost/<pid>")
-    def getposts(pid):
-        try:
-            index = int(pid)
-        except ValueError:
-            index = 0
-        return posts.getposts(index+1, index)
+    def getpostid(pid):
+        return posts.iterpost(startkey=pid)
 
-    @app.route("/blog/allposts")
-    def allposts():
-        return posts.allposts()
+    # get the first post
+    @app.route("/blog/switchpost/")
+    def nextpost():
+        return posts.iterpost()
+
+    # get the post previous to this one
+    @app.route("/blog/prevpost/<pid>")
+    def prevpost(pid):
+        return posts.iterpost(endkey=pid)
 
+    # get the contents of any post
     @app.route("/blog/getpost/<_id>")
     def getpost(_id):
         return posts.getpost(_id)
 
+    # get the id of every post
+    @app.route("/blog/allposts")
+    def allposts():
+        return posts.allposts()
+
+    # remove a post
     @app.route("/blog/deletepost/<_id>")
     @login_required
     def delete(_id):