From 66607c833aac3ef3ce1d20eac453f611ef0bf35b Mon Sep 17 00:00:00 2001
From: wes <wjak56@gmail.com>
Date: Thu, 6 Jul 2017 17:57:23 -0400
Subject: [PATCH] fix up post routing

---
 src/scripts/;            | 140 +++++++++++++++++++++++++++++++++++++++
 src/scripts/about.tag    |   7 ++
 src/scripts/app.tag      |  86 ++++++++++++++----------
 src/scripts/lenses.js    |  21 ++++++
 src/scripts/links.tag    |   3 +
 src/scripts/navtab.tag   |   9 +++
 src/scripts/projects.tag |  44 +++++++++---
 src/styles/riotblog.scss |  16 ++++-
 8 files changed, 279 insertions(+), 47 deletions(-)
 create mode 100644 src/scripts/;
 create mode 100644 src/scripts/about.tag
 create mode 100644 src/scripts/lenses.js
 create mode 100644 src/scripts/links.tag
 create mode 100644 src/scripts/navtab.tag

diff --git a/src/scripts/; b/src/scripts/;
new file mode 100644
index 0000000..ab36132
--- /dev/null
+++ b/src/scripts/;
@@ -0,0 +1,140 @@
+<app>
+  <ul class="navigate tab tab-block">
+    <li
+      class={"navigate-tab tab-item animated fadeIn " + (this.active.posts ? "active" : "")}
+      data-is="navtab"
+      active={ this.active.posts }
+      to={this.to("posts")}
+      title="Posts"
+    >
+    </li>
+    <li
+      class={"navigate-tab tab-item animated fadeIn " + (this.active.projects ? "active" : "")}
+      data-is="navtab"
+      active={ this.active.projects }
+      to={this.to("projects")}
+      title="Projects"
+    >
+    </li>
+    <li
+      class={"navigate-tab tab-item animated fadeIn " + (this.active.links ? "active" : "")}
+      data-is="navtab"
+      active={ this.active.links }
+      to={this.to("links")}
+      title="Links"
+    >
+    </li>
+    <li
+      class={"navigate-tab tab-item animated fadeIn " + (this.active.about ? "active" : "")}
+      data-is="navtab"
+      active={ this.active.about }
+      to={this.to("about")}
+      title="About"
+    >
+    </li>
+  </ul>
+  <div class="projects-content">
+    <loading if={!this.state.loaded}></loading>
+    <projectsview
+      class="animated fadeInDown"
+      if={this.active.projects && this.state.loaded}
+      state={this.state}
+      ref="projectsview"
+    >
+    </projectsview>
+  </div>
+  <div class="content">
+    <postsview
+      state={this.state}
+      if={this.active.posts}
+      ref="postsview"
+    >
+    </postsview>
+  </div>
+<script>
+import './navtab.tag';
+import './projectsview.tag';
+import './postsview.tag';
+import './loading.tag';
+
+import Z from './zipper.js';
+import {default as R} from 'ramda';
+import route from 'riot-route';
+import lens from './lenses.js';
+
+this.R = R;
+this.route = route;
+this.riot = riot;
+
+this.state = {
+  "pid" : 1,
+  "projects" : Z.empty,
+  "loaded" : false
+};
+
+this.active = {
+  "projects" : false,
+  "posts" : false,
+  "links" : false,
+  "about" : false
+};
+
+var self = this;
+
+function activate(page) {
+  return function() {
+    console.log(`trying to activate ${page}`);
+    self.active = lens.setActive(lens.actives(self.active), page).toJS();
+    self.update();
+  };
+}
+
+self.projects = activate("projects");
+self.about = activate("about");
+self.links = activate("links");
+
+self.posts = function(pid) {
+  self.state.pid = parseInt(pid, 10);
+  activate("posts")();
+  self.update();
+}
+
+to(name) {
+  return (function(e) {
+    /* This may or may not be used as an event handler */
+    if (e !== undefined) {
+      e.preventDefault();
+    }
+    this.route(name);
+    return;
+  }).bind(this);
+}
+
+this.route("posts", self.to(`posts/${self.state.pid}`));
+this.route("posts/*", self.posts);
+this.route("/", self.to("posts"));
+this.route("projects", self.projects);
+this.route("about", self.about);
+this.route("links", self.links);
+
+this.on("mount", () => {
+  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.filter(
+                                R.pathEq(["fork"], false)));
+
+      self.state.loaded = true;
+      self.update();
+    });
+}
+
+this.on("mount", loaduser);
+
+</script>
+</app>
diff --git a/src/scripts/about.tag b/src/scripts/about.tag
new file mode 100644
index 0000000..0694ed9
--- /dev/null
+++ b/src/scripts/about.tag
@@ -0,0 +1,7 @@
+<about>
+  <div class="post centered">
+    <p class="post-content">
+      I'm a software developer who builds web and mobile apps. I enjoy functional programming, compilers, machine learning, and building apps that allow for more decentralized communication. This blog covers my thoughts on everything from computer science, psychology, philosophy, economics, and linguistics.
+    </p>
+  </div>
+</about>
diff --git a/src/scripts/app.tag b/src/scripts/app.tag
index 6e1e92a..f0850f9 100644
--- a/src/scripts/app.tag
+++ b/src/scripts/app.tag
@@ -1,29 +1,20 @@
 <app>
   <ul class="navigate tab tab-block">
