put everything on one page and use router

src/projects.py

@@ -0,0 +1,6 @@
+import requests
+
+from json import loads
+
+def getProjects():
+    return loads(requests.get("https://api.github.com/users/nisstyre56/repos?sort=updated&direction=desc").content)

src/scripts/app.tag

@@ -0,0 +1,90 @@
+<app>
+  <ul class="navigate tab tab-block">
+    <li class={"tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
+      <a onclick={to("projects")} href="#">Projects</a>
+    </li>
+    <li class={"tab-item " + (this.active.posts ? "active" : "")}>
+      <a onclick={to("posts")} href="#">Posts</a>
+    </li>
+  </ul>
+  <div class="content">
+    <loading if={!this.state.loaded}></loading>
+    <projectsview
+      if={this.active.projects}
+      state={this.state}
+      ref="projectsview"
+    >
+    </projectsview>
+    <postsview
+      if={this.active.posts}
+      ref="postsview"
+    >
+    </postsview>
+  </div>
+<script>
+import './projectsview.tag';
+import './postsview.tag';
+import './loading.tag';
+import Z from './zipper.js';
+
+import route from 'riot-route';
+this.route = route;
+this.riot = riot;
+
+this.state = {
+  "projects" : Z.empty,
+  "loaded" : false
+};
+
+this.active = {
+  "projects" : false,
+  "posts" : false
+};
+
+var self = this;
+
+this.route("posts",
+  function() {
+    self.active.posts = true;
+    self.active.projects = false;
+    self.update();
+  });
+
+this.route("projects",
+  function() {
+    self.active.projects = true;
+    self.active.posts = false;
+    self.update();
+  });
+
+to(name) {
+  return (function(e) {
+    e.preventDefault();
+    this.route(name);
+    return;
+  }).bind(this);
+}
+
+this.on("mount", () => {
+  route("/", () => { route("/post/1") });
+  route("/post/*", this.setPost);
+  route.start(true);
+});
+
+function loaduser() {
+  /* https://api.github.com/users/${self.username}/repos?sort=updated&direction=desc */
+  axios.get(`/blog/projects`)
+    .then(function(resp) {
+      self.state.projects = Z.fromList(resp.data);
+      self.state.loaded = true;
+      if (!self.active.posts) {
+        self.active.projects = true;
+      }
+      self.update();
+    });
+}
+
+this.on("mount", loaduser);
+
+</script>
+</app>

src/scripts/column.tag

@@ -0,0 +1,5 @@
+<column>
+  <div class={"column " + this.opts.width}>
+    <yield/>
+  </div>
+</column>

src/scripts/editor.tag

@@ -65,7 +65,7 @@ echo(ev) {
     });
 }
 
