Add mobile and SEO improvements

Author: jamiefdhurst

blog/__init__.py

@@ -1,6 +1,6 @@
 import os
 import requests
-from flask import Flask, g, render_template
+from flask import Flask, g, render_template, url_for
 from werkzeug.exceptions import HTTPException
 
 def create_app(test_config=None):

blog/articles.py

@@ -82,6 +82,12 @@ def get_paginated_articles(directory, page=1, per_page=10):
     files = files[first_entry:last_entry]
     return __parse_articles(directory, files)
 
+def get_all_articles(directory):
+    files = [f for f in listdir(directory) if isfile(join(directory, f))]
+    files.sort()
+    files.reverse()
+    current_app.logger.debug(f"Returned {len(files)} files...")
+    return __parse_articles(directory, files)
 
 def get_pages(directory, per_page=10):
     files = [f for f in listdir(directory) if isfile(join(directory, f))]

blog/assets/scss/_variables.scss

@@ -1,3 +1,6 @@
+$tablet: 768px;
+$max: 1240px;
+
 $headingColour: #000;
 $linkColour: #000;
 $textColour: #000;

blog/assets/scss/default.scss

@@ -11,13 +11,18 @@ html, body {
 }
 
 html {
+    font-size: 12px;
     line-height: 1.15;
+
+    @media screen and (min-width: $tablet) {
+        font-size: 16px;
+    }
 }
 
 body {
     color: $textColour;
     font-family: 'Roboto', sans-serif;
-    font-size: 20px;
+    font-size: 1.25rem;
 }
 
 h1, h2, h3, h4 {
@@ -35,42 +40,42 @@ a:hover {
 
 header[role=banner] {
     margin: 0 auto;
-    max-width: 1240px;
-    padding: 1em 0;
+    max-width: $max;
+    padding: 1rem 0;
     width: 90%;
 
+    > a {
+        display: inline-block;
+        font-size: 1.125rem;
+        font-weight: 400;
+        margin: 0;
+        padding: 1rem 0;
+        vertical-align: top;
+    }
+
     p {
         margin: 0;
-        padding-top: .5em;
+        padding-top: .5rem;
     }
 }
 
 main {
     margin: 0 auto;
-    max-width: 1240px;
-    padding: 1em 0;
+    max-width: $max;
+    padding: 1rem 0;
     width: 90%;
 }
 
 footer[role=contentinfo] {
     color: $footerColour;
-    font-size: .9em;
+    font-size: .9rem;
     font-weight: 400;
     margin: 0 auto;
-    max-width: 1240px;
-    padding: 2em 0;
+    max-width: $max;
+    padding: 2rem 0;
     width: 90%;
 }
 
-h1 {
-    display: inline-block;
-    font-size: .9em;
-    font-weight: 400;
-    margin: 0;
-    padding: 1em 0;
-    vertical-align: top;
-}
-
 .float-right {
     float: right;
 }
@@ -86,49 +91,49 @@ h1 {
 }
 
 article {
-    margin-bottom: 7em;
+    margin-bottom: 7rem;
     padding: 1rem 0;
 
-    h2 {
-        font-size: 2em;
+    h1 {
+        font-size: 2.5rem;
         font-weight: 900;
         margin: 0 auto;
         max-width: 700px;
-        padding: 1em 0 .75em;
+        padding: 1.5rem 0 1.25rem;
 
         a, a:link, a:visited, a:active {
             font-weight: 900;
         }
     }
 
-    h3 {
+    p.date {
         color: $footerColour;
-        font-size: .9em;
+        font-size: 1.125rem;
         font-weight: 400;
-        margin: 0 auto 2em;
+        margin: 0 auto 2.5rem;
         max-width: 700px;
-        padding: 0 0 1em;
+        padding: 0 0 1.5rem;
     }
 
     .summary, .content {
         margin: 0 auto;
         max-width: 700px;
 
         &.content {
-            margin-top: 2em;
+            margin-top: 2.5rem;
         }
 
         h3 {
             color: $textColour;
-            font-size: 1.5em;
+            font-size: 1.5rem;
             font-weight: 700;
-            margin: 1.5em auto 1em;
+            margin: 1.5rem auto 1rem;
             padding: 0;
         }
 
         p, ol, ul {
             line-height: 1.75;
-            margin: 0 0 1.5em;
+            margin: 0 0 1.5rem;
         }
 
         a, a:link, a:visited, a:active, a:hover {
@@ -149,16 +154,16 @@ article {
         code {
             background-color: $formColour;
             color: #fff;
-            font-size: .75em;
-            padding: .125em;
+            font-size: .75rem;
+            padding: .125rem;
         }
 
         pre > code {
             display: block;
             line-height: 1.25;
             max-width: 100%;
             overflow: auto;
-            padding: .5em;
+            padding: .5rem;
         }
     }
 
@@ -175,8 +180,8 @@ article {
     color: #fff;
     cursor: pointer;
     display: inline-block;
-    font-size: 16px;
-    padding: 0.75em 2em;
+    font-size: 1rem;
+    padding: 0.75rem 2rem;
     text-decoration: none;
     text-shadow: none;
     transition: .2s;
@@ -220,7 +225,7 @@ article {
             border-radius: 3px;
             color: $linkColour;
             font-weight: 300;
-            padding: 6px 12px;
+            padding: .375rem .75rem;
             transition: .3s;
         }
 
@@ -243,10 +248,10 @@ article {
 
 .prev-next {
     border-top: 2px solid $borderColour;
-    padding: 10px 0;
+    padding: .625rem 0;
     display: flex;
     line-height: 1.5;
-    margin: 2em auto;
+    margin: 2rem auto;
     max-width: 700px;
 
     > div {
@@ -261,6 +266,6 @@ article {
     span {
         color: $footerColour;
         display: block;
-        font-size: 14px;
+        font-size: .875rem;
     }
 }

blog/blog.py

@@ -1,11 +1,31 @@
 from flask import (
-    abort, Blueprint, current_app, render_template, request
+    abort, Blueprint, current_app, make_response, render_template, request, send_from_directory
 )
 
 from . import articles
 
 bp = Blueprint('blog', __name__)
 
+@bp.route('/favicon.ico')
+@bp.route('/humans.txt')
+@bp.route('/robots.txt')
+def static_from_root():
+    return send_from_directory(current_app.static_folder, request.path[1:])
+
+@bp.route('/sitemap.xml', methods=['GET'])
+def sitemap():
+    directory = current_app.config['ARTICLES_DIR']
+    parsed_articles = articles.get_all_articles(directory)
+
+    template = render_template(
+        'sitemap.xml',
+        articles=parsed_articles,
+    )
+    response = make_response(template)
+    response.headers['Content-Type'] = 'application/xml'
+
+    return response
+
 @bp.route('/', methods=['GET'])
 def index():
     directory = current_app.config['ARTICLES_DIR']