Add admonition prototype

pelicanconf.py

@@ -46,6 +46,14 @@ MARKDOWN = {
     'extensions' : ['toc'],
     'extension_configs': {
         'markdown.extensions.toc': {'anchorlink': 'true'},
+        'markdown.extensions.admonition': {},
     },
     'output_format': 'html5',
 }
+
+DONATION_MESSAGES = [
+    'Like what we\'re doing? Consider donating to help us out 🙏',
+    'Help us keep the lights on around here by donating to the project 💡',
+    'Funkwhale is free software, but developing it still requires money. Consider donating to help us keep going 💪',
+    '❤️ Funkwhale? Why not help us out by donating what you can?'
+]

theme/funkwhale/static/css/style.css

@@ -272,3 +272,37 @@ img {
   height: 32px;
   filter: invert(100%);
   }
+
+.admonition {
+  clear: both;
+  background: #e7f2fa;
+  padding-top: 12px;
+  padding-left: 12px; 
+  padding-right: 12px;
+  line-height: 24px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+  text-align: right;
+  border-radius: 8px;
+}
+
+.admonition p {
+  text-align: left;
+}
+
+.admonition-title {
+  font-weight:700;
+  display:block;
+  color:#fff;
+  background:#6ab0de;
+  padding:6px 12px;
+  margin:-12px -12px 12px;
+  box-sizing: border-box;
+  text-align: left;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.admonition a {
+  margin-right: -12px;
+}

theme/funkwhale/templates/article.html

 {% extends "base.html" %}
+{% import "donations.html" as donations with context %}
 {% block head %}
     {{ super() }}
     <!-- Facebook Meta Data -->
@@ -14,6 +15,10 @@
                                                   title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
             <div class="entry-content blog-post">
                 {{ article.content }}
+                {% if article.donation %}
+                <br>
+                {{ donations }}
+                {% endif %}
             </div>
             <div class="post_list">
                 <span>By </span>

theme/funkwhale/templates/donations.html

+{% block content %}
+<div class="admonition">
+   <p class="admonition-title">Want to help?</p>
+   <p>{{ DONATION_MESSAGES|random }} </p>
+   <a class="button is-primary" href="https://funkwhale.audio/en_US/support-us">Support us!</a>
+</div>
+{% endblock %}
\ No newline at end of file