1 files changed, 33 insertions, 6 deletions
diff --git a/templates/badge.svg.jinja b/templates/badge.svg.jinja
index 64117b8..fe2da3f 100644
--- a/templates/badge.svg.jinja
+++ b/templates/badge.svg.jinja
@@ -1,12 +1,39 @@
+{%- set ROW_HEIGHT = 24 -%}
+{%- set ROW_MARGIN = 2 -%}
+{%- set FONT_SIZE_PERCENT = 75 -%}
+{%- set FONT_SIZE = (ROW_HEIGHT - ROW_MARGIN) * FONT_SIZE_PERCENT / 100 -%}
+{%- set ROWS = 1 + versions|length + (versions.items()|map('length')|sum) -%}
+{%- set OUTER_MARGIN = 5 -%}
+{%- set REPO_LEFT_MARGIN = 15 -%}
+{%- set FONT_WIDENESS = 0.5 -%}
+{# ugh. just ugh. #}
+{%- set ns = namespace(longest_repo = 0, longest_version = 0) -%}
+{%- for family_contents in versions.values() -%}
+    {%- set this_longest_repo = family_contents.keys()|map('length')|max -%}
+    {%- set this_longest_version = family_contents.values()|map('string')|map('length')|max -%}
+    {%- set ns.longest_repo = [ns.longest_repo, this_longest_repo]|max -%}
+    {%- set ns.longest_version = [ns.longest_version, this_longest_version]|max -%}
+{%- endfor -%}
+{%- set VERSION_X = OUTER_MARGIN + REPO_LEFT_MARGIN + ns.longest_repo * FONT_WIDENESS * FONT_SIZE -%}
+{%- set VERSION_WIDTH = OUTER_MARGIN + ns.longest_version * FONT_WIDENESS * FONT_SIZE -%}
+{%- set WIDTH = VERSION_X + VERSION_WIDTH -%}
+{%- set ns = namespace(y = 0) -%}
+{%- macro y(offset=0) -%}{{ ns.y + offset }}{%- endmacro -%}
+{%- macro texty() -%}{{ y(FONT_SIZE) }}{%- endmacro -%}
+{%- macro end_row() -%}{%- set ns.y = ns.y + ROW_HEIGHT %}{%- endmacro -%}
 <?xml version="1.0" encoding="utf-8" ?>
-<svg width="690" height="420" xmlns="http://www.w3.org/2000/svg">
-    {% set ns = namespace(y = 20) %}
-    <text x="0" y="{{ ns.y }}{% set ns.y = ns.y + 20 %}">Packaging Status</text>
+<svg width="{{ WIDTH }}" height="{{ ROWS * ROW_HEIGHT }}" xmlns="http://www.w3.org/2000/svg" fill="white" font-size="{{ FONT_SIZE }}">
+    <rect x="0" y="0" width="100%" height="100%" fill="black"></rect>
+    <text x="5" y="{{ texty() }}" fill="white">Packaging Status</text>
+    <line x1="0" y1="{{ y(ROW_HEIGHT - ROW_MARGIN / 2) }}" x2="{{ WIDTH }}" y2="{{ y(ROW_HEIGHT - ROW_MARGIN / 2) }}"
+          stroke="white" stroke-width="{{ ROW_MARGIN }}"></line>{{ end_row() }}
     {% for family, family_contents in versions.items() %}
-        <text x="10" y="{{ ns.y }}{% set ns.y = ns.y + 20 %}">{{ family }}</text>
+        <text x="{{ OUTER_MARGIN }}" y="{{ texty() }}">{{ family }}</text>{{ end_row() }}
         {% for repo, version in family_contents.items() %}
-            <text x="20" y="{{ ns.y }}">{{ repo }}</text>
-            <text x="300" y="{{ ns.y }}{% set ns.y = ns.y + 20 %}">{{ version }}</text>
+            <text x="{{ REPO_LEFT_MARGIN }}" y="{{ texty() }}">{{ repo }}</text>
+            <rect x="{{ VERSION_X }}" y="{{ y() }}" width="{{ VERSION_WIDTH }}" height="{{ ROW_HEIGHT }}"
+                  fill="{% if version < newest_version %}red{% else %}green{% endif %}"></rect>
+            <text x="{{ VERSION_X + OUTER_MARGIN }}" y="{{ texty() }}">{{ version }}</text>{{ end_row() }}
         {% endfor %}
     {% endfor %}
 </svg>