-    <li class={"navigate-tab tab-item " + (this.active.posts ? "active" : "")}>
-      <a
-        class={"navigate-item " + (this.active.posts ? "tab-active" : "")}
-        onclick={to(`posts/${this.state.pid}`)}
-        href="#"
-      >
-        Posts
-      </a>
-    </li>
-    <li class={"navigate-tab tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
-      <a
-        class={"navigate-item " + (this.active.projects ? "tab-active" : "")}
-        onclick={to("projects")}
-        href="#"
-      >
-        Projects
-      </a>
+    <li
+      each="{page in ['posts', 'projects', 'links', 'about']}"
+      class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+      data-is="navtab"
+      active={this.parent.active.get(page)}
+      to={this.parent.to(page)}
+      title={page}
+    >
     </li>
   </ul>
   <div class="projects-content">
     <loading if={!this.state.loaded}></loading>
     <projectsview
       class="animated fadeInDown"
-      if={this.active.projects && this.state.loaded}
+      if={this.active.get("projects") && this.state.loaded}
       state={this.state}
       ref="projectsview"
     >
@@ -32,18 +23,33 @@
   <div class="content">
     <postsview
       state={this.state}
-      if={this.active.posts}
+      if={this.active.get("posts")}
       ref="postsview"
     >
     </postsview>
+    <about
+      if={this.active.get("about")}
+    >
+    </about>
+    <links
+      if={this.active.get("links")}
+    >
+    </links>
   </div>
 <script>
+import './navtab.tag';
 import './projectsview.tag';
 import './postsview.tag';
+import './about.tag';
+import './links.tag';
 import './loading.tag';
-import Z from './zipper.js';
 
+import Z from './zipper.js';
+import {default as R} from 'ramda';
 import route from 'riot-route';
+import lens from './lenses.js';
+
+this.R = R;
 this.route = route;
 this.riot = riot;
 
@@ -53,23 +59,31 @@ this.state = {
   "loaded" : false
 };
 
-this.active = {
+this.active = lens.actives({
   "projects" : false,
-  "posts" : false
-};
+  "posts" : false,
+  "links" : false,
+  "about" : false
+});
 
 var self = this;
 
-function projects() {
-  self.active.projects = true;
-  self.active.posts = false;
-  self.update();
+function activate(page) {
+  return function() {
+    console.log(`activating ${page}`);
+    self.active = lens.setActive(self.active, page);
+    self.update();
+  };
 }
 
+var projects = activate("projects");
+var about = activate("about");
+var links = activate("links");
+
 function posts(pid) {
-  self.active.posts = true;
+  console.log(self.state);
   self.state.pid = parseInt(pid, 10);
-  self.active.projects = false;
+  activate("posts")();
   self.update();
 }
 
@@ -84,24 +98,24 @@ to(name) {
   }).bind(this);
 }
 
-this.route("posts", self.to(`posts/${self.state.pid}`));
 this.route("posts/*", posts);
-this.route("/", self.to("posts"));
+this.route("posts", (() => {posts(self.state.pid)}));
 this.route("projects", projects);
+this.route("about", about);
+this.route("links", links);
 
 this.on("mount", () => {
   route.start(true);
 });
 
-function notFork(p) {
-  return !p.fork;
-}
-
 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.filter(notFork));
