add mdx-linkify to markdown extensions

this is really pushing my patience for CSS, but I've always thought this
looked nice, so I'm going to try to retain it

incorporealcms/config.py

@@ -32,13 +32,9 @@ class Config(object):
         },
     }
 
-    MARKDOWN_EXTENSIONS = ['meta', 'tables']
+    MARKDOWN_EXTENSIONS = ['mdx_linkify', 'tables']
 
-    PAGE_STYLES = {
-        'DEFAULT': 'css/light.css',
-        'dark': 'css/dark.css',
-        'light': 'css/light.css',
-    }
+    DEFAULT_PAGE_STYLE = 'light'
 
     TITLE_SUFFIX = 'incorporeal.org'
     MEDIA_DIR = 'media'

incorporealcms/lib.py

@@ -0,0 +1,7 @@
+"""Miscellaneous helper functions and whatnot."""
+from flask import current_app as app
+
+
+def get_meta_str(key):
+    """Provide the page's metadata for the specified key, or '' if unset."""
+    return " ".join(app.config['md'].Meta.get(key)) if app.config['md'].Meta.get(key) else ""

incorporealcms/pages.py

@@ -8,6 +8,8 @@ from flask import current_app as app
 from flask import make_response, redirect, render_template, request
 from tzlocal import get_localzone
 
+from incorporealcms.lib import get_meta_str
+
 logger = logging.getLogger(__name__)
 
 bp = Blueprint('pages', __name__, url_prefix='/')
