Overhaul JS, make sidebar a template

app.py

@@ -4,12 +4,10 @@ from ldap3 import Server, Connection, ALL, MODIFY_REPLACE
 from flask import Flask, g, request, session, redirect, url_for, render_template
 from flask_simpleldap import LDAP
 from flask_bootstrap import Bootstrap
-from readabilipy import simple_json_from_html_string
 import os
 import sqlite3
 import requests
-from requests.api import head
-from utils import clean_articles
+from utils import clean_articles, get_article
 
 app = Flask(__name__)
 Bootstrap(app)
@@ -65,7 +63,7 @@ def index():
     conn.commit()
     conn.close()
 
-    return render_template('list.j2', articles = clean_articles(rows))
+    return render_template('list.j2', articles = rows)
 
 
 @app.route('/archived')
@@ -81,13 +79,13 @@ def archived():
     conn.commit()
     conn.close()
 
-    return render_template('list.j2', articles = clean_articles(rows))
+    return render_template('list.j2', articles = rows)
 
 
-@app.route('/save')
+@app.route('/bookmarklet')
 @ldap.login_required
-def save():
-    return render_template('save.j2')
+def bookmarklet():
+    return render_template('bookmarklet.j2')
 
 
 @app.route('/login', methods=['GET', 'POST'])
@@ -145,16 +143,13 @@ def add_url():
     c = conn.cursor()
 
     if url is not None and len(url) > 0:
-        headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'}
-        response = requests.get(url, headers=headers)
-
-        article = simple_json_from_html_string(response.text, use_readability=True)
+        article, short_domain = get_article(url)
 
         c.execute("SELECT * FROM articles WHERE url=?", (url,))
         rows = c.fetchall()
         
         if (len(rows) == 0):
-            c.execute("INSERT INTO articles (url, content, title, byline) VALUES (?, ?, ?, ?)", (url, article['content'], article['title'], article['byline']))
+            c.execute("INSERT INTO articles (url, content, title, byline) VALUES (?, ?, ?, ?)", (url, article['content'], article['title'], short_domain))
             c.execute("SELECT * FROM articles WHERE url=?", (url,))
             rows = c.fetchall()
 

static/add_modal.js

@@ -0,0 +1,37 @@
+function openLinkModal() {
+    $('#addLinkModal').modal('show');
+}
+
+function addUrl() {
+    $("#link-btn").prop("disabled", true);
+
+    url = $('#link-form').val();
+
+    if (url.trim().length === 0) {
+        showError('URL is required');
+        return false;
+    }
+
+    $.ajax({
+        url: '/add',
+        method: 'POST',
+        data: { "url": url },
+        success: function(data) {
+            $('#link-form').val('');
+            $("#link-btn").prop("disabled", false);
+            if (data !== 'Error')
+                window.location.reload();
+            else
+                showError('URL cannot be empty');
+        }
+    });
+}
+
+function showError(error) {
+    $('#error-alert').text(error);
+    $('#error-alert').show();
+}
+
+$('#addLinkModal').on('shown.bs.modal', function () {
+  $('#link-form').trigger('focus');
+});

static/style.css

@@ -39,6 +39,14 @@
   color: black;
 }
 
+#sidebar div > a {
+  color: rgba(0,0,0,.5);
+}
+
+#sidebar div.active > a {
+  color: black;
+}
+
 #content {
   width: 100%;
   padding: 20px;
@@ -64,6 +72,14 @@
   #sidebar ul > li.active > a {
     color: white;
   }
