emoji tooltips

crates/treehouse/src/html/markdown.rs

@@ -463,7 +463,7 @@ where
                                 escape_html(&mut self.writer, &branch.html_id)?;
                                 self.writer.write_str("\">")?;
                             }
-                            self.writer.write_str("<img class=\"emoji\" title=\":")?;
+                            self.writer.write_str("<img is=\"th-emoji\" title=\":")?;
                             escape_html(&mut self.writer, name)?;
                             self.writer.write_str(":\" src=\"")?;
                             escape_html(&mut self.writer, &self.config.site)?;

static/css/main.css

@@ -9,6 +9,7 @@
     --link-color-visited-light: #6c2380;
 
     --background-color: rgb(255, 253, 246);
+    --background-color-tooltip: rgb(226, 223, 214);
     --text-color: #55423e;
     --link-color: #004ec8;
     --link-color-visited: #6c2380;
@@ -22,6 +23,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --background-color: rgb(30, 40, 53);
+        --background-color-tooltip: rgb(23, 31, 41);
         --text-color: #d7cdbf;
         --link-color: #93cce8;
         --link-color-visited: #f7afde;
@@ -271,13 +273,55 @@ nav .logo {
 
 /* Style emojis to be readable */
 
-img.emoji {
+img[is="th-emoji"] {
     max-width: 1.5em;
     max-height: 1.5em;
     vertical-align: bottom;
     object-fit: contain;
 }
 
+/* And also style emoji tooltips. */
+
+.emoji-wrapper {
+    position: relative;
+}
+
+.emoji-tooltip {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    z-index: 100;
+
+    background-color: var(--background-color-tooltip);
+    padding: 8px;
+    margin-top: 8px;
+    border-radius: 6px;
+}
+
+.emoji-wrapper:hover .emoji-tooltip {
+    display: flex;
+}
+
+.emoji-tooltip img {
+    display: block;
+    max-width: 64px;
+    max-height: 64px;
+}
+
+.emoji-tooltip p {
+    --recursive-wght: 550;
+    color: var(--text-color);
+    font-size: 0.75em;
+    margin: 0;
+    padding-top: 4px;
+    line-height: 1;
+}
+
 /* Funny joke */
 
 @keyframes hello-there {

static/js/emoji.js

@@ -0,0 +1,30 @@
+// Emoji zoom-in functionality.
+
+class Emoji extends HTMLImageElement {
+    constructor() {
+        super();
+
+        this.wrapper = document.createElement("span");
+        this.wrapper.className = "emoji-wrapper";
+        this.replaceWith(this.wrapper);
+        this.wrapper.appendChild(this);
+
+        this.enlarged = new Image();
+        this.enlarged.src = this.src;
+
+        this.titleElement = document.createElement("p");
+        this.titleElement.innerText = this.title;
+
+        this.tooltip = document.createElement("div");
+        this.tooltip.className = "emoji-tooltip";
+        this.tooltip.appendChild(this.enlarged);
+        this.tooltip.appendChild(this.titleElement);
+
+        this.wrapper.appendChild(this.tooltip);
+
+        this.alt = this.title;
+        this.title = "";
+    }
+}
+
+customElements.define("th-emoji", Emoji, { extends: "img" });

template/tree.hbs

@@ -19,8 +19,9 @@
 
     <script>const TREEHOUSE_SITE = `{{ config.site }}`;</script>
     <script type="module" src="{{ config.site }}/navmap.js"></script>
-    <script type="module" src="{{ config.site }}/static/js/tree.js"></script>
     <script type="module" src="{{ config.site }}/static/js/usability.js"></script>
+    <script type="module" src="{{ config.site }}/static/js/tree.js"></script>
+    <script type="module" src="{{ config.site }}/static/js/emoji.js"></script>
     <script type="module" src="{{ config.site }}/static/js/thanks-webkit.js"></script>
 </head>