add webbadge includes

2 files changed, 21 insertions, 6 deletions

diff --git a/_includes/88x31.html b/_includes/88x31.html
new file mode 100644
index 0000000..1fe039c
--- /dev/null
+++ b/_includes/88x31.html
@@ -0,0 +1,19 @@
+{% if include.url %}
+<a href="{{ include.url }}">
+  <img
+    width="88"
+    height="31"
+    src="{{ include.image | relative_url }}"
+    alt="{{ include.alt }}"
+    style="image-rendering: pixelated; vertical-align: bottom"
+  />
+</a>
+{% else %}
+<img
+  width="88"
+  height="31"
+  src="{{ include.image | relative_url }}"
+  alt="{{ include.alt }}"
+  style="image-rendering: pixelated; vertical-align: bottom"
+/>
+{% endif %}
diff --git a/index.md b/index.md
index fbefe2d..65bba6c 100644
--- a/index.md
+++ b/index.md
@@ -61,15 +61,11 @@ In the mean time, these are my amazing friends:
 <ul style="list-style-type:none;padding:0;line-height:0;display:flex;gap:1ex;flex-wrap:wrap">
   {%- for badge in page.badges %}
   <li style="display:block">
-    <a href="{{ badge.url }}">
-      <img width="88" height="31" src="{{ badge.image | relative_url }}" alt="{{ badge.alt }}" style="image-rendering:pixelated">
-    </a>
+	{% include 88x31.html url=badge.url image=badge.image alt=badge.alt %}
   </li>
   {%- endfor %}
   <li style="display:flex;gap:1ex;align-items:center">
-    <a href="https://hizbu.com/">
-      <img width="88" height="31" src="{{ '/assets/hizbu.webp' | relative_url }}" alt="hizbu 88x31 web badge" style="image-rendering:pixelated">
-    </a>
+    {% include 88x31.html image="/assets/hizbu.webp" alt="hizbu 88x31 web badge" %}
   </li>
 </ul>