From 7cf11986c5afc1f6a244d709e28d5a2bfa577ab7 Mon Sep 17 00:00:00 2001 From: "Brian S. Stephan" Date: Fri, 30 Oct 2020 00:19:19 -0500 Subject: [PATCH] user-selectable light and dark themes cookies, template rendering with different CSS files via default or request param or cookie, etc. --- incorporealcms/config.py | 6 +++ incorporealcms/pages.py | 25 ++++++++-- incorporealcms/static/css/dark.css | 52 ++++++++++++++++++++ incorporealcms/static/css/light.css | 52 ++++++++++++++++++++ incorporealcms/static/css/style.css | 39 +++------------ incorporealcms/templates/base.html | 5 ++ tests/instance/pages/mdash-or-triple-dash.md | 3 ++ tests/test_pages.py | 26 +++++++++- 8 files changed, 173 insertions(+), 35 deletions(-) create mode 100644 incorporealcms/static/css/dark.css create mode 100644 incorporealcms/static/css/light.css create mode 100644 tests/instance/pages/mdash-or-triple-dash.md diff --git a/incorporealcms/config.py b/incorporealcms/config.py index 1964532..af0ee7a 100644 --- a/incorporealcms/config.py +++ b/incorporealcms/config.py @@ -34,5 +34,11 @@ class Config(object): MARKDOWN_EXTENSIONS = ['meta', 'tables'] + PAGE_STYLES = { + 'DEFAULT': 'css/light.css', + 'dark': 'css/dark.css', + 'light': 'css/light.css', + } + TITLE_SUFFIX = 'incorporeal.org' MEDIA_DIR = 'media' diff --git a/incorporealcms/pages.py b/incorporealcms/pages.py index 7541307..a60df46 100644 --- a/incorporealcms/pages.py +++ b/incorporealcms/pages.py @@ -5,7 +5,7 @@ import os from flask import Blueprint, Markup, abort from flask import current_app as app -from flask import redirect, render_template +from flask import make_response, redirect, render_template, request from tzlocal import get_localzone logger = logging.getLogger(__name__) @@ -35,8 +35,27 @@ def display_page(path): content = Markup(app.config['md'].convert(entry)) logger.debug("file metadata: %s", app.config['md'].Meta) title = " ".join(app.config['md'].Meta.get('title')) if app.config['md'].Meta.get('title') else "" - return render_template('base.html', title=title, content=content, navs=parent_navs, - mtime=mtime.strftime('%Y-%m-%d %H:%M:%S %Z')) + return render('base.html', title=title, content=content, navs=parent_navs, + mtime=mtime.strftime('%Y-%m-%d %H:%M:%S %Z')) + + +def render(template_name_or_list, **context): + """Wrap Flask's render_template. + + * Determine the proper site theme to use in the template and provide it. + """ + selected_style = request.args.get('style', None) + if selected_style: + user_style = selected_style + else: + user_style = request.cookies.get('user-style') + logger.debug("user style cookie: %s", user_style) + context['user_style'] = app.config['PAGE_STYLES'].get(user_style, app.config['PAGE_STYLES']['DEFAULT']) + + resp = make_response(render_template(template_name_or_list, **context)) + if selected_style: + resp.set_cookie('user-style', selected_style) + return resp def resolve_page_file(path): diff --git a/incorporealcms/static/css/dark.css b/incorporealcms/static/css/dark.css new file mode 100644 index 0000000..e960f1b --- /dev/null +++ b/incorporealcms/static/css/dark.css @@ -0,0 +1,52 @@ +html { + color: #CCC; +} + +body { + background: #444; +} + +.site-wrap { + background: black; + + border: 1px solid #222; + border-top: none; + border-bottom: none; +} + +h1, h2, h3, h4, h5, h6 { + color: #B31D15; +} + +a:link, a:visited { + color: #BBB; + border-bottom: 1px dotted #CCC; +} + +a:hover, a:active { + color: #B14640; + border-bottom: 1px dotted #CCC; +} + +section.nav, section.styles { + color: #BBB; + background: #222; + border-bottom: 1px solid #222; +} + +section.nav a, section.styles a { + color: #BBB; +} + +table, th, td { + border: 1px solid #333; +} + +th { + background: #333; +} + +blockquote { + background-color: rgba(120, 120, 120, 0.3); + border: 1px solid #222; +} diff --git a/incorporealcms/static/css/light.css b/incorporealcms/static/css/light.css new file mode 100644 index 0000000..63ac990 --- /dev/null +++ b/incorporealcms/static/css/light.css @@ -0,0 +1,52 @@ +html { + color: #222; +} + +body { + background: #888; +} + +.site-wrap { + background: white; + + border: 1px solid #ddd; + border-top: none; + border-bottom: none; +} + +h1, h2, h3, h4, h5, h6 { + color: #811610; +} + +a:link, a:visited { + color: #222; + border-bottom: 1px dotted #222; +} + +a:hover, a:active { + color: #811610; + border-bottom: 1px dotted #222; +} + +section.nav, section.styles { + color: #666; + background: #EEE; + border-bottom: 1px solid #CCC; +} + +section.nav a, section.styles a { + color: #666; +} + +table, th, td { + border: 1px solid #ccc; +} + +th { + background: #eee; +} + +blockquote { + background-color: rgba(120, 120, 120, 0.1); + border: 1px solid #CCC; +} diff --git a/incorporealcms/static/css/style.css b/incorporealcms/static/css/style.css index ce9f0b2..751cfb3 100644 --- a/incorporealcms/static/css/style.css +++ b/incorporealcms/static/css/style.css @@ -1,31 +1,19 @@ html { font-family: sans-serif; padding: 0; - color: #222; } body { - background: #888; margin: 0; } .site-wrap { - background: white; - max-width: 70pc; min-height: 100vh; margin: 0; margin-left: auto; margin-right: auto; - - border: 1px solid #ddd; - border-top: none; - border-bottom: none; -} - -h1,h2,h3,h4,h5,h6 { - color: #811610; } h1 { @@ -53,46 +41,39 @@ h6 { } a:link { - color: #222; font-weight: bold; text-decoration: none; - border-bottom: 1px dotted #222; } a:visited { - color: #222; font-weight: bold; text-decoration: none; - border-bottom: 1px dotted #222; } a:hover { - color: #811610; font-weight: bold; text-decoration: none; - border-bottom: 1px dotted #222; } a:active { - color: #811610; font-weight: bold; text-decoration: none; - border-bottom: 1px dotted #222; } -section.nav { - color: #666; - background: #eee; +section.nav, section.styles { font-size: 0.75em; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #444; padding: 0.25em 0.5em; } -section.nav a { - color: #666; +section.nav a, section.styles a { border-bottom: none; } +section.styles { + float: right; +} + section.content { font-size: 11pt; @@ -119,11 +100,7 @@ table, th, td { margin-bottom: 15px; } -th { - background: #eee; -} - blockquote { - background-color: rgba(120, 120, 120, 0.1); + background-color: rgba(120, 120, 120, 0.3); padding: 1px 10px; } diff --git a/incorporealcms/templates/base.html b/incorporealcms/templates/base.html index c06fad1..04d1909 100644 --- a/incorporealcms/templates/base.html +++ b/incorporealcms/templates/base.html @@ -1,8 +1,13 @@ {{ title }}{% if title %} - {% endif %}{{ config.TITLE_SUFFIX }} +
+
+ [dark] + [light] +
{% for nav in navs %} {{ nav.0 }} diff --git a/tests/instance/pages/mdash-or-triple-dash.md b/tests/instance/pages/mdash-or-triple-dash.md new file mode 100644 index 0000000..11b0f87 --- /dev/null +++ b/tests/instance/pages/mdash-or-triple-dash.md @@ -0,0 +1,3 @@ +Test page + +word --- word diff --git a/tests/test_pages.py b/tests/test_pages.py index 7f59491..1add428 100644 --- a/tests/test_pages.py +++ b/tests/test_pages.py @@ -1,5 +1,7 @@ """Unit test helper methods.""" -from incorporealcms.pages import generate_parent_navs, is_file_path_actually_dir_path, resolve_page_file +from werkzeug.http import dump_cookie + +from incorporealcms.pages import generate_parent_navs, is_file_path_actually_dir_path, render, resolve_page_file def test_resolve_page_file_dir_to_index(): @@ -74,3 +76,25 @@ def test_is_file_path_actually_dir_path_nonsense_dir_is_no(app): """Test that a directory request is a directory request even if the dir doesn't exist.""" with app.app_context(): assert not is_file_path_actually_dir_path('/antphnathpnthapnthsnthax/') + + +def test_render_with_user_dark_theme(app): + """Test that a request with the dark theme selected renders the dark theme.""" + cookie = dump_cookie("user-style", 'dark') + with app.test_request_context(headers={'COOKIE': cookie}): + assert b'dark.css' in render('base.html').data + assert b'light.css' not in render('base.html').data + + +def test_render_with_user_light_theme(app): + """Test that a request with the light theme selected renders the light theme.""" + with app.test_request_context(): + assert b'light.css' in render('base.html').data + assert b'dark.css' not in render('base.html').data + + +def test_render_with_no_user_theme(app): + """Test that a request with no theme set renders the light theme.""" + with app.test_request_context(): + assert b'light.css' in render('base.html').data + assert b'dark.css' not in render('base.html').data