@@ -34,8 +36,9 @@ def display_page(path):
     else:
         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('base.html', title=title, content=content, navs=parent_navs,
+
+        return render('base.html', title=get_meta_str('title'), description=get_meta_str('description'),
+                      image=get_meta_str('image'), base_url=request.base_url, content=content, navs=parent_navs,
                       mtime=mtime.strftime('%Y-%m-%d %H:%M:%S %Z'))
 
 
@@ -44,13 +47,18 @@ def render(template_name_or_list, **context):
 
     * Determine the proper site theme to use in the template and provide it.
     """
+    PAGE_STYLES = {
+        'dark': 'css/dark.css',
+        'light': 'css/light.css',
+    }
+
     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'])
+    context['user_style'] = PAGE_STYLES.get(user_style, PAGE_STYLES.get(app.config['DEFAULT_PAGE_STYLE']))
 
     resp = make_response(render_template(template_name_or_list, **context))
     if selected_style:

incorporealcms/static/css/dark.css

@@ -1,13 +1,13 @@
 html {
-    color: #CCC;
+    color: #DDD;
 }
 
 body {
-    background: #444;
+    background: black;
 }
 
 .site-wrap {
-    background: black;
+    background: #111;
 
     border: 1px solid #222;
     border-top: none;
@@ -19,13 +19,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a:link, a:visited {
-    color: #BBB;
-    border-bottom: 1px dotted #CCC;
+    color: #EEE;
+    border-bottom: 1px dotted #EEE;
 }
 
 a:hover, a:active {
-    color: #B14640;
-    border-bottom: 1px dotted #CCC;
+    color: #B31D15;
+    border-bottom: 1px dotted #EEE;
 }
 
 section.nav, section.styles {
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     border: 1px solid #222;
 }
+
+figure {
+    background: #222;
+    border: 1px solid #333;
+}
+
+figcaption {
+    color: #BBB;
+}

incorporealcms/static/css/light.css

@@ -19,13 +19,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a:link, a:visited {
-    color: #222;
-    border-bottom: 1px dotted #222;
+    color: #111;
+    border-bottom: 1px dotted #111;
 }
 
 a:hover, a:active {
     color: #811610;
-    border-bottom: 1px dotted #222;
+    border-bottom: 1px dotted #111;
 }
 
 section.nav, section.styles {
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.1);
     border: 1px solid #CCC;
 }
+
+figure {
+    background: #EFEFEF;
+    border: 1px solid #CCCCCC;
+}
+
+figcaption {
+    color: #777777;
+}

incorporealcms/static/css/style.css

@@ -4,8 +4,11 @@ html {
 }
 
 body {
-
     margin: 0;
+    text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
 }
 
 .site-wrap {
@@ -104,3 +107,69 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     padding: 1px 10px;
 }
+
+.splash {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    text-align: center;
+}
+
+.splash img {
+    max-width: 100%;
+}
+
+.img-50 {
+    max-width: 50% !important;
+}
+
+/* For screens with width smaller than 400px */
+.figure-left .figure-right {
+    max-width: 95%;
+    float: none;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* For larger screens */
+@media only screen and (min-width: 400px) {
+    .figure-left {
+        float: left;
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .figure-right {
+        float: right;
+        margin-top: 0;
+        margin-right: 0;
+    }
+}
+
+figure {
+    max-width: 400px;
+    padding: 5px;
+    margin: 10px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+figure img {
+    max-width: 100%;
+    height: auto;
+}
+
+figcaption {
+    font-family: "Times New Roman", serif;
+    color: #777777;
+    text-align: center;
+    font-style: italic;
+    line-height: 1.3em;
+    margin-top: 5px;
+}
+
+.thumbnail-image {
+    width: 150px;
+    height: auto;
+    margin: 5px;
+    display: inline;
+}

incorporealcms/templates/base.html

@@ -1,8 +1,15 @@
 <!doctype html>
 <title>{{ title }}{% if title %} - {% endif %}{{ config.TITLE_SUFFIX }}</title>
+{% if title %}<meta property="og:title" content="{{ title }}">{% endif %}
+{% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
+{% if image %}<meta property="og:image" content="{{ image }}">{% endif %}
+<meta property="og:url" content="{{ base_url }}">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename=user_style) }}">
 <link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
+
 <section class="site-wrap">
     <section class="styles">
         <a href="?style=dark">[dark]</a>

requirements/requirements-dev.txt

@@ -4,61 +4,148 @@
 #
 #    pip-compile --output-file=requirements/requirements-dev.txt requirements/requirements-dev.in
 #
-appdirs==1.4.4            # via virtualenv
-attrs==20.2.0             # via pytest
-bandit==1.6.2             # via -r requirements/requirements-dev.in
-click==7.1.2              # via flask, pip-tools
-coverage==5.3             # via pytest-cov
-distlib==0.3.1            # via virtualenv
-dlint==0.10.3             # via -r requirements/requirements-dev.in
-filelock==3.0.12          # via tox, virtualenv
-flake8-blind-except==0.1.1  # via -r requirements/requirements-dev.in
-flake8-builtins==1.5.3    # via -r requirements/requirements-dev.in
-flake8-docstrings==1.5.0  # via -r requirements/requirements-dev.in
-flake8-executable==2.0.4  # via -r requirements/requirements-dev.in
-flake8-fixme==1.1.1       # via -r requirements/requirements-dev.in
-flake8-isort==4.0.0       # via -r requirements/requirements-dev.in
-flake8-logging-format==0.6.0  # via -r requirements/requirements-dev.in
-flake8-mutable==1.2.0     # via -r requirements/requirements-dev.in
-flake8==3.8.4             # via -r requirements/requirements-dev.in, dlint, flake8-builtins, flake8-docstrings, flake8-executable, flake8-isort, flake8-mutable
-flask==1.1.2              # via -r requirements/requirements.in
-gitdb==4.0.5              # via gitpython
-gitpython==3.1.9          # via bandit
-importlib-metadata==2.0.0  # via flake8, markdown, pluggy, pytest, stevedore, tox, virtualenv
-iniconfig==1.1.1          # via pytest
-isort==5.6.4              # via flake8-isort
-itsdangerous==1.1.0       # via flask
-jinja2==2.11.2            # via flask
-markdown==3.3.2           # via -r requirements/requirements.in
-markupsafe==1.1.1         # via jinja2
-mccabe==0.6.1             # via flake8
-packaging==20.4           # via pytest, tox
-pbr==5.5.1                # via stevedore
-pip-tools==5.3.1          # via -r requirements/requirements-dev.in
-pluggy==0.13.1            # via pytest, tox
-py==1.9.0                 # via pytest, tox
-pycodestyle==2.6.0        # via flake8
-pydocstyle==5.1.1         # via flake8-docstrings
-pyflakes==2.2.0           # via flake8
-pyparsing==2.4.7          # via packaging
-pytest-cov==2.10.1        # via -r requirements/requirements-dev.in
-pytest==6.1.1             # via -r requirements/requirements-dev.in, pytest-cov
-pytz==2020.1              # via tzlocal
-pyyaml==5.3.1             # via bandit
-six==1.15.0               # via bandit, packaging, pip-tools, tox, virtualenv
-smmap==3.0.4              # via gitdb
-snowballstemmer==2.0.0    # via pydocstyle
-stevedore==3.2.2          # via bandit
-testfixtures==6.15.0      # via flake8-isort
-toml==0.10.1              # via pytest, tox
-tox-wheel==0.5.0          # via -r requirements/requirements-dev.in
-tox==3.20.1               # via -r requirements/requirements-dev.in, tox-wheel
-tzlocal==2.1              # via -r requirements/requirements.in
-versioneer==0.18          # via -r requirements/requirements-dev.in
-virtualenv==20.0.35       # via tox
-werkzeug==1.0.1           # via flask
-wheel==0.35.1             # via tox-wheel
-zipp==3.3.1               # via importlib-metadata
+appdirs==1.4.4
+    # via virtualenv
+attrs==20.3.0
+    # via pytest
+bandit==1.7.0
+    # via -r requirements/requirements-dev.in
+bleach==3.2.2
+    # via mdx-linkify
+click==7.1.2
+    # via
+    #   flask
+    #   pip-tools
+coverage==5.3.1
+    # via pytest-cov
+distlib==0.3.1
+    # via virtualenv
+dlint==0.11.0
+    # via -r requirements/requirements-dev.in
+filelock==3.0.12
+    # via
+    #   tox
+    #   virtualenv
+flake8-blind-except==0.2.0
+    # via -r requirements/requirements-dev.in
+flake8-builtins==1.5.3
+    # via -r requirements/requirements-dev.in
+flake8-docstrings==1.5.0
+    # via -r requirements/requirements-dev.in
+flake8-executable==2.1.1
+    # via -r requirements/requirements-dev.in
+flake8-fixme==1.1.1
+    # via -r requirements/requirements-dev.in
+flake8-isort==4.0.0
+    # via -r requirements/requirements-dev.in
+flake8-logging-format==0.6.0
+    # via -r requirements/requirements-dev.in
+flake8-mutable==1.2.0
+    # via -r requirements/requirements-dev.in
+flake8==3.8.4
+    # via
+    #   -r requirements/requirements-dev.in
+    #   dlint
+    #   flake8-builtins
+    #   flake8-docstrings
+    #   flake8-executable
+    #   flake8-isort
+    #   flake8-mutable
+flask==1.1.2
+    # via -r requirements/requirements.in
+gitdb==4.0.5
+    # via gitpython
+gitpython==3.1.12
+    # via bandit
+iniconfig==1.1.1
+    # via pytest
+isort==5.7.0
+    # via flake8-isort
+itsdangerous==1.1.0
+    # via flask
+jinja2==2.11.2
+    # via flask
+markdown==3.3.3
+    # via
+    #   -r requirements/requirements.in
+    #   mdx-linkify
+markupsafe==1.1.1
+    # via jinja2
+mccabe==0.6.1
+    # via flake8
+mdx-linkify==2.1
+    # via -r requirements/requirements.in
+packaging==20.8
+    # via
+    #   bleach
+    #   pytest
+    #   tox
+pbr==5.5.1
+    # via stevedore
+pip-tools==5.5.0
+    # via -r requirements/requirements-dev.in
+pluggy==0.13.1
+    # via
+    #   pytest
+    #   tox
+py==1.10.0
+    # via
+    #   pytest
+    #   tox
+pycodestyle==2.6.0
+    # via flake8
+pydocstyle==5.1.1
+    # via flake8-docstrings
+pyflakes==2.2.0
+    # via flake8
+pyparsing==2.4.7
+    # via packaging
+pytest-cov==2.11.1
+    # via -r requirements/requirements-dev.in
+pytest==6.2.1
+    # via
+    #   -r requirements/requirements-dev.in
+    #   pytest-cov
+pytz==2020.5
+    # via tzlocal
+pyyaml==5.4.1
+    # via bandit
+six==1.15.0
+    # via
+    #   bandit
+    #   bleach
+    #   tox
+    #   virtualenv
+smmap==3.0.4
+    # via gitdb
+snowballstemmer==2.1.0
+    # via pydocstyle
+stevedore==3.3.0
+    # via bandit
+testfixtures==6.17.1
+    # via flake8-isort
+toml==0.10.2
+    # via
+    #   pytest
+    #   tox
+tox-wheel==0.6.0
+    # via -r requirements/requirements-dev.in
+tox==3.21.2
+    # via
+    #   -r requirements/requirements-dev.in
+    #   tox-wheel
+tzlocal==2.1
+    # via -r requirements/requirements.in
+versioneer==0.19
+    # via -r requirements/requirements-dev.in
+virtualenv==20.4.0
+    # via tox
+webencodings==0.5.1
+    # via bleach
+werkzeug==1.0.1
+    # via flask
+wheel==0.36.2
+    # via tox-wheel
 
 # The following packages are considered to be unsafe in a requirements file:
 # pip

requirements/requirements.in

@@ -1,3 +1,4 @@
 Flask                       # general purpose web service and web server stuff
 Markdown                    # markdown rendering in templates
+mdx-linkify                 # convert URLs in the text to clickable links
 tzlocal                     # identifying system's local timezone

requirements/requirements.txt

@@ -4,14 +4,35 @@
 #
 #    pip-compile --output-file=requirements/requirements.txt requirements/requirements.in
 #
-click==7.1.2              # via flask
-flask==1.1.2              # via -r requirements/requirements.in
-importlib-metadata==2.0.0  # via markdown
-itsdangerous==1.1.0       # via flask
-jinja2==2.11.2            # via flask
-markdown==3.3.2           # via -r requirements/requirements.in
-markupsafe==1.1.1         # via jinja2
-pytz==2020.1              # via tzlocal
-tzlocal==2.1              # via -r requirements/requirements.in
-werkzeug==1.0.1           # via flask
-zipp==3.3.1               # via importlib-metadata
+bleach==3.2.2
+    # via mdx-linkify
+click==7.1.2
+    # via flask
+flask==1.1.2
+    # via -r requirements/requirements.in
+itsdangerous==1.1.0
+    # via flask
+jinja2==2.11.2
+    # via flask
+markdown==3.3.3
+    # via
+    #   -r requirements/requirements.in
+    #   mdx-linkify
+markupsafe==1.1.1
+    # via jinja2
+mdx-linkify==2.1
+    # via -r requirements/requirements.in
+packaging==20.8
+    # via bleach
+pyparsing==2.4.7
+    # via packaging
+pytz==2020.5
+    # via tzlocal
+six==1.15.0
+    # via bleach
+tzlocal==2.1
+    # via -r requirements/requirements.in
+webencodings==0.5.1
+    # via bleach
+werkzeug==1.0.1
+    # via flask

tests/functional_tests.py

@@ -30,6 +30,15 @@ def test_page_without_title_metadata(client):
     assert b'<h1>this page doesn\'t have a title!</h1>' in response.data
 
 
+def test_page_with_card_metadata(client):
+    """Test that a page with opengraph metadata."""
+    response = client.get('/more-metadata')
+    assert response.status_code == 200
+    assert b'<meta property="og:title" content="title for the page">' in response.data
+    assert b'<meta property="og:description" content="description of this page made even longer">' in response.data
+    assert b'<meta property="og:image" content="http://buh.com/test.img">' in response.data
+
+
 def test_page_has_modified_timestamp(client):
     """Test that pages have modified timestamps in them."""
     response = client.get('/')
@@ -52,3 +61,24 @@ def test_that_dir_request_does_not_redirect(client):
     response = client.get('/subdir/')
     assert response.status_code == 200
     assert b'another page' in response.data
+
+
+def test_setting_selected_style_includes_cookie(client):
+    """Test that a request with style=foo sets the cookie and renders appropriately."""
+    response = client.get('/')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert style_cookie is None
+
+    response = client.get('/?style=light')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert response.status_code == 200
+    assert b'light.css' in response.data
+    assert b'dark.css' not in response.data
+    assert style_cookie.value == 'light'
+
+    response = client.get('/?style=dark')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert response.status_code == 200
+    assert b'dark.css' in response.data
+    assert b'light.css' not in response.data
+    assert style_cookie.value == 'dark'

tests/instance/pages/more-metadata.md

@@ -0,0 +1,6 @@
+Title:          title for the page
+Description:    description of this page
+                made even longer
+Image:          http://buh.com/test.img
+
+hello