Merge pull request #26 from Ayreonaut/fotogrid

Fotogrid & some cosmetics 3

app.py

@@ -1,15 +1,38 @@
 #!/usr/bin/env python3
 # SPDX-License-Identifier: GPL-3.0
 # vim: set sw=4 ts=4 ex
-from flask import Flask, render_template, url_for
+from flask import Flask, render_template, render_template_string, url_for
 from flask_flatpages import FlatPages
+from flask_flatpages.utils import pygmented_markdown
 from flask_fontawesome import FontAwesome
 from datetime import datetime
+from fotogrid import fotogrid
 
+
+# directly support jinja within markdown blogposts
+# https://flask-flatpages.readthedocs.io/en/v0.7.1/
+def markdown_with_jinja_renderer(text):
+    prerendered_body = render_template_string(text)
+    return pygmented_markdown(prerendered_body)
+
+
+# function to reformat date from blog posts for better
+# visualization on the pages
+def format_date_string(date_string):
+    date = datetime.strptime(date_string, "%d.%m.%Y")
+    return date.strftime("%d. %B %Y")
+
+
+# create app
 app = Flask(__name__)
 app.config['FLATPAGES_EXTENSION'] = '.md'
+app.config['FLATPAGES_HTML_RENDERER'] = markdown_with_jinja_renderer
 app.config['FONTAWESOME_STYLES'] = ['solid', 'brands']
 
+# register fotogrid with jinja
+app.jinja_env.globals.update(fotogrid=fotogrid)
+app.jinja_env.globals.update(format_date_string=format_date_string)
+
 pages = FlatPages(app)
 fa = FontAwesome(app)
 

fotogrid.py

@@ -0,0 +1,20 @@
+# Provide a simple responsive fotogrid using flex layout.
+# Depends on the css/fotogrid.css defined styles.
+def fotogrid(image_urls):
+    result = '<div class="fotorow">'
+    cols = 4
+    images = divmod(len(image_urls), cols)
+    images_per_col = images[0]
+    if images[1] > 0:
+        images_per_col += 1
+    nbr = 0
+    for img in image_urls:
+        if (nbr % images_per_col) == 0:
+            if nbr > 0:
+                result += '</div>'  # closing fotocolumn
+            result += '<div class="fotocolumn">'
+        result += '<img src="' + img + '" style="width:100%">'
+        nbr += 1
+
+    result += "</div></div>"  # closing fotocolum, fotorow
+    return result

pages/wacken2019.md

@@ -103,4 +103,7 @@ Eine weiteres Spektakel steht uns noch mit der _30th Anniversary Show_ bevor, di
 **Parkway Drive**  ziehen mit einem Fackelzug direkt durch die Menge auf die Bühne, eröffnen mit _Wishing Wells_ und _Prey_ und kündigen danach an, dass der Gig beinahe ausfallen musste, da sich der Bassist ein Knie gebrochen hatte. Sänger _Winston McCall_ kündigt daraufhin an: „Please welcome our new and improved bass player on a wheel chair!“ und Bassist _Jia O’Connor_ wird von seiner Mutter (!) im Rollstuhl auf die Bühne geschoben. Diese wiederum nutzt die Gelegenheit und startet zu _Carrion_ in die Menge, um zum ersten Mal in ihrem Leben zu crowdsurfen. Wie die Menge sie feiert!
 
 ## So 04.08.2019, Trennungsschmerz 