-var self = this;
+var self = this; /* Why do we need this??????????? */
 
 submit() {
   var post = {

src/scripts/grid.js

@@ -0,0 +1,15 @@
+import './grid.tag';
+import './row.tag';
+import './column.tag';
+import { default as R } from 'ramda';
+
+function chunk(n, xs) {
+  /* Chunk a list into groups of n size */
+  return R.unfold(
+    (xs) => {
+      if (R.length(xs) > 0) {
+        return [{"row" : R.take(n, xs)}, R.drop(n, xs)];
+      }
+      return false;
+    }, xs);
+}

src/scripts/grid.tag

@@ -0,0 +1,5 @@
+<grid>
+  <div class="container">
+    <yield/>
+  </div>
+</grid>

src/scripts/loading.tag

@@ -0,0 +1,3 @@
+<loading>
+  <div class="loading"></div>
+</loading>

src/scripts/post-content.tag

@@ -0,0 +1,7 @@
+<post-content>
+  <h4>{ this.opts.title }</h4>
+  <h5>Posted by { this.opts.author }</h5>
+  <p class="post-content centered text-break">
+    { this.opts.content }
+  </p>
+</post-content>

src/scripts/post.tag

@@ -1,22 +1,10 @@
 <post>
-  <div class="postnav centered">
-    <button class={"btn btn-primary " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading}
-            onclick={this.prev}
-    >
-      Last One
-    </button>
-    <button class={"btn btn-primary " + (this.nomore ? "disabled" : " ") + this.nextloading}
-            onclick={this.next}
-    >
-      Next One
-    </button>
-  </div>
-
-  <h4 class="post centered" if={this.nomore}>
+  <h4 class="content-box centered" if={this.nomore}>
     No More Posts!
   </h4>
-  <div if={!(this.loading || this.nomore)}
-       class="post centered"
+  <div
+    if={!(this.loading || this.nomore)}
+    class="content-box post centered"
   >
     <h4>{ this.title }</h4>
     <h5>Posted by { this.author }</h5>
@@ -25,11 +13,28 @@
     </p>
     <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}
+        >
+          <i class="fa fa-arrow-right" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
 <script>
 
 import 'whatwg-fetch';
-import route from 'riot-route'
 import { default as R } from 'ramda';
 
 var self = this;
@@ -55,9 +60,9 @@ prev(ev) {
   }
   if (self.pid > 1) {
     self.pid--;
-    route(`/post/${self.pid}`);
     self.update();
   }
+  self.setPost(self.pid);
 }
 
 next(ev) {
@@ -68,13 +73,12 @@ next(ev) {
   self.nextloading = " loading";
   if (!self.nomore) {
     self.pid++;
-    route(`/post/${self.pid}`);
     self.update();
   }
+  self.setPost(self.pid);
 }
 
 setPost(pid) {
-  console.log(pid);
   this.pid = pid;
   this.update();
   this.loading = true;
@@ -88,7 +92,6 @@ setPost(pid) {
         }
         else {
           var postcontent = JSON.parse(body);
-          console.log(postcontent);
           if (postcontent.length == 0) {
             self.loading = false;
             self.prevloading = "";
@@ -112,12 +115,8 @@ setPost(pid) {
         self.update();
       });
 }
-this.on("mount", () => {
-  route("/", () => { route("/post/1") });
-  route("/post/*", this.setPost);
-  console.log("starting the router");
-  route.start(true);
-});
+
+this.setPost(this.opts.pid);
 
 </script>
 </post>

src/scripts/postsview.tag

@@ -0,0 +1,5 @@
+<postsview>
+  <posts>
+    <post pid={1}></post>
+  </posts>
+</postsview>

src/scripts/projects.tag

@@ -0,0 +1,99 @@
+<projects>
+    <div class="content-box">
+      <h3>Projects for { this.username }</h3>
+      <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>
+          </div>
+          <div class="card-body">
+            <a
+              target="_blank"
+              href={this.project().html_url}>
+              See on github
+            </a>
+            <p>{ this.project().description }</p>
+            <p>{ this.project().language }</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controls container">
+      <div class="columns">
+        <div class="column col-6">
+          <button
+            onclick={this.prev}
+            class="btn btn-lg nav-button float-right"
+          >
+            <i class="fa fa-arrow-left" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="column col-6">
+          <button
+            onclick={this.next}
+            class="btn btn-lg nav-button float-left"
+          >
+            <i class="fa fa-arrow-right" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+<script>
+import Z from './zipper.js';
+
+var cycle_timeout = 12;
+
+this.username = "Wes";
+
+var self = this;
+
+self.transition = "";
+self.swipe = true;
+
+var empty_project = {
+  "name" : "",
+  "html_url": "",
+  "description" : "",
+  "language": ""
+};
+
+project() {
+  return Z.focus(self.opts.state.projects, empty_project);
+}
+
+next() {
+  self.update({"swipe" : false});
+  self.opts.state.projects = Z.goRight(self.opts.state.projects);
+  self.update(
+    {
+      "transition" : "fadeInRight",
+      "swipe" : true
+    }
+  );
+}
+
+prev() {
+  self.update({"swipe" : false});
+  self.opts.state.projects = Z.goLeft(self.opts.state.projects);
+  self.update(
+    {
+      "transition" : "fadeInLeft",
+      "swipe" : true
+    }
+  );
+}
+
+function loopProjects() {
+  if (self.opts.state.projects) {
+    self.next();
+  }
+  window.setTimeout(loopProjects, cycle_timeout*1000);
+}
+
+/* window.setTimeout(loopProjects, cycle_timeout*1000); */
+
+</script>
+</projects>

src/scripts/projectsview.tag

@@ -0,0 +1,3 @@
+<projectsview>
+  <projects state={this.opts.state}></projects>
+</projectsview>

src/scripts/riotblog.js

@@ -3,7 +3,11 @@ import './bbutton.tag';
 import './post.tag';
 import './posts.tag';
 import './editor.tag';
+import './projects.tag';
+import './app.tag';
+import './grid.js';
 
+riot.mount("app");
 riot.mount("editor");
 riot.mount("post",
   {
@@ -12,3 +16,4 @@ riot.mount("post",
 
 riot.mount("decision");
 riot.mount("bbutton");
+riot.mount("projects");

src/scripts/row.tag

@@ -0,0 +1,5 @@
+<row>
+  <div class="columns">
+    <yield/>
+  </div>
+</row>

src/scripts/zipper.js

@@ -0,0 +1,55 @@
+import im from 'immutable';
+
+function Zipper(left, right) {
+  return {
+    "left" : left,
+    "right" : right
+  };
+}
+
+function fromList(xs) {
+  return Zipper(im.Stack(), im.Stack(xs));
+}
+
+function focus(z, def_val) {
+  var head = z.right.first();
+  if (head) {
+    return head;
+  }
+  return def_val;
+}
+
+function reset(z) {
+  return Zipper(im.Stack(), z.left.reverse().concat(z.right));
+}
+
+function swap(z) {
+  return Zipper(im.Stack(z.right.reverse().shift()), im.Stack([z.right.last()]));
+}
+
+function goRight(z) {
+  if (z.right.size == 1) {
+    return reset(z);
+  }
+  return Zipper(z.left.unshift(z.right.first()),
+                z.right.shift());
+}
+
+function goLeft(z) {
+  if (z.left.size == 0) {
+    return swap(z);
+  }
+  return Zipper(z.left.shift(),
+                z.right.unshift(z.left.first()));
+}
+
+var empty = fromList([]);
+
+export default {
+  "Zipper" : fromList,
+  "focus" : focus,
+  "goRight" : goRight,
+  "goLeft" : goLeft,
+  "empty" : empty,
+  "fromList" : fromList
+};

src/styles/projects.scss

@@ -0,0 +1,25 @@
+.projects {
+  margin: 0 auto !important;
+}
+
+.center {
+  margin: 0 auto !important;
+}
+
+.title {
+  margin: 0 auto !important;
+}
+
+.gh-username {
+  margin: 0 auto !important;
+  max-width: 75%;
+}
+
+.controls {
+  margin: 0 auto !important;
+}
+
+.nav-button {
+  margin: 0 auto;
+  display: block;
+}

src/styles/riotblog.scss

@@ -2,6 +2,29 @@
   text-align: center;
 }
 
+.navigate {
+  margin: auto;
+  width: 70%;
+}
+
+.content-box {
+  height: 350px !important;
+}
+
+.content {
+  margin: auto;
+  max-width: 40%;
+  @media (max-width: 1000px) {
+    max-width: 60%;
+  }
+  @media (max-width: 800px) {
+    max-width: 70%;
+  }
+  @media (max-width: 400px) {
+    max-width: 80%;
+  }
+}
+
 .post-content {
   max-width: 50%;
   text-align: justify;

src/templates/index.html

@@ -1,21 +1,26 @@
 <!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">
+</head>
 <header class="text-center nav navbar">
   <section class="centered page-top navbar-section">
-    <h1 class="blog-title">yes</h1>
+    <h1 class="blog-title">WK</h1>
   </section>
 </header>
 
 <html>
   <body>
-    <posts>
-      <post></post>
-    </posts>
+    <app></app>
     <footer class="footer">
     </footer>
 
-  <link rel="stylesheet" href="/blog/styles/spectre.min.css">
-  <link rel="stylesheet" href="/blog/styles/riotblog.min.css">
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
   </body>
 </html>

src/templates/projects.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<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">
+</head>
+<header class="text-center nav navbar">
+  <section class="centered page-top navbar-section">
+    <h1 class="blog-title">hmmm</h1>
+  </section>
+</header>
+
+<html>
+  <body>
+    <projects>
+    </projects>
+    <footer class="footer">
+    </footer>
+
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
+  </body>
+</html>

src/website.py

@@ -13,7 +13,9 @@ 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()
 
@@ -32,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"
@@ -41,6 +42,14 @@ 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")