Implement support for shim avatar display

requirements.txt

@@ -1,3 +1,4 @@
 aiohttp~=3.6
 quart~=0.11
 flask-wtf~=0.14
+hsluv~=0.0.2

snikket_web/__init__.py

@@ -7,6 +7,7 @@ from quart import (
     Quart, session, request, render_template, redirect, url_for, Response
 )
 
+from . import colour
 from .prosodyclient import client
 
 app = Quart(__name__)
@@ -92,7 +93,8 @@ def proc():
         )
 
     return {
-        "url_for_avatar": url_for_avatar
+        "url_for_avatar": url_for_avatar,
+        "text_to_css": colour.text_to_css,
     }
 
 

snikket_web/colour.py

@@ -0,0 +1,32 @@
+import functools
+import hashlib
+
+import hsluv
+
+# This is essentially an implementation of XEP-0392.
+
+
+def clip_rgb(r, g, b):
+    return (
+        min(max(r, 0), 1),
+        min(max(g, 0), 1),
+        min(max(b, 0), 1),
+    )
+
+
+@functools.lru_cache(128)
+def text_to_colour(text):
+    MASK = 0xffff
+    h = hashlib.sha1()
+    h.update(text.encode("utf-8"))
+    hue = (int.from_bytes(h.digest()[:2], "little") & MASK) / MASK
+    r, g, b = hsluv.hsluv_to_rgb((hue * 360, 75, 60))
+    # print(text, cb, cr, r, g, b)
+    r, g, b = clip_rgb(r, g, b)
+    return r, g, b
+
+
+def text_to_css(text):
+    return "#{:02x}{:02x}{:02x}".format(
+        *(round(v * 255) for v in text_to_colour(text))
+    )

snikket_web/scss/app.scss

@@ -648,6 +648,13 @@ button.lv-tertiary, .button.lv-tertiary {
 	@media screen and (max-width: $small-screen-threshold) {
 		font-size: $_top-h-small-size;
 	}
+
+	text-align: center;
+
+	& > span:before {
+		color: $gray-900;
+		content: attr(data-avatar-char);
+	}
 }
 
 nav.usermenu > .avatar {

snikket_web/templates/library.j2

@@ -2,9 +2,10 @@
 <aside class="box{% if slim %} slim{% endif %} {{ type }}"><header>{{ title }}</header> {{ caller() }}</aside>
 {% endmacro %}
 
-{% macro avatar(from_, hash, caller=None) -%}
+{% macro avatar(from_, hash, char=None, caller=None) -%}
 {%- if hash -%}
 <div class="avatar" style="background-image: url('{{ url_for_avatar(from_, hash) }}');"></div>
 {%- else -%}
+<div class="avatar shim" style="background-color: {{ text_to_css(from_) }}"><span data-avatar-char="{{ char or from_[0] }}"></span></div>
 {%- endif -%}
 {%- endmacro %}