add motd editor and motd display

app/templates/common/icons.html

@@ -10,6 +10,10 @@
 <img src="/static/icons/error.svg" alt="error" style="width: {{width}}px;">
 {%- endmacro -%}
 
+{%- macro icn_megaphone(width=48) -%}
+<img src="/static/icons/megaphone.svg" alt="megaphone" style="width: {{width}}px;">
+{%- endmacro -%}
+
 {%- macro icn_bookmark(width=16) -%}
 <img src="/static/icons/bookmark.svg" alt="bookmark" style="width: {{width}}px;">
 {%- endmacro -%}

app/templates/common/macros.html

@@ -1,4 +1,4 @@
-{%- from 'common/icons.html' import icn_info, icn_warn, icn_error, icn_bookmark -%}
+{%- from 'common/icons.html' import icn_info, icn_warn, icn_error, icn_bookmark, icn_megaphone -%}
 
 {% macro timestamp(unix_ts) -%}
 <time datetime="{{ unix_ts | iso8601 }}">{{ unix_ts | ts_datetime('%Y-%m-%d %H:%M')}} <abbr title="Server Time">ST</abbr></time>
@@ -238,3 +238,18 @@
   {%- endif -%}
 </div>
 {%- endmacro %}
+
+{% macro motd(motd_objs) -%}
+{%- if motd_objs -%}
+<div class="motd plank contrast-bg">
+  <div class="contain-svg">
+    {{ icn_megaphone(64) }}
+    <i><abbr title="Message of the Day">MOTD</abbr></i>
+  </div>
+  <div class="motd-content mobile-fill-flex">
+    <h2 class="info">{{ motd_objs[0].title }}</h2>
+    <div class="motd-body">{{ motd_objs[0].body_rendered | safe }}</div>
+  </div>
+</div>
+{%- endif -%}
+{%- endmacro %}