Improve layout a bit

pulkka/massage_outputs.py

@@ -1,3 +1,4 @@
+import base64
 import datetime
 import glob
 import io
@@ -14,11 +15,15 @@ TEMPLATE_DIR = os.path.realpath("./template")
 
 
 def write_massaged_files(env, df):
-    with open(OUT_DIR / 'data.html', 'w') as f:
+    with open(OUT_DIR / "data.html", "w") as f:
         with io.StringIO() as s:
             df.to_html(s, index=False, na_rep="", border=0)
             table_html = s.getvalue()
-        f.write(env.get_template('_table.html').render(table_html=table_html, body_class="table-body"))
+        f.write(
+            env.get_template("_table.html").render(
+                table_html=table_html, body_class="table-body"
+            )
+        )
     df.to_csv(OUT_DIR / "data.csv", index=False)
     df.to_excel(OUT_DIR / "data.xlsx", index=False)
     df.to_json(
@@ -44,19 +49,32 @@ def render_statics(env):
         print(filename, "=>", out_filename)
 
 
+def read_asset_to_data_uri(filename, content_type):
+    with open(filename, "rb") as f:
+        return (
+            f"data:{content_type};base64,{base64.b64encode(f.read()).decode('ascii')}"
+        )
+
+
 def main():
     df = read_data()
     env = jinja2.Environment(
         autoescape=True,
         loader=jinja2.FileSystemLoader(TEMPLATE_DIR),
     )
-    env.globals.update({
+    env.globals.update(
-        "date": datetime.datetime.utcnow(),
+        {
-        "pd": pandas,
+            "date": datetime.datetime.utcnow(),
-        "np": numpy,
+            "pd": pandas,
-        "df": df,
+            "np": numpy,
-        "year": YEAR,
+            "df": df,
-    })
+            "year": YEAR,
+            "logo_svg": read_asset_to_data_uri(
+                os.path.join(TEMPLATE_DIR, "logo.svg"), "image/svg+xml"
+            ),
+            "site_url": f"https://koodiklinikka.github.io/palkkakysely/{YEAR}/",
+        }
+    )
     render_statics(env)
     write_massaged_files(env, df)
 

template/index.html

@@ -1,6 +1,10 @@
 {% extends "_base.html" %}
-{% block title %}Koodiklinikan palkkakysely, {{ year }}{% endblock %}
 {% block body %}
+    <header>
+        <a href="https://koodiklinikka.fi">
+            <img src="{{ logo_svg }}" alt="koodiklinikan logo" style="height: 3em">
+        </a>
+    </header>
     <h1>Koodiklinikan palkkakysely, {{ year }}</h1>
     <h2>Tunnusluvut</h2>
     <ul>
@@ -29,6 +33,7 @@
         <li><a href="raw.tsv">Raakadata (TSV)</a></li>
         <li><a href="raw.xlsx">Raakadata (XLSX)</a></li>
     </ul>
+    Viittaathan dataa käyttäessäsi tähän sivustoon: <a href="{{ site_url }}">{{ site_url }}</a>
 {% endblock %}
 {% block footer %}
     <footer>

template/style.css

@@ -1,11 +1,11 @@
 body {
-    padding: 0 10px;
+    padding: 1em;
     font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 body.static-body {
     max-width: 650px;
-    margin: 40px auto;
+    margin: auto;
 }
 
 body.table-body {
@@ -23,7 +23,15 @@ body.table-body td, body.table-body th {
 }
 
 h1, h2, h3 {
-    line-height: 1.2
+    line-height: 1.2;
+}
+
+a:link {
+    color: #2181b7;
+}
+
+a:visited {
+    color: #4e1ecb;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -40,3 +48,16 @@ h1, h2, h3 {
         color: #ccf
     }
 }
+
+header {
+    border-bottom: 2px solid #2a6180;
+    padding-bottom: 1em;
+    line-height: 1;
+}
+
+footer {
+    border-top: 2px solid #2a6180;
+    padding: 1em;
+    margin-top: 1em;
+    text-align: center;
+}