report: nicer citation

src/olm/outbreaks/_footer.html

@@ -1,7 +1,17 @@
-<p><strong>Data accessibility and reproducibility</strong>: All data
-    used in this report are available from our data repository Should you identify any issues or have questions please
-    raise an issue on <a href="https://github.com/globaldothealth/outbreak-data">GitHub</a> or write to
-    us: <a href="mailto:info@global.health">info@global.health</a>.</p>
-    If you cite this report, please also cite the relevant sources, which are
-    mentioned in our <a href="https://github.com/globaldothealth/outbreak-data/wiki/{{ id }}">outbreak information page</a>.
+<div id="data-citation">
+<p><strong>Data accessibility and reproducibility</strong>:
+All data used in this report are available from our data repository.
+Should you identify any issues or have questions please raise an issue on
+<a href="https://github.com/globaldothealth/outbreak-data">GitHub</a> or write to
+us: <a href="mailto:info@global.health">info@global.health</a>.
+This report may be cited as:
+</p>
+<p class="citation-text">
+Global.health {{ description }} briefing report, published {{ published_date }},<br>
+retrieved from https://reports.global.health/{{ name }}/{{ published_date }}.html
+</p>
+<p>If you cite this report, please also cite the relevant sources, which are
+mentioned in our <a href="https://github.com/globaldothealth/outbreak-data/wiki/{{ id }}">outbreak information page</a>.
+</p>
+</div>
 </main></body></html>

src/olm/report.py

@@ -51,6 +51,7 @@ def make_report(
         raise FileNotFoundError(f"Template for outbreak not found at: {template}")
     template_text = HEADER + template.read_text() + FOOTER
     var = {
+        "name": outbreak_name,
         "description": outbreak_info["description"],
         "id": outbreak_info["id"],
         "published_date": str(date),

static/style.css

@@ -153,6 +153,14 @@ p.print {
   display: none;
 }
 
+div#data-citation p {
+  font-size: 85%;
+}
+p.citation-text {
+  border-left: 2px solid #0e7569;
+  padding: 0.1rem 0.5rem;
+  width: 90%;
+}
 @media print {
   figure.mainfigure {
     page-break-before: always;