fix bugs

.gitignore

@@ -1,6 +1,9 @@
+*.sw*
 *.pyc
-*.log
+.vim-session
-*.scssc
+*~
-*.swp
+venv
-*.bak
+build
-*venv*
+node_modules
+.sass_cache/*
+deploy.sh

;

@@ -1,59 +0,0 @@
-from __future__ import with_statement
-from fabric.api import *
-from fabric.contrib.console import confirm
-from fabric.contrib.project import rsync_project
-import fabric.operations as op
-
-env.hosts = ["wes@mgoal.ca:444"]
-
-@task
-def buildTags():
-    with lcd("./build"):
-        local("riot ../src/tags scripts/tags.min.js")
-
-@task
-def buildScss():
-    with lcd("./build"):
-        local("sassc ../src/styles/riotblog.scss > styles/riotblog.min.css")
-
-@task
-def minifyJS():
-    with lcd("./build"):
-        local("uglifyjs ../src/scripts/riotblog.js > scripts/riotblog.min.js")
-
-@task
-def buildVenv():
-    local("virtualenv -p $(which python3) ./venv")
-    with prefix("source ./venv/bin/activate"):
-        local("pip3 install -r requirements.txt")
-    local("mv venv ./build/")
-
-@task
-def copyFiles():
-    local("cp ./{blog.ini,blog.service} ./build/")
-    local("cp ./src/*py ./build/")
-    local("cp ./src/styles/*.css ./build/styles/")
-    local("cp -r ./src/templates ./build/templates")
-
-@task
-def upload():
-    run("mkdir -p ~/build")
-    rsync_project(local_dir="./build/", remote_dir="~/build/", delete=True, exclude=[".git"])
-
-@task
-def serveUp():
-    sudo("cp -r /home/wes/build /srv/riotblog")
-    sudo("cp /home/wes/build/blog.service /etc/systemd/system/blog.service")
-    sudo("systemctl enable blog.service")
-
-@task(default=True)
-def build():
-    local("rm -r ./build")
-    local("mkdir -p build/{scripts,styles}")
-    buildTags()
-    buildScss()
-    minifyJS()
-    buildVenv()
-    copyFiles()
-    upload()
-    serveUp()

build/posts.py

@@ -22,3 +22,9 @@ class Posts:
                 "author" : author
                 }
         return jsonify(self.db.save(doc))
+
+    def getposts(self, start, end):
+        return jsonify([])
+
+    def getcomments(self, postID):
+        return jsonify([])

build/scripts/tags.min.js

@@ -1,154 +0,0 @@
-riot.tag2('bbutton', '<button class="btn rounded-button"> </button>', '', '', function(opts) {
-});
-
-riot.tag2('comment', '<div class="comment centered"> <div class="card"> <div class="card-header"> <h4 class="card-title">{title} by {author}</h4> </div> <div class="card-body comment-body"> {R.join(⁗ ⁗)(R.repeat(text, 20))} </div> </div> </div>', '', '', function(opts) {
-});
-
-riot.tag2('comments', '<div if="{loading}" class="loading comments-loader"> </div> <comment if="{!loading}" each="{comments}" data="{this}"></comment> <textarea onfocus="{clearplaceholder}" onblur="{checkplaceholder}" oninput="{echo}" __disabled="{disabled}" class="{⁗form-input comments centered ⁗ + maxed}" name="textarea" rows="10" cols="50" maxlength="{maxlength}"> {placeholder} </textarea> <div if="{warn}" class="toast toast-danger maxwarn centered"> <button onclick="{closewarning}" class="btn btn-clear float-right"> </button> You\'ve reached the max comment size </div>', '', '', function(opts) {
-
-comments = [];
-maxlength = 700;
-
-placeholder = "Comment here!";
-focused = false;
-maxed = false;
-warn = false;
-disabled = "";
-loading = true;
-
-this.clearplaceholder = function() {
-  if (!this.focused) {
-    this.update({
-      "placeholder" : "",
-      "focused"     : true
-      })
-  }
-}.bind(this)
-
-this.checkplaceholder = function() {
-  if (this.textarea.value.trim().length == 0) {
-    this.update({
-      "placeholder" : "Comment here!",
-      "focused"     : false
-    });
-  }
-}.bind(this)
-
-this.closewarning = function() {
-  this.update({"warn" : false});
-}.bind(this)
-
-this.echo = function(ev) {
-  if (this.textarea.value.length >= maxlength) {
-    this.update({
-      "maxed" : "maxinput",
-      "warn"  : true
-    });
-  }
-  else {
-    this.update({
-      "maxed" : false,
-      "warn"  : false
-    });
-    window.setTimeout(this.closewarning, 5000);
-  }
-}.bind(this)
-
-var self = this;
-
-this.getComments = function(pid) {
-  fetch("/blog/comments/"+pid)
-    .then(
-      function(resp) {
-        return resp.text();
-      })
-    .then(
-      function(body) {
-        self.update(
-          {
-            "comments" : JSON.parse(body),
-            "loading"  : false
-          });
-      });
-}.bind(this)
-
-this.on("mount",
-  function() {
-    this.getComments(self.opts.pid);
-  });
-
-});
-
-riot.tag2('post', '<div class="postnav centered"> <button class="{⁗btn btn-primary ⁗ + (this.pid <= 1 ? ⁗disabled⁗ : ⁗ ⁗) + this.prevloading}" onclick="{prev}">Last One</button> <button class="{⁗btn btn-primary ⁗ + (this.nomore ? ⁗disabled⁗ : ⁗ ⁗) + this.nextloading}" onclick="{next}">Next One</button> </div> <h4 class="post centered" if="{nomore}"> No More Posts! </h4> <div if="{!(loading || nomore)}" class="post centered"> <h4>{opts.title}</h4> <h5>By {opts.creator}</h5> <p class="post-content centered text-break">{content}</p> <div class="divider"></div> <comments pid="{pid}"> </comments> </div>', '', '', function(opts) {
-var self = this;
-
-this.loading = false;
-this.prevloading = "";
-this.nextloading = "";
-
-this.nomore = false
-this.pid = 1;
-content = "";
-
-this.prev = function() {
-  if (self.prevloading || self.nextloading) {
-    return;
-  }
-  self.prevloading = " loading";
-  if (self.nomore) {
-    self.nomore = false;
-  }
-  if (self.pid > 1) {
-    self.pid--;
-    self.setPost(self.pid);
-    self.update();
-  }
-}.bind(this)
-
-this.next = function() {
-  if (self.nextloading || self.prevloading) {
-    return;
-  }
-  self.nextloading = " loading";
-  console.log(self.pid);
-  console.log(self.nomore);
-  if (!self.nomore) {
-    self.pid++;
-    self.setPost(self.pid);
-    self.update();
-  }
-}.bind(this)
-
-this.setPost = function(pid) {
-  self.update();
-  self.loading = true;
-  fetch("/blog/switchpost/"+pid)
-    .then(
-      function(resp) {
-        return resp.text();
-      })
-    .then(
-      function(body) {
-        if (body === "false") {
-          self.nomore = true;
-          route("/");
-          self.update()
-        }
-        else {
-          self.content = R.join(" ")(R.repeat(body, 20));
-          route("/"+pid);
-        }
-
-        self.loading = false;
-        self.prevloading = "";
-        self.nextloading = "";
-        self.update();
-      });
-}
-
-this.on("mount", function() { this.setPost(self.pid) });
-
-});
-
-riot.tag2('posts', '<yield></yield>', '', '', function(opts) {
-});

build/styles/riotblog.min.css

@@ -55,3 +55,6 @@
 
 .maxwarn {
   margin-top: 15px; }
+
+.footer {
+  margin-top: 10%; }

build/templates/index.html

@@ -30,11 +30,6 @@
 {% endblock %}
 
 {% block scripts %}
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.min.js"></script>
-  <script type="text/javascript" src="//cdn.jsdelivr.net/riot-route/3.0.2/route.min.js"></script>
-  <script type="text/javascript" src="/blog/scripts/tags.min.js"></script>
   <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
 {% endblock %}
 

fabfile.py

@@ -6,20 +6,15 @@ import fabric.operations as op
 
 env.hosts = ["wes@mgoal.ca:444"]
 
-@task
-def buildTags():
-    with lcd("./build"):
-        local("riot ../src/tags scripts/tags.min.js")
-
 @task
 def buildScss():
     with lcd("./build"):
         local("sassc ../src/styles/riotblog.scss > styles/riotblog.min.css")
 
 @task
-def minifyJS():
+def buildJS():
-    with lcd("./build"):
+    local("rollup -c rollup.config.js")
-        local("uglifyjs ../src/scripts/riotblog.js > scripts/riotblog.min.js")
+    local("uglifyjs build/bundle.js > build/scripts/riotblog.min.js")
 
 @task
 def buildVenv():
@@ -59,9 +54,8 @@ def serveUp():
 @task(default=True)
 def build():
     local("mkdir -p build/{scripts,styles}")
-    buildTags()
     buildScss()
-    minifyJS()
+    buildJS()
     copyFiles()
     upload()
     buildVenv()
@@ -70,9 +64,8 @@ def build():
 @task
 def update():
     local("mkdir -p build/{scripts,styles}")
-    buildTags()
     buildScss()
-    minifyJS()
+    buildJS()
     copyFiles()
     upload()
     serveUp()
@@ -81,10 +74,9 @@ def update():
 def locbuild():
     local("mkdir -p build/{scripts,styles}")
     local("cp requirements.txt ./build/requirements.txt")
-    buildLocalVenv()
+    #buildLocalVenv()
-    buildTags()
     buildScss()
-    minifyJS()
+    buildJS()
     copyFiles()
     local("sudo rm -fr /srv/http/riotblog")
     local("sudo mkdir -p /srv/http/riotblog")

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "riotblog",
+  "version": "1.0.0",
+  "description": "Riot Blog",
+  "main": "src/scripts/riotblog.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup src/scripts/riotblog.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nisstyre56/riotblog.git"
+  },
+  "author": "Wesley Kerfoot",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/nisstyre56/riotblog/issues"
+  },
+  "homepage": "https://github.com/nisstyre56/riotblog#readme",
+  "devDependencies": {
+    "ramda": "^0.23.0",
+    "riot": "^3.3.1",
+    "riot-route": "^3.1.0",
+    "rollup": "^0.41.4",
+    "rollup-plugin-buble": "^0.15.0",
+    "rollup-plugin-commonjs": "^7.0.0",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-riot": "^1.1.0",
+    "whatwg-fetch": "^2.0.2"
+  },
+  "dependencies": {
+    "whatwg-fetch": "^2.0.2"
+  }
+}

rollup.config.js

@@ -0,0 +1,16 @@
+import riot from 'rollup-plugin-riot'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+import buble from 'rollup-plugin-buble'
+
+export default {
+  entry: 'src/scripts/riotblog.js',
+  dest: 'build/bundle.js',
+  plugins: [
+    riot(),
+    nodeResolve({ jsnext: true }),
+    commonjs(),
+    buble()
+  ],
+  format: 'iife'
+}

src/posts.py

@@ -22,3 +22,9 @@ class Posts:
                 "author" : author
                 }
         return jsonify(self.db.save(doc))
+
+    def getposts(self, start, end):
+        return jsonify([])
+
+    def getcomments(self, postID):
+        return jsonify([])

src/tags/comment.tag → src/scripts/comment.tag

@@ -9,4 +9,8 @@
       </div>
     </div>
   </div>
+<script>
+import { default as R } from 'ramda';
+this.R = R;
+</script>
 </comment>

src/tags/comments.tag → src/scripts/comments.tag

@@ -1,22 +1,15 @@
 <comments>
-  <div if={loading}
+  <div if={loading} class="loading comments-loader"></div>
-       class="loading comments-loader">
+  <comment if={!loading} each={this.comments} data="{this}"></comment>
-  </div>
-  <comment
-    if={!loading}
-    each={comments}
-    data={this}
-  />
   <textarea onfocus={clearplaceholder}
             onblur={checkplaceholder}
             oninput={echo}
             __disabled={disabled}
-            class={"form-input comments centered " + maxed}
+            class={"form-input comments centered " + this.maxed}
-            name="textarea"
+            ref="textarea"
             rows="10"
             cols="50"
-            maxlength={maxlength}
+            maxlength={maxlength}>
-            >
       { placeholder }
   </textarea>
   <div if={warn} class="toast toast-danger maxwarn centered">
@@ -24,18 +17,20 @@
       onclick={closewarning}
       class="btn btn-clear float-right">
     </button>
-    You've reached the max comment size
+    Your comment is too long!
   </div>
+<script>
+import 'whatwg-fetch';
 
-comments = [];
+this.comments = [];
-maxlength = 700;
+this.maxlength = 700;
 
-placeholder = "Comment here!";
+this.placeholder = "Comment here!";
-focused = false;
+this.focused = false;
-maxed = false;
+this.maxed = "";
-warn = false;
+this.warn = false;
-disabled = "";
+this.disabled = "";
-loading = true;
+this.loading = true;
 
 clearplaceholder() {
   if (!this.focused) {
@@ -47,7 +42,7 @@ clearplaceholder() {
 }
 
 checkplaceholder() {
-  if (this.textarea.value.trim().length == 0) {
+  if (this.refs.textarea.value.trim().length == 0) {
     this.update({
       "placeholder" : "Comment here!",
       "focused"     : false
@@ -60,7 +55,7 @@ closewarning() {
 }
 
 echo(ev) {
-  if (this.textarea.value.length >= maxlength) {
+  if (this.refs.textarea.value.length >= maxlength) {
     this.update({
       "maxed" : "maxinput",
       "warn"  : true
@@ -68,7 +63,7 @@ echo(ev) {
   }
   else {
     this.update({
-      "maxed" : false,
+      "maxed" : "",
       "warn"  : false
     });
     window.setTimeout(this.closewarning, 5000);
@@ -97,7 +92,5 @@ this.on("mount",
   function() {
     this.getComments(self.opts.pid);
   });
-
-<script>
 </script>
 </comments>

src/tags/post.tag → src/scripts/post.tag

@@ -19,6 +19,11 @@
   </div>
 
 <script>
+
+import 'whatwg-fetch';
+import route from 'riot-route'
+import { default as R } from 'ramda';
+
 var self = this;
 
 this.loading = false;

src/scripts/riotblog.js

@@ -1,7 +1,15 @@
+import riot from 'riot';
+import './comments.tag';
+import './comment.tag';
+import './bbutton.tag';
+import './post.tag';
+import './posts.tag';
+
 riot.mount("post",
   {
     "creator" : "wes",
     "title" : "A cool post here"
   });
 
+riot.mount("comments");
 riot.mount("bbutton");

src/scripts/tags.js

@@ -1,154 +0,0 @@
-riot.tag2('bbutton', '<button class="btn rounded-button"> </button>', '', '', function(opts) {
-});
-
-riot.tag2('comment', '<div class="comment centered"> <div class="card"> <div class="card-header"> <h4 class="card-title">{title} by {author}</h4> </div> <div class="card-body comment-body"> {R.join(⁗ ⁗)(R.repeat(text, 20))} </div> </div> </div>', '', '', function(opts) {
-});
-
-riot.tag2('comments', '<div if="{loading}" class="loading comments-loader"> </div> <comment if="{!loading}" each="{comments}" data="{this}"></comment> <textarea onfocus="{clearplaceholder}" onblur="{checkplaceholder}" oninput="{echo}" __disabled="{disabled}" class="{⁗form-input comments centered ⁗ + maxed}" name="textarea" rows="10" cols="50" maxlength="{maxlength}"> {placeholder} </textarea> <div if="{warn}" class="toast toast-danger maxwarn centered"> <button onclick="{closewarning}" class="btn btn-clear float-right"> </button> You\'ve reached the max comment size </div>', '', '', function(opts) {
-
-comments = [];
-maxlength = 700;
-
-placeholder = "Comment here!";
-focused = false;
-maxed = false;
-warn = false;
-disabled = "";
-loading = true;
-
-this.clearplaceholder = function() {
-  if (!this.focused) {
-    this.update({
-      "placeholder" : "",
-      "focused"     : true
-      })
-  }
-}.bind(this)
-
-this.checkplaceholder = function() {
-  if (this.textarea.value.trim().length == 0) {
-    this.update({
-      "placeholder" : "Comment here!",
-      "focused"     : false
-    });
-  }
-}.bind(this)
-
-this.closewarning = function() {
-  this.update({"warn" : false});
-}.bind(this)
-
-this.echo = function(ev) {
-  if (this.textarea.value.length >= maxlength) {
-    this.update({
-      "maxed" : "maxinput",
-      "warn"  : true
-    });
-  }
-  else {
-    this.update({
-      "maxed" : false,
-      "warn"  : false
-    });
-    window.setTimeout(this.closewarning, 5000);
-  }
-}.bind(this)
-
-var self = this;
-
-this.getComments = function(pid) {
-  fetch("/comments/"+pid)
-    .then(
-      function(resp) {
-        return resp.text();
-      })
-    .then(
-      function(body) {
-        self.update(
-          {
-            "comments" : JSON.parse(body),
-            "loading"  : false
-          });
-      });
-}.bind(this)
-
-this.on("mount",
-  function() {
-    this.getComments(self.opts.pid);
-  });
-
-});
-
-riot.tag2('post', '<div class="postnav centered"> <button class="{⁗btn btn-primary ⁗ + (this.pid <= 1 ? ⁗disabled⁗ : ⁗ ⁗) + this.prevloading}" onclick="{prev}">Previous Post</button> <button class="{⁗btn btn-primary ⁗ + (this.nomore ? ⁗disabled⁗ : ⁗ ⁗) + this.nextloading}" onclick="{next}">Next Post</button> </div> <h4 class="post centered" if="{nomore}"> No More Posts! </h4> <div if="{!(loading || nomore)}" class="post centered"> <h4>{opts.title}</h4> <h5>By {opts.creator}</h5> <p class="post-content centered text-break">{content}</p> <div class="divider"></div> <comments pid="{pid}"> </comments> </div>', '', '', function(opts) {
-var self = this;
-
-this.loading = false;
-this.prevloading = "";
-this.nextloading = "";
-
-this.nomore = false
-this.pid = 1;
-content = "";
-
-this.prev = function() {
-  if (self.prevloading || self.nextloading) {
-    return;
-  }
-  self.prevloading = " loading";
-  if (self.nomore) {
-    self.nomore = false;
-  }
-  if (self.pid > 1) {
-    self.pid--;
-    self.setPost(self.pid);
-    self.update();
-  }
-}.bind(this)
-
-this.next = function() {
-  if (self.nextloading || self.prevloading) {
-    return;
-  }
-  self.nextloading = " loading";
-  console.log(self.pid);
-  console.log(self.nomore);
-  if (!self.nomore) {
-    self.pid++;
-    self.setPost(self.pid);
-    self.update();
-  }
-}.bind(this)
-
-this.setPost = function(pid) {
-  self.update();
-  self.loading = true;
-  fetch("/switchpost/"+pid)
-    .then(
-      function(resp) {
-        return resp.text();
-      })
-    .then(
-      function(body) {
-        if (body === "false") {
-          self.nomore = true;
-          route("/");
-          self.update()
-        }
-        else {
-          self.content = R.join(" ")(R.repeat(body, 20));
-          route("/"+pid);
-        }
-
-        self.loading = false;
-        self.prevloading = "";
-        self.nextloading = "";
-        self.update();
-      });
-}
-
-this.on("mount", function() { this.setPost(self.pid) });
-
-});
-
-riot.tag2('posts', '<yield></yield>', '', '', function(opts) {
-});

src/styles/riotblog.scss

@@ -1,51 +1,83 @@
 .post-text, .blog-title, .post, .postnav {
-  text-align: center; }
+  text-align: center;
+}
 
 .post-content {
   max-width: 50%;
   text-align: justify;
-  font-size: 1.5em; }
+  font-size: 1.5em;
+}
+
 @media (max-width: 700px) {
   .post-content {
-      max-width: 70%; } }
+    max-width: 70%;
+  }
+}
+
 @media (max-width: 500px) {
   .post-content {
-      max-width: 90%; } }
+    max-width: 90%;
+  }
+}
 
 .comment-block, .comments, .maxwarn {
-  max-width: 30%; }
+  max-width: 30%;
+}
+
 @media (max-width: 700px) {
   .comment-block, .comments, .maxwarn {
-      max-width: 50%; } }
+    max-width: 50%;
+  }
+}
+
 @media (max-width: 500px) {
   .comment-block, .comments, .maxwarn {
-      max-width: 70%; } }
+    max-width: 70%;
+  }
+}
 
 .comments {
-  margin-top: 5%; }
+  margin-top: 5%;
+}
 
 .comment {
   margin-top: 2%;
-  max-width: 40%; }
+  max-width: 40%;
+}
+
 @media (max-width: 700px) {
   .comment {
-      max-width: 65%; } }
+    max-width: 65%;
+  }
+}
+
 @media (max-width: 500px) {
   .comment {
-      max-width: 85%; } }
+    max-width: 85%;
+  }
+}
 
 .comments-loader {
-  margin-top: 2%; }
+  margin-top: 2%;
+}
 
 .comment-body {
   margin-left: 10px;
-  margin-right: 10px; }
+  margin-right: 10px;
+}
 
 .rounded-button {
-  border-radius: 13px; }
+  border-radius: 13px;
+}
 
 .maxinput {
-  background-color: grey; }
+  background-color: grey;
+}
 
 .maxwarn {
-  margin-top: 15px; }
+  margin-top: 15px;
+}
+
+.footer {
+  margin-top: 10%;
+}

src/templates/index.html

@@ -30,11 +30,6 @@
 {% endblock %}
 
 {% block scripts %}
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.min.js"></script>
-  <script type="text/javascript" src="//cdn.jsdelivr.net/riot-route/3.0.2/route.min.js"></script>
-  <script type="text/javascript" src="/blog/scripts/tags.min.js"></script>
   <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
 {% endblock %}
 

src/templates/write.html

@@ -0,0 +1,39 @@
+{% block head %}
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<header class="text-center nav navbar">
+  <section class="centered page-top navbar-section">
+    <h1 class="blog-title">nowhere</h1>
+  </section>
+</header>
+{% endblock %}
+
+<html>
+  <body>
+    {% block content %}
+
+    <posteditor>
+    </posteditor>
+
+    {% endblock %}
+
+    <footer class="footer">
+    </footer>
+
+{% block styles %}
+
+  <link rel="stylesheet" href="/blog/styles/spectre.min.css">
+  <link rel="stylesheet" href="/blog/styles/riotblog.min.css">
+
+{% endblock %}
+
+{% block scripts %}
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.min.js"></script>
+  <script type="text/javascript" src="//cdn.jsdelivr.net/riot-route/3.0.2/route.min.js"></script>
+  <script type="text/javascript" src="/blog/scripts/tags.min.js"></script>
+  <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
+{% endblock %}
+
+  </body>
+</html>