Gravatar avatar

examples/webchat/htdocs/style.css

@@ -15,3 +15,7 @@ span#request-count.count0 {
 span#request-count-plural.count1 {
     display: none;
 }
+
+img.avatar {
+    border-radius: 24px;
+}

examples/webchat/htdocs/templates/present-entry.html

@@ -1 +1 @@
-<li>{{email}}</li>
+<li><img class="avatar" src="{{avatar}}"> {{email}}</li>

examples/webchat/htdocs/webchat.syndicate.js

@@ -108,8 +108,12 @@
           during inbound(uiTemplate("present-entry.html", $presentEntry)) {
             during inbound(present($who)) {
               var c = this.ui.context(mainpageVersion, 'present', who);
-              assert c.html('#present-entries', Mustache.render(presentEntry,
-                                                                {email: who}));
+              assert c.html('#present-entries', Mustache.render(
+                presentEntry,
+                {
+                  email: who,
+                  avatar: 'https://www.gravatar.com/avatar/' + md5(who.trim().toLowerCase()) + '?s=48&d=retro'
+                }));
             }
           }
 

examples/webchat/server/pages.rkt

@@ -42,6 +42,9 @@
                (script ((src "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js")
                         (integrity "sha256-iaqfO5ue0VbSGcEiQn+OeXxnxAMK2+QgHXIDA5bWtGI=")
                         (crossorigin "anonymous")))
+               (script ((src "https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.6.0/js/md5.min.js")
+                        (integrity "sha256-I0CACboBQ1ky299/4LVi2tzEhCOfx1e7LbCcFhn7M8Y=")
+                        (crossorigin "anonymous")))
                ;; (script ((src "/syndicatecompiler.min.js")))
                (script ((src "/syndicate.min.js")))
                (script ((src "/webchat.js")))