Draft of Meso display

plugins/meso_list/directives.py

@@ -85,24 +85,29 @@ class Meso(Directive):
 # Extend default translator
 class myHTMLTranslator(PelicanHTMLTranslator):
     def __init__(self, *args, **kwargs):
+
+        # Pre-loading Jinja2 templates
+        env = Environment(
+            loader=FileSystemLoader(os.path.dirname(__file__)+'/templates/'),
+        )
+        self.meso_template = env.get_template('meso.tpl')
+
         super().__init__(*args, *kwargs)
 
     def visit_meso_list(self, node):
         super().visit_section(node)
-        self.body.append('<div class="meso_list">')
+        self.body.append('<div class="meso_list event">')
 
     def depart_meso_list(self, node):
         self.body.append('</div>')
         super().depart_section(node)
 
     def visit_meso(self, node):
-        self.body.append(f'<div class="meso"><h3>{node["name"]}</h3><dl>')
-        for key, value in node.attlist():
-            if key != 'name' and value:
-                self.body.append(f'<dt>{key}</dt><dd>{value}</dd>')
+        self.body.extend(self.meso_template.render(meso=node).splitlines(True))
 
     def depart_meso(self, node):
-        self.body.append('</div>')
+        #self.body.append('</div>')
+        pass
 
 
 # Overwrite default translator so that extensions can be chained

plugins/meso_list/templates/meso.tpl

+<div class="card">
+    <div class="card-header">
+        {% if meso['url'] %}
+        <a href="{{ meso['url'] }}">{{ meso['name'] }}</a>
+        {% else %}
+        {{ meso['name'] }}
+        {% endif %}
+    </div>
+    <div class="card-body">
+        {% if meso['contactname'] %}
+            <img src="../theme/img/mail.png" alt="Contact" height="15px"/>
+            {% if meso['contactaddress'] is defined %}
+            <a href="mailto:{{ meso['contactaddress'] }}">{{ meso['contactname'] }}</a>
+            {% else %}
+            {{ meso['contactname'] }}
+            {% endif %}
+            <br />
+        {% endif %}
+        {% if meso['institutesname'] %}
+            <img src="../theme/img/employer.png" alt="Institutions" height="15px" />
+            {% for name in meso['institutesname'] %}
+            {{ ' et ' if loop.last }}{{ name }}{{ ', ' if not loop.last }}
+            {% endfor %}
+            <br />
+        {% endif %}
+    </div>
+    <div class="card-footer p-0 d-flex align-items-center">
+    </div>
+    </a>
+</div>
+