+      self.state.projects = Z.fromList(
+                              resp.data.filter(
+                                R.pathEq(["fork"], false)));
+
       self.state.loaded = true;
       self.update();
     });
diff --git a/src/scripts/lenses.js b/src/scripts/lenses.js
new file mode 100644
index 0000000..f547d20
--- /dev/null
+++ b/src/scripts/lenses.js
@@ -0,0 +1,21 @@
+import R from 'ramda';
+import I from 'immutable';
+
+function actives(m) {
+  return I.Map(m);
+}
+
+function setActive(m, page) {
+  return m.mapEntries(
+    (kv) => {
+      if (kv[0] == page) {
+        return [kv[0], true];
+      }
+      return [kv[0], false];
+    });
+}
+
+export default {
+  "actives" : actives,
+  "setActive" : setActive
+};
diff --git a/src/scripts/links.tag b/src/scripts/links.tag
new file mode 100644
index 0000000..ffd29c0
--- /dev/null
+++ b/src/scripts/links.tag
@@ -0,0 +1,3 @@
+<links>
+
+</links>
diff --git a/src/scripts/navtab.tag b/src/scripts/navtab.tag
new file mode 100644
index 0000000..6277137
--- /dev/null
+++ b/src/scripts/navtab.tag
@@ -0,0 +1,9 @@
+<navtab>
+    <a
+      class={"navigate-item " + (this.opts.active ? "tab-active" : "")}
+      onclick={this.opts.to}
+      href="#"
+    >
+      { this.opts.title }
+    </a>
+</navtab>
diff --git a/src/scripts/projects.tag b/src/scripts/projects.tag
index c24036a..2552726 100644
--- a/src/scripts/projects.tag
+++ b/src/scripts/projects.tag
@@ -1,20 +1,37 @@
 <projects>
     <div class="projects-box">
-      <h3>My Projects</h3>
+      <div class="columns">
+        <div class="column col-8">
+          <h3 class="float-right">My Projects</h3>
+        </div>
+        <div class="column col-4">
+          <figure
+            if={this.avatar_url}
+            class="float-left avatar avatar-lg"
+          >
+            <img src={this.avatar_url}></img>
+          </figure>
+        </div>
+      </div>
+
       <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>
+            <h4 class="card-title post-title">{ this.project().name }</h4>
+            <h6 class="post-author">{ this.project().description }</h6>
           </div>
           <div class="card-body">
-            <a
-              target="_blank"
-              href={this.project().html_url}>
-              See on github
-            </a>
-            <p>{ this.project().description }</p>
-            <p>Written primarily in { this.project().language }</p>
-            <p>Started on { moment(this.project().created_at).format("MMMM Do YYYY") }</p>
+              <a
+                target="_blank"
+                href={this.project().html_url}>
+                <button class="btn btn-small">
+                    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>
@@ -47,6 +64,7 @@ import moment from 'moment';
 var cycle_timeout = 12;
 
 this.username = "Wes";
+this.avatar_url = "";
 
 var self = this;
 
@@ -54,6 +72,12 @@ self.transition = "";
 self.swipe = true;
 self.moment = moment;
 
+this.on("mount",
+  function() {
+    self.avatar_url = self.project().owner.avatar_url;
+    self.update();
+  });
+
 var empty_project = {
   "name" : "",
   "html_url": "",
diff --git a/src/styles/riotblog.scss b/src/styles/riotblog.scss
index a36098c..f561b4d 100644
--- a/src/styles/riotblog.scss
+++ b/src/styles/riotblog.scss
@@ -59,6 +59,10 @@ a {
   border: 1px;
 }
 
+p, h6, h4 {
+	font-family: 'Open Sans',sans-serif !important;
+}
+
 .post-title {
 	font-family: 'Open Sans',sans-serif;
 	font-size: 1.6em;
@@ -107,7 +111,7 @@ a {
 
 .projects-box {
   @extend .content-box;
-  height: 350px !important;
+  height: 400px !important;
 }
 
 .posts-box {
@@ -153,6 +157,16 @@ a {
   text-align: left;
 }
 
+.project-content {
+  margin-top: 5px;
+  max-width: 100%;
+	font-family: 'Open Sans',sans-serif;
+	font-size: 1.0em;
+	line-height: 1.6em;
+	color: #3A4145;
+  text-align: left;
+}
+
 .rounded-button {
   border-radius: 13px;
 }