performance improvements

src/scripts/app.tag

@@ -27,12 +27,12 @@
         class="mobile-menu tab tab-block menu">
         <li
           each="{page in ['posts', 'projects', 'links', 'about']}"
-          class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+          class={"navigate-tab tab-item animated fadeIn " + (parent.active.get(page) ? "active" : "")}
           data-is="navtab"
-          active={this.parent.active.get(page)}
-          to={this.parent.to(page)}
+          active={parent.active.get(page)}
+          to={parent.to(page)}
           title={page}
-          onclick={this.parent.menuOff}
+          onclick={parent.menuOff}
         >
         </li>
       </ul>
@@ -41,20 +41,20 @@
     <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
       <li
         each="{page in ['posts', 'projects', 'links', 'about']}"
-        class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
+        class={"navigate-tab tab-item animated fadeIn " + (parent.active.get(page) ? "active" : "")}
         data-is="navtab"
-        active={this.parent.active.get(page)}
-        to={this.parent.to(page)}
+        active={parent.active.get(page)}
+        to={parent.to(page)}
         title={page}
       >
       </li>
     </ul>
     <div class="projects-content">
-      <loading if={!this.state.loaded}></loading>
+      <loading if={!state.loaded}></loading>
       <projectsview
         class="animated fadeInDown"
-        if={this.active.get("projects") && this.state.loaded}
-        state={this.state}
+        if={active.get("projects") && state.loaded}
+        state={state}
         ref="projectsview"
       >
       </projectsview>
@@ -62,20 +62,20 @@
 
     <div class="content">
       <postsview
-        cached={this.cached}
-        state={this.state}
-        if={this.active.get("posts")}
+        cached={cached}
+        state={state}
+        if={active.get("posts")}
         ref="postsview"
       >
       </postsview>
       <about
-        if={this.active.get("about")}
+        if={active.get("about")}
       >
       </about>
       <links
-        cached={this.cached}
-        state={this.state}
-        if={this.active.get("links")}
+        cached={cached}
+        state={state}
+        if={active.get("links")}
       >
       </links>
     </div>
@@ -90,6 +90,7 @@ import './links.tag';
 import './loading.tag';
 
 import fetchCached from 'fetch-cached';
+import 'whatwg-fetch';
 import Z from './zipper.js';
 import pathEq from 'ramda/src/pathEq';
 import route from 'riot-route';
@@ -189,7 +190,6 @@ var about = activate("about");
 var links = activate("links");
 
 function posts(_id) {
-  console.log(self.state);
   if (self.state._id != _id) {
     self.state._id = _id;
   }
@@ -216,7 +216,7 @@ self.route("projects", projects);
 self.route("about", about);
 self.route("links", links);
 
-self.on("mount", () => {
+self.one("updated", () => {
   route.start(true);
 });
 

src/scripts/post.tag

@@ -63,7 +63,10 @@ self.prevloading = "";
 self.nextloading = "";
 self.content = "";
 self.swipe = false;
-self.loading = self.opts.state.loaded;
+
+self.on("mount", () => {
+  self.loading = self.opts.state.loaded;
+});
 
 RiotControl.on("filtercategory",
   (ev) => {
@@ -183,7 +186,9 @@ getPost(_id) {
   .then((resp) => { self.updatePost(JSON.parse(resp)) })
 }
 
-self.getPost(self.opts.state._id);
+self.on("mount", () => {
+  self.getPost(self.opts.state._id);
+});
 
 </script>
 </post>

src/scripts/postsview.tag

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

src/scripts/riotblog.js

@@ -10,18 +10,20 @@ import { default as promise } from 'es6-promise';
 import { default as smooth } from 'smoothscroll-polyfill';
 import 'element-closest';
 
-promise.Promise.polyfill();
-smooth.polyfill();
+window.addEventListener("load", () => {
 
-window.RiotControl = RiotControl;
+  promise.Promise.polyfill();
+  smooth.polyfill();
 
-RiotControl.addStore(new riot.observable());
+  window.RiotControl = RiotControl;
 
-riot.mount("app");
-riot.mount("post",
-  {
-    "creator" : "author"
-  });
+  RiotControl.addStore(new riot.observable());
+  riot.mount("app");
+  riot.mount("post",
+    {
+      "creator" : "author"
+    });
 
-riot.mount("bbutton");
-riot.mount("projects");
+  riot.mount("bbutton");
+  riot.mount("projects");
+});

src/styles/riotblog.scss

@@ -62,6 +62,7 @@ $navbarHeight: 100px;
   border: none;
   color: black !important;
 	text-decoration: none;
+  text-transform: capitalize;
   &:hover {
     background-color: $brandingBG !important;
   }

src/templates/index.html

@@ -1,14 +1,12 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <head>
-  <link rel="stylesheet" href="/styles/primop.me.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">
   <meta name="fragment" content="!">
 </head>
 <html>
   <body>
-    <app csrf_token="{{ csrf_token() }}"></app>
+    <div data-is="app" csrf_token="{{ csrf_token() }}"></div>
   </body>
   <footer>
     <script>
@@ -18,9 +16,9 @@
       if (d.getElementById(id)) return t;
       js = d.createElement(s);
       js.id = id;
+      js.async = true;
       js.src = "https://platform.twitter.com/widgets.js";
       fjs.parentNode.insertBefore(js, fjs);
-
       t._e = [];
       t.ready = function(f) {
         t._e.push(f);
@@ -29,15 +27,34 @@
       return t;
     }(document, "script", "twitter-wjs"));
     </script>
+
     <div id="fb-root"></div>
+
     <script>(function(d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); js.id = id;
+      js.async = true;
       js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
     </script>
-    <script type="text/javascript" src="/scripts/riotblog.min.js"></script>
+
+    <script type="text/javascript">
+      (function() {
+        function loadCSS(href) {
+          var css = document.createElement('link');
+          css.href = href;
+          css.rel = 'stylesheet';
+          css.type = 'text/css';
+          document.getElementsByTagName('head')[0].appendChild(css);
+        }
+        var hrefs = ['/styles/primop.me.min.css', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'];
+        for (var i = 0, l = hrefs.length; i < l; i++) {
+          loadCSS(hrefs[i]);
+        }
+      })();
+    </script>
+    <script async type="text/javascript" src="/scripts/riotblog.min.js"></script>
   </footer>
 </html>

src/website.py

@@ -170,6 +170,12 @@ def NeverWhere(configfile=None):
 
 app = NeverWhere()
 
+@app.teardown_appcontext
+def teardown_couchdb(exception):
+    posts = getattr(g, 'posts', None)
+    if posts is not None:
+        del posts.db
+
 posts = LocalProxy(get_posts)
 
 login_manager.init_app(app)
@@ -179,4 +185,4 @@ csrf = CSRFProtect()
 csrf.init_app(app)
 
 if __name__ == "__main__":
-    NeverWhere("./appconfig").run(host="localhost", port=8001, debug=True)
+    NeverWhere().run(host="localhost", port=8001, debug=True)