From 484202bd18c25318c8c20725b6d930d76e265b16 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Tue, 17 Jun 2014 10:51:54 -0400
Subject: [PATCH] Add variable 404 messages. Close #70.

Add:
        bitshift/assets.py, static/sass/404.sass
                -Add `syntax_highlight()` and style rules to perform syntax
                highlighting on 404 error messages; used in
                `templates/error404.html`.

        templates
                -Add a `Jinja` expression to select a random "404" message from
                a sequence.
---
 bitshift/assets.py        | 20 ++++++++++++++++++++
 static/sass/error404.sass | 14 +++++---------
 templates/error404.html   | 16 ++++++++++++----
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/bitshift/assets.py b/bitshift/assets.py
index 2b0145f..c7b7c11 100644
--- a/bitshift/assets.py
+++ b/bitshift/assets.py
@@ -2,6 +2,8 @@
 :synopsis: Helper functions for use inside the project's Jinja templates.
 """
 
+import re
+
 from flask import Markup
 
 ASSET_HTML_TEMPLATES = {
@@ -24,3 +26,21 @@ def tag(filename):
 
     file_ext = filename.split(".")[-1]
     return Markup(ASSET_HTML_TEMPLATES[file_ext] % filename)
+
+def syntax_highlight(msg):
+    """
+    Inserts HTML `<span>` elements into a string, for symbol/word styling.
+
+    Args:
+        msg : (str) A message.
+    """
+
+    msg.replace("<", "&;lt")
+    msg.replace(">", "&;gt")
+
+    font_size = 16.0 / len(msg)
+    msg = re.sub('([!()"%])', '<span class="dark">\\1</span>', msg)
+    msg = re.sub('([:.;,])', '<span class="red">\\1</span>', msg)
+    msg = msg.replace("404", '<span class="red">404</span>')
+    return "<span class='light' style='font-size: %fem'>%s</span>" % (
+            font_size, msg)
diff --git a/static/sass/error404.sass b/static/sass/error404.sass
index f002aac..6afb76e 100644
--- a/static/sass/error404.sass
+++ b/static/sass/error404.sass
@@ -9,15 +9,11 @@ div#message
     text-align: center
 
     span
-        &#error-num
-            font-size: 170%
-            vertical-align: middle
-
-        &.c1
-            color: $baseColor1
+        &.light
+            color: $baseColor3
 
-        &.c2
+        &.dark
             color: $baseColor2
 
-        &.c3
-            color: $baseColor3
+        &.red
+            color: $baseColor1
diff --git a/templates/error404.html b/templates/error404.html
index dad4920..0e258b3 100644
--- a/templates/error404.html
+++ b/templates/error404.html
@@ -6,9 +6,17 @@
 
 = block body
   <div id="message">
-    <span class="c1">puts</span
-    ><span class="c3">(</span><span class=c2>"</span
-    ><span id="error-num">404</span><span class=c2>"</span><span class=c3
-    >)</span><span class="c3">;</span>
+  {{ assets.syntax_highlight([
+    'puts("404");',
+    'printf("%d\n", 404);',
+    'puts 404',
+    'System.out.println("404")',
+    'print 404',
+    'console.log("404")',
+    'echo 404',
+    'std::cout << "404\\n"',
+    '(println "404")',
+    'say "404!";'
+    ] | random) | safe }}
   </div>
 = endblock