+
+  #sidebar div > a {
+    color: rgba(255,255,255,.5);
+  }
+
+  #sidebar div.active > a {
+    color: white;
+  }
   
   body {
     background-color: #111 !important;

templates/bookmarklet.j2

@@ -0,0 +1,53 @@
+{% extends "bootstrap/base.html" %}
+{% block title %}Read TI Later{% endblock %}
+
+{% block styles %}
+{{super()}}
+<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+{% endblock %}
+
+{% block navbar %}
+<div id="navbar" class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+    <div class="navbar-brand">Read TI Later</div>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
+                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for('index') }}">My List</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
+            </li>
+        </ul>
+        <form class="form-inline ml-auto">
+            <a class="btn btn-primary" href="/logout" role="button">Logout</a>
+        </form>
+    </div>        
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="wrapper">
+    <!-- Sidebar -->
+    <div id="sidebar">
+        {% include "fragments/sidebar.j2" %}
+    </div>
+
+    <!-- Page Content -->
+    <div id="content">
+        <div>
+            <p style="text-align: center;">Would you rather save on the go? Try our bookmarklet!</p>
+            <code>
+                javascript:(function(){var%20url%20=%20location.href;var%20otherWindow=window.open('about:blank','_blank');otherWindow.opener=null;otherWindow.location='https://read.technicalincompetence.club/add?close=1&url='+encodeURIComponent(url);})();
+            </code>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+{% endblock %}

templates/fragments/add_modal.j2

@@ -0,0 +1,16 @@
+<div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Add Link</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <input id="link-form" type="text" class="form-control" placeholder="https://example.com" style="width: 80%; float: left;">
+        <button id="link-btn" type="button" class="btn btn-primary" onclick="addUrl();" style="float: right;">Add</button>
+      </div>
+    </div>
+  </div>
+</div>

templates/fragments/sidebar.j2

@@ -0,0 +1,56 @@
+        <ul class="list-unstyled components">
+            {% if request.path == url_for('index') %}
+            <li class="nav-item active">
+            {% else %}
+            <li class="nav-item">
+            {% endif %}
+                <a href="{{ url_for('index') }}">
+                <svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
+                </svg>My List
+                </a>
+            </li>
+            {% if request.path == url_for('archived') %}
+            <li class="nav-item active">
+            {% else %}
+            <li class="nav-item">
+            {% endif %}
+                <a href="{{ url_for('archived') }}"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
+                </svg>Archived</a>
+            </li>
+        </ul>
+
+        {% if request.path == url_for('bookmarklet') %}
+        <div style="position: fixed; bottom: 20px;" class="active">
+        {% else %}
+        <div style="position: fixed; bottom: 20px;">
+        {% endif %}
+            <a href="{{ url_for('bookmarklet') }}"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#book"/>
+                </svg>Bookmarklet</a>
+        </div>

templates/list.j2

@@ -31,7 +31,7 @@
             </li>
         </ul>
         <form class="form-inline ml-auto">
-            <a class="btn btn-primary" href="/save" role="button" style="margin-right: 20px;">Save</a>
+            <a class="btn btn-info" href="#addLink" onclick="openLinkModal();" role="button" style="margin-right: 20px;">Add Link</a>
             <a class="btn btn-primary" href="/logout" role="button">Logout</a>
         </form>
     </div>        
@@ -42,44 +42,7 @@
 <div class="wrapper">
     <!-- Sidebar -->
     <div id="sidebar">
-        <ul class="list-unstyled components">
-            {% if request.path == url_for('index') %}
-                <li class="nav-item active">
-            {% else %}
-                <li class="nav-item">
-            {% endif %}
-                <a href="{{ url_for('index') }}">
-                <svg
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
-                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
-                </svg>My List
-                </a>
-            </li>
-            {% if request.path == url_for('archived') %}
-                <li class="nav-item active">
-            {% else %}
-                <li class="nav-item">
-            {% endif %}
-                <a href="{{ url_for('archived') }}"><svg
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
-                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
-                </svg>Archived</a>
-            </li>
-        </ul>
+        {% include "fragments/sidebar.j2" %}
     </div>
 
     <!-- Page Content -->
@@ -90,7 +53,7 @@
                     {% for article in articles|reverse %}
                         <div style="color: black; padding: 10px; margin-bottom: 10px" class="card" id="article">
                             <a href="/article/{{article[0]}}">{{ article[2] }}</a>
-                            <a href="{{ article[1] }}" target="_blank" style="color: darkgray">{{ article[4] }}</a>
+                            <a href="{{ article[1] }}" target="_blank" style="color: darkgray">{{ article[3] }}</a>
                             <br>
                             <span>
                             <a href="/archive/{{article[0]}}" class='text-success'>Archive</a>
@@ -104,8 +67,11 @@
         </form>
     </div>
 </div>
