implement links

src/posts.py

@@ -77,6 +77,12 @@ class Posts:
 
         return jsonify(posts)
 
+    def links(self):
+        result = list(self.db.iterview("blogPosts/links", 1, include_docs=True))
+        if len(result) >= 1:
+            return jsonify(result[0].doc.get("links", []))
+        return []
+
     def delete(self, _id):
         doc = self.db[_id]
         try:

src/scripts/about.tag

@@ -1,5 +1,5 @@
 <about>
-  <div class="post centered">
+  <div class="post centered animated fadeIn">
     <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>

src/scripts/app.tag

@@ -52,6 +52,7 @@
     >
     </about>
     <links
+      state={this.state}
       if={this.active.get("links")}
     >
     </links>

src/scripts/links.tag

@@ -1,3 +1,65 @@
 <links>
+  <div class="links-content container animated fadeIn">
+    <loading if={this.loading && this.opts.state.loaded}></loading>
+    <div class="columns">
+      <div class="column col-12">
+        <h3 class="text-center">
+          Interesting Links
+        </h3>
+      </div>
+    </div>
+    <div class="columns">
+      <div each={links in groups} class="column col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4">
+        <h5 class="text-center">{links.title}</h5>
+        <div each={item in links.items} class="tile link-box">
+          <div class="tile-icon">
 
+            <div class="example-tile-icon">
+              <i class="icon icon-file centered"></i>
+            </div>
+          </div>
+
+          <div class="tile-content">
+            <p class="tile-title">{ item.title }</p>
+            <p class="tile-subtitle">{ item.sub }</p>
+          </div>
+
+          <div class="tile-action">
+            <a target="_blank" href={ item.href }>
+              <button class="btn btn-primary">
+                Link
+              </button>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+<script>
+import route from 'riot-route';
+import lens from './lenses.js';
+
+var self = this;
+
+self.loading = false;
+
+self.groups = []
+
+getLinks() {
+  self.update({"loading" : true});
+  fetch(`/blog/links/`)
+  .then((resp) => resp.text())
+  .then((resp) => {
+    self.update(
+    {
+      "groups" : JSON.parse(resp),
+      "loading" : false
+    });
+  })
+}
+
+self.on("mount", self.getLinks);
+
+</script>
 </links>

src/scripts/post.tag

@@ -156,7 +156,6 @@ prevPost(_id) {
   fetch(`/blog/prevpost/${_id.slice(-hashLength)}`)
   .then((resp) => resp.text())
   .then((resp) => {
-    var content = JSON.parse(resp);
     self.updatePost(JSON.parse(resp))
   })
 }

src/styles/riotblog.scss

@@ -7,6 +7,12 @@ $menuWidth: 60px;
 
 .twitter-share-button-rendered {
   font-size: 1.5em;
+  margin: 2px;
+}
+
+.fb-share-button {
+  font-size: 1.5em;
+  margin: 2px;
 }
 
 .social-wrapper {
@@ -111,6 +117,12 @@ p, h6, h4 {
 	color: #3A4145 !important;
 }
 
+.links-navigate {
+  width: 100%;
+  margin-bottom: 25px !important;
+  margin: auto !important;
+}
+
 .navigate {
   width: 20%;
   margin-bottom: 25px !important;
@@ -222,7 +234,7 @@ code {
 
 .projects-content {
   margin: auto;
-  max-width: 22%;
+  max-width: 25%;
   @media (max-width: 1000px) {
     max-width: 60%;
   }
@@ -234,6 +246,17 @@ code {
   }
 }
 
+.links-content {
+  margin-top: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 95%;
+}
+
+.link-box {
+  margin: 5px;
+}
+
 .post-content {
   text-indent: 6mm;
   max-width: 100%;

src/website.py

@@ -147,6 +147,13 @@ def NeverWhere(configfile=None):
 
         return posts.savepost(**post)
 
+    @app.route("/blog/links/", methods=("GET",))
+    def links():
+        """
+        Get links
+        """
+        return posts.links()
+
     return app
 
 app = NeverWhere()