-Tja, am Sonntag ist dann wieder alles vorbei. Schade. Es löst sich auf, man verabschiedet sich und fährt wieder heim. Bei der Abfahrt vom Platz begegnen uns nochmal zufällig die Wabers und wir winken uns von Auto zu Auto zu, bevor wir uns in die Abreiseschlange einsortieren, diese aber bald wieder verlassen, da wir noch ein paar Tage an der Ostsee daranhängen werden. Schön war’s!
+Tja, am Sonntag ist dann wieder alles vorbei. Schade. Es löst sich auf, man verabschiedet sich und fährt wieder heim. Bei der Abfahrt vom Platz begegnen uns nochmal zufällig die Wabers und wir winken uns von Auto zu Auto zu, bevor wir uns in die Abreiseschlange einsortieren, diese aber bald wieder verlassen, da wir noch ein paar Tage an der Ostsee daranhängen werden. Schön war’s!
+
+<hr/>
+{{ fotogrid(["static/img/woa2019_01.jpg", "static/img/woa2019_02.jpg", "static/img/woa2019_03.jpg", "static/img/woa2019_04.jpg", "static/img/woa2019_05.jpg", "static/img/woa2019_06.jpg", "static/img/woa2019_07.jpg", "static/img/woa2019_08.jpg", "static/img/woa2019_09.jpg", "static/img/woa2019_10.jpg", "static/img/woa2019_11.jpg", "static/img/woa2019_12.jpg", "static/img/woa2019_13.jpg", "static/img/woa2019_14.jpg"])|safe }}

static/css/fotogrid.css

@@ -0,0 +1,35 @@
+
+
+.fotorow {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.fotocolumn {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+.fotocolumn img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 1000px) {
+  .fotocolumn {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media (max-width: 800px) {
+  .fotocolumn {
+    flex: 100%;
+    max-width: 100%;
+  }
+}

static/css/style.css

@@ -14,7 +14,7 @@ html {
 }
 
 body {
-    text-size-adjust:100%
+    text-size-adjust:100%;
     background-attachment: fixed;
     background-color: #000000;
     color: rgba(255, 255, 255, 0.75);
@@ -57,6 +57,11 @@ h2 {
     margin-top:1rem
 }
 
+hr  {
+    border: 1px solid #c11012;
+    border-radius: 2px;
+}
+
 #sidebar {
     flex: 0 0 auto;
     padding:2rem

templates/index.html

@@ -6,7 +6,7 @@
   {% for page in pages %}
   <a href="{{ page.path }}.html"><h2>{{ page.title }}</h2></a>
   <p> {{ page.description }} </p>
-  <p> {{ page.date }} </p>
+  <p><small>{{ format_date_string(page.date) }} </small></p>
   <hr>
   {% endfor %}
 {% endblock %}

templates/page.html

@@ -2,5 +2,6 @@
 {% block content %}
  <h1>{{ page.title }}</h1>
  <p>{{page.html|safe }}</p>
- <strong>{{ page.author }}</strong> {{ page.date }}
+ <hr/>
+ <strong><span class="fas fa-user">&nbsp;</span>{{ page.author }}</strong> — {{ format_date_string(page.date) }}
 {% endblock %}

templates/template.html

@@ -3,8 +3,10 @@
   <head>
     <!-- CSS -->
     {{ fontawesome_html() }}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="fotogrid stylesheet" href="{{ url_for('static', filename='css/fotogrid.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <title>FdgL - Freunde des geordneten Lärms</title>
   </head>
   <body class=post>
     <div id="sidebar">

tests/conftest.py

@@ -3,6 +3,7 @@ import pytest
 
 from app import app as flask_app
 
+
 @pytest.fixture
 def app():
     yield flask_app

tests/test_index.py

@@ -1,6 +1,7 @@
 # SPDX-License-Identifier: GPL-3.0
 import os
 
+
 def test_index_html(app, client):
     res = client.get('/index.html')
     assert res.status_code == 200

tests/test_page_generation.py

@@ -1,6 +1,7 @@
 # SPDX-License-Identifier: GPL-3.0
 import os
 
+
 def test_index(app, client):
     for f in os.listdir('pages'):
         if not f.endswith('.md'):

tests/test_static_pages.py

@@ -7,6 +7,7 @@ import sys
 import pytest
 import pytest_cov.embed
 
+
 def test_static_pages(app, client):
     
     for f in os.listdir('templates'):