+
+{% include "fragments/add_modal.j2" %}
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
+<script type="text/javascript" src="{{url_for('.static', filename='add_modal.js')}}"></script>
 {% endblock %}

templates/save.j2

@@ -1,148 +0,0 @@
-{% extends "bootstrap/base.html" %}
-{% block title %}Read TI Later{% endblock %}
-
-{% block styles %}
-{{super()}}
-<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
-{% endblock %}
-
-{% block navbar %}
-<div id="navbar" class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Read TI Later</div>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
-                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    <div class="collapse navbar-collapse" id="navbarNavDropdown">
-        <ul class="navbar-nav">
-            <li class="nav-item">
-                <a class="nav-link" href="{{ url_for('index') }}">My List</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
-            </li>
-        </ul>
-        <form class="form-inline ml-auto">
-            <a class="btn btn-primary" href="/logout" role="button">Logout</a>
-        </form>
-    </div>        
-</div>
-{% endblock %}
-
-{% block content %}
-<div class="wrapper">
-    <!-- Sidebar -->
-    <div id="sidebar">
-        <ul class="list-unstyled components">
-            {% if request.path == url_for('index') %}
-                <li class="nav-item active">
-            {% else %}
-                <li class="nav-item">
-            {% endif %}
-                <a href="{{ url_for('index') }}">
-                <svg
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
-                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
-                </svg>My List
-                </a>
-            </li>
-            {% if request.path == url_for('archived') %}
-                <li class="nav-item active">
-            {% else %}
-                <li class="nav-item">
-            {% endif %}
-                <a href="{{ url_for('archived') }}"><svg
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
-                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
-                </svg>Archived</a>
-            </li>
-        </ul>
-    </div>
-
-    <!-- Page Content -->
-    <div id="content">
-        <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
-            This is a danger alert—check it out!
-        </div>
-        <form>
-            <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <label for="formGroupExampleInput4">URL</label>
-                    <input id="link-form" type="text" class="form-control" placeholder="https://example.com">
-                    <br>
-                    <button type="button" class="btn btn-primary" onclick="addUrl();">Add</button>
-                    <br>
-                    <br>
-                </div>
-                <div style="position:fixed; bottom: 20px;">
-                    <p style="text-align: center;">Would you rather save on the go? Try our bookmarklet!</p>
-                    <code>
-                        javascript:(function(){var%20url%20=%20location.href;var%20otherWindow=window.open('about:blank','_blank');otherWindow.opener=null;otherWindow.location='{{ request.url_root }}add?close=1&url='+encodeURIComponent(url);})();
-                    </code>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-{{ super() }}
-<script>
-function addUrl() {
-    url = $('#link-form').val();
-
-    if (url.trim().length === 0) {
-        showError('URL is required');
-        return false;
-    }
-
-    $.ajax({
-        url: '/add',
-        method: 'POST',
-        data: { "url": url },
-        success: function(data) {
-            if (data !== 'Error')
-                window.location.reload();
-            else
-                showError('URL cannot be empty');
-        }
-    });
-}
-
-function showError(error) {
-    hideSuccess();
-    $('#error-alert').text(error);
-    $('#error-alert').show();
-}
-
-function showArticle(message) {
-    hideError();
-    $('#article').html(message);
-    $('#article img').css('max-width', '100%')
-    $('#article').show();
-}
-
-function hideError(error) {
-    $('#error-alert').hide();
-}
-
-function hideArticle(error) {
-    $('#article').hide();
-}
-</script>
-{% endblock %}

utils.py

@@ -1,4 +1,6 @@
 from urllib.parse import urlparse
+from readabilipy import simple_json_from_html_string
+import requests
 
 def clean_articles(rows):
     #article_id, url, title, byline
@@ -9,4 +11,15 @@ def clean_articles(rows):
         result = '{uri.netloc}'.format(uri=parsed_uri)
         out.append([row[0], row[1], row[2], row[3], result])
 
-    return out
+    return out
+
+
+def get_article(url):
+        headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'}
+        response = requests.get(url, headers=headers)
+
+        article = simple_json_from_html_string(response.text, use_readability=True)
+        parsed_uri = urlparse(url)
+        result = '{uri.netloc}'.format(uri=parsed_uri)
+
+        return article, result