From 13fe7f5f62f86f1c97d69aaadb8621c22647fd18 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sun, 21 Feb 2021 17:03:49 +0100
Subject: [PATCH] Added a blog to the site.

---
 assets/css/style.css             | 46 ++++++++++++++++++++++++++++++++
 content/blog/contents.lr         |  3 +++
 databags/navigation.json         |  4 +--
 models/blog-post.ini             | 23 ++++++++++++++++
 models/blog.ini                  | 16 +++++++++++
 templates/blog-post.html         | 10 +++++++
 templates/blog.html              | 17 ++++++++++++
 templates/macros/blog.html       | 22 +++++++++++++++
 templates/macros/pagination.html | 23 ++++++++++++++++
 9 files changed, 162 insertions(+), 2 deletions(-)
 create mode 100644 content/blog/contents.lr
 create mode 100644 models/blog-post.ini
 create mode 100644 models/blog.ini
 create mode 100644 templates/blog-post.html
 create mode 100644 templates/blog.html
 create mode 100644 templates/macros/blog.html
 create mode 100644 templates/macros/pagination.html

diff --git a/assets/css/style.css b/assets/css/style.css
index c615c9b0..3845aabf 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -500,6 +500,19 @@ li {
     margin-left: 1rem;
 }
 
+i {
+    font-family: 'Lato Italic', sans-serif;
+}
+
+hr {
+    color: var(--nearly-black);
+    margin: 0.25rem 0;
+}
+
+hr.-even {
+    color: var(--wtf-light-grey);
+}
+
 .content {
     padding: 1.5rem 0;
     width: 100%;
@@ -508,6 +521,18 @@ li {
     justify-content: center;
 }
 
+.content__blog_link.-odd {
+    color: var(--nearly-black) !important;
+}
+
+.content__blog_link.-even {
+    color: var(--wtf-very-light-blue) !important;
+}
+
+.content__blog_link:hover {
+    color: var(--wtf-mid-grey) !important;
+}
+
 .content__box {
     margin: 0 auto;
     padding: 0;
@@ -529,6 +554,10 @@ li {
     color: var(--wtf-dark-blue);
 }
 
+.pagination__anchor.-even:visited {
+    color: var(--wtf-light-blue);
+}
+
 .content__inner_box.-logo_header {
     margin: 3.5rem 1.5rem 0 1.5rem;
 }
@@ -537,6 +566,19 @@ li {
     margin: -0.5rem 1.5rem 0 1.5rem;
 }
 
+.content__pagination {
+    text-align: center;
+}
+
+
+.content__pagination.-even {
+    color: var(--wtf-light-grey);
+}
+
+.pagination__anchor.-even {
+
+}
+
 .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
     width: 100%;
     max-width: 1200px;
@@ -544,6 +586,10 @@ li {
     widows: 2;
 }
 
+.content__box.-heading {
+    margin-bottom: 1.5rem;
+}
+
 .content__box.-columns {
     -webkit-column-count: var(--column-count);
     -moz-column-count: var(--column-count);
diff --git a/content/blog/contents.lr b/content/blog/contents.lr
new file mode 100644
index 00000000..b49311ad
--- /dev/null
+++ b/content/blog/contents.lr
@@ -0,0 +1,3 @@
+_model: blog
+---
+title: Aktuelles
diff --git a/databags/navigation.json b/databags/navigation.json
index 9be06ce1..e2a05b2f 100644
--- a/databags/navigation.json
+++ b/databags/navigation.json
@@ -17,8 +17,8 @@
   },
   "Aktuelles": {
     "href": "/blog",
-    "visible": false,
-    "list_childs": true,
+    "visible": true,
+    "list_childs": false,
     "items": {}
   },
   "Kontakt": {
diff --git a/models/blog-post.ini b/models/blog-post.ini
new file mode 100644
index 00000000..e097be34
--- /dev/null
+++ b/models/blog-post.ini
@@ -0,0 +1,23 @@
+[model]
+name = Blog Post
+label = {{ this.title }}
+hidden = yes
+
+[fields.title]
+label = Title
+type = string
+size = large
+
+[fields.author]
+label = Author
+type = string
+width = 1/2
+
+[fields.pub_date]
+label = Publication date
+type = date
+width = 1/2
+
+[fields.body]
+label = Body
+type = markdown
diff --git a/models/blog.ini b/models/blog.ini
new file mode 100644
index 00000000..0a3a3ca1
--- /dev/null
+++ b/models/blog.ini
@@ -0,0 +1,16 @@
+[model]
+name = Blog
+label = Blog
+hidden = yes
+
+[fields.title]
+label = Title
+type = string
+
+[children]
+model = blog-post
+order_by = -pub_date, title
+
+[pagination]
+enabled = yes
+per_page = 10
diff --git a/templates/blog-post.html b/templates/blog-post.html
new file mode 100644
index 00000000..33dc66ce
--- /dev/null
+++ b/templates/blog-post.html
@@ -0,0 +1,10 @@
+{% extends "header_slim.html" %}
+{% from "macros/blog.html" import render_blog_post %}
+<div class="content__box">
+    <div class="content__inner_box">
+        <h1>{{ this.title }}</h1>
+    </div>
+</div>
+{% block body %}
+    {{ render_blog_post(this) }}
+{% endblock %}
diff --git a/templates/blog.html b/templates/blog.html
new file mode 100644
index 00000000..154cd323
--- /dev/null
+++ b/templates/blog.html
@@ -0,0 +1,17 @@
+{% extends "header_slim.html" %}
+{% from "macros/blog.html" import render_blog_post %}
+{% from "macros/pagination.html" import render_pagination %}
+
+{% block body %}
+    <div class="content__box">
+        <div class="content__inner_box">
+            <h1>{{ this.title }}</h1>
+        </div>
+    </div>
+    {% for blog_post in this.pagination.items %}
+        {{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }}
+        {% if loop.index == loop.length %}
+            {{ render_pagination(this.pagination, loop.length is odd) }}
+        {% endif %}
+    {% endfor %}
+{% endblock %}
diff --git a/templates/macros/blog.html b/templates/macros/blog.html
new file mode 100644
index 00000000..062a57fb
--- /dev/null
+++ b/templates/macros/blog.html
@@ -0,0 +1,22 @@
+{% macro render_blog_post(post, from_index=false, section_class='-odd') %}
+    <section class="content {{ section_class }}">
+        <div class="content__box -heading">
+            <div class="content__inner_box">
+                {% if from_index %}
+                    <h2><a class="content__blog_link {{ section_class }}" href="{{ post|url }}">{{ post.title }}</a></h2>
+                {% else %}
+                    <h2>{{ post.title }}</h2>
+                {% endif %}
+                <hr class="{{ section_class }}">
+                <p class="content__meta">
+                    <i>geschrieben von {{ post.author }} am {{ post.pub_date }}</i>
+                </p>
+            </div>
+        </div>
+        <div class="content__box -columns">
+            <div class="content__inner_box">
+                {{ post.body }}
+            </div>
+        </div>
+    </section>
+{% endmacro %}
diff --git a/templates/macros/pagination.html b/templates/macros/pagination.html
new file mode 100644
index 00000000..f733c2cf
--- /dev/null
+++ b/templates/macros/pagination.html
@@ -0,0 +1,23 @@
+{% macro render_pagination(pagination, odd) %}
+    {% if pagination.has_next or pagination.has_prev %}
+        <section class="content {% if odd %}-odd{% else %}-even{% endif %}">
+            <div class="content__box">
+                <div class="content__inner_box">
+                    <div class="content__pagination {% if odd %}-odd{% else %}-even{% endif %}">
+                        {% if pagination.has_prev %}
+                            <a class="pagination__anchor {% if odd %}-odd{% else %}-even{% endif %}" href="{{ pagination.prev|url }}">&laquo; Previous</a>
+                        {% else %}
+                            <span class="pagination__disabled">&laquo; Previous</span>
+                        {% endif %}
+                        | {{ pagination.page }} |
+                        {% if pagination.has_next %}
+                            <a class="pagination__anchor {% if odd %}-odd{% else %}-even{% endif %}" href="{{ pagination.next|url }}">Next &raquo;</a>
+                        {% else %}
+                            <span class="pagination__disabled">Next &raquo;</span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </section>
+    {% endif %}
+{% endmacro %}