Fixes for popupcards and project avatar in popupcard (#543)

- Fixes #389
- Fixes issue with project popupcard, where we were still using Dicebear

----

- Reorder data binding in popupcards to use loading state on correct
element
- Update project popupcard to use readthedocs-avatar instead of dicebear
- Alter CSS rules to support readthedocs-avatar in FUI better

[Screencast From 2024-12-11
20-10-34.webm](https://github.com/user-attachments/assets/e7311057-a6f4-4d13-b92b-f561e18bf266)


![image](https://github.com/user-attachments/assets/d611010b-d8fd-42c7-90fa-b506228c12d2)

Author: agjohnson

.pre-commit-config.yaml

@@ -4,7 +4,8 @@ repos:
     hooks:
       - id: prettier
         args: ["--write", "."]
-        types_or: [css, javascript, json]
+        # Prettier should already do this for us, see `.prettierignore`.
+        #types_or: [css, javascript, json]
 
   - repo: https://github.com/ambv/black
     rev: "23.9.1"

readthedocsext/theme/static/readthedocsext/theme/css/site.css

@@ -67,10 +67,9 @@
       </div>
     {% endblock chip_detail %}
   </a>
-  <div class="ui flowing popup"
-       data-bind="using: data, css: { loading: is_loading() }">
+  <div class="ui flowing popup" data-bind="using: data">
     <div class="ui small basic horizontal card"
-         data-bind="if: $parent.is_loaded()">
+         data-bind="css: { loading: $parent.is_loading() }">
 
       {% comment "rst" %}
 
@@ -83,7 +82,7 @@
       {% block popupcard_image %}
       {% endblock popupcard_image %}
 
-      <div class="content">
+      <div class="content" data-bind="if: $parent.is_loaded()">
 
         {% comment "rst" %}
 
@@ -136,7 +135,7 @@
         </div>
       </div>
 
-      <div class="extra content">
+      <div class="extra content" data-bind="if: $parent.is_loaded()">
         {% comment "rst" %}
 
             .. describe:: popupcard_extra

readthedocsext/theme/static/readthedocsext/theme/js/site.js

@@ -1,8 +1,7 @@
 {% extends "includes/elements/chips/base.html" %}
 
-{% load i18n %}
-{% load humanize %}
-{% load ext_theme_tags %}
+{% load trans from i18n %}
+{% load readthedocs_language_name from ext_theme_tags %}
 
 {% block chip_view_params %}
   '{% url "projects-detail" project.slug %}'
@@ -17,19 +16,7 @@
 {% endblock chip_classes %}
 
 {% block chip_icon %}
-  {% if project.remote_repository %}
-    <img alt="{% blocktrans with name=project.name %}Project {{ name }} avatar{% endblocktrans %}"
-         src="{{ project.remote_repository.avatar_url }}" />
-  {% else %}
-    {% comment %}
-      For now, this is using Dicebear, which has a few random generators for
-      user/project icons. We don't need to use Dicebear, but could use this or
-      similar to generate files on disk and use an md5 hash or similar to link
-      to the same image always.
-    {% endcomment %}
-    <img alt="{% blocktrans with name=project.name %}Project {{ name }} avatar{% endblocktrans %}"
-         src="https://api.dicebear.com/5.x/shapes/svg?size=64&backgroundColor=b8abd4&shape1Color=8c74c1&shape2Color=7854c5&shape3Color=f0f0ff&seed={{ project.pk }}" />
-  {% endif %}
+  {% include "projects/includes/project_image.html" with project=project classes="micro rounded" %}
 {% endblock chip_icon %}
 
 {% block chip_text %}
@@ -48,21 +35,7 @@
 {% endblock popupcard_header %}
 
 {% block popupcard_right %}
-  {% if project.remote_repository %}
-    <img alt="{% blocktrans with name=project.name %}Project {{ name }} avatar{% endblocktrans %}"
-         class="ui mini right floated rounded image"
-         src="{{ project.remote_repository.avatar_url }}" />
-  {% else %}
-    {% comment %}
-      For now, this is using Dicebear, which has a few random generators for
-      user/project icons. We don't need to use Dicebear, but could use this or
-      similar to generate files on disk and use an md5 hash or similar to link
-      to the same image always.
-    {% endcomment %}
-    <img alt="{% blocktrans with name=project.name %}Project {{ name }} avatar{% endblocktrans %}"
-         class="ui mini right floated rounded image"
-         src="https://api.dicebear.com/5.x/shapes/svg?size=64&backgroundColor=b8abd4&shape1Color=8c74c1&shape2Color=7854c5&shape3Color=f0f0ff&seed={{ project.pk }}" />
-  {% endif %}
+  {% include "projects/includes/project_image.html" with project=project classes="mini right floated rounded" %}
 {% endblock popupcard_right %}
 
 {% block popupcard_meta %}
@@ -79,7 +52,9 @@
         <div class="header">{% trans "Repository" %}</div>
         <div class="description">
           {% if project.remote_repository %}
-            {% with repo=project.remote_repository %}<a href="{{ repo.html_url }}">{{ repo.full_name }}</a>{% endwith %}
+            {% with repo=project.remote_repository %}
+              <a href="{{ repo.html_url }}">{{ repo.full_name }}</a>
+            {% endwith %}
           {% else %}
             <a href="{{ project.repo }}">{{ project.repo }}</a>
           {% endif %}

readthedocsext/theme/templates/includes/elements/chips/base.html

@@ -34,10 +34,6 @@ export class AvatarElement extends LitElement {
       width: calc(var(--avatar-scale) * -4);
       height: calc(var(--avatar-scale) * -4);
     }
-
-    :host(.micro.image) > div {
-      --avatar-scale: -6px;
-    }
   `;
 
   render() {

readthedocsext/theme/templates/includes/elements/chips/project.html

@@ -14,3 +14,46 @@
   width: @microWidth;
   height: auto;
 }
+
+// Support web component for avatar
+.avatarWidth(@size) {
+  width: @size;
+  // This adjusts the variable that determines the width the avatar sprite is render at
+  --avatar-scale: @size / -4;
+}
+
+readthedocs-avatar.ui.image {
+  display: inline-block;
+  height: auto;
+  &.rounded {
+    overflow: hidden;
+  }
+
+  &.micro {
+    .avatarWidth(@microWidth);
+  }
+  &.mini {
+    .avatarWidth(@miniWidth);
+  }
+  &.tiny {
+    .avatarWidth(@tinyWidth);
+  }
+  &.small {
+    .avatarWidth(@smallWidth);
+  }
+  &.medium {
+    .avatarWidth(@mediumWidth);
+  }
+  &.large {
+    .avatarWidth(@largeWidth);
+  }
+  &.big {
+    .avatarWidth(@bigWidth);
+  }
+  &.huge {
+    .avatarWidth(@hugeWidth);
+  }
+  &.massive {
+    .avatarWidth(@massiveWidth);
+  }
+}

src/js/modules/avatar.js

@@ -11,3 +11,12 @@
   text-overflow: ellipsis;
   max-width: 100%;
 }
+
+.ui.image.label > readthedocs-avatar {
+  width: auto;
+  margin: (-1 * @verticalPadding) @imageLabelTextDistance
+    (-1 * @verticalPadding) (-1 * @verticalPadding);
+  border-radius: @imageLabelBorderRadius 0 0 @imageLabelBorderRadius;
+  overflow: hidden;
+  vertical-align: top;
+}