Replace project avatars (#403)

* WIP

* Update avatar positioning logic and seeding

* Update avatar sprite and patterns for avatar URL

* Reset djlint lint option

* Update avatar image to 100x100 with a limited palette

* Lint fixes

Author: agjohnson

.djlintrc

@@ -2,5 +2,7 @@
   "indent": "2",
   "preserve_blank_lines": true,
   "ignore": "H006",
-  "max_line_length": 80
+  "max_line_length": 80,
+  "custom_html": "readthedocs-\\w+,readthedocs-\\w+-\\w+",
+  "format_attribute_template_tags": false
 }

.pre-commit-config.yaml

@@ -29,8 +29,8 @@ repos:
   - repo: https://github.com/djlint/djLint
     rev: v1.34.1
     hooks:
-      - id: djlint-django
       - id: djlint-reformat-django
+      - id: djlint-django
   - repo: local
     hooks:
       - id: check-build-assets

package-lock.json

@@ -52,6 +52,7 @@
     "mini-css-extract-plugin": "^2.7.6",
     "plausible-tracker": "^0.3.8",
     "prettier": "^3.0.3",
+    "pure-rand": "^6.1.0",
     "resolve-url-loader": "^5.0.0",
     "rollup-plugin-lit-css": "^4.0.1",
     "sanitize-html": "^2.11.0",

package.json

@@ -5,8 +5,16 @@
   to the same image always.
 {% endcomment %}
 
+{% load blocktrans from i18n %}
+{% load static from static %}
+
 {% if project.remote_repository %}
-  <img class="ui {{ classes|default_if_none:"small rounded" }} image" src="{{ project.remote_repository.avatar_url }}" />
+  <img class="ui {{ classes|default_if_none:"small rounded" }} image"
+       src="{{ project.remote_repository.avatar_url }}"
+       alt="{% blocktrans with project_name=project.name %}{{ project_name }} project{% endblocktrans %}" />
 {% else %}
-  <img class="ui {{ classes|default_if_none:"small rounded" }} image" src="https://api.dicebear.com/5.x/shapes/svg?size=64&backgroundColor=b8abd4&shape1Color=8c74c1&shape2Color=7854c5&shape3Color=f0f0ff&seed={{ project.pk }}" />
+  <readthedocs-avatar class="ui {{ classes|default_if_none:"small rounded" }} image"
+                      seed="{{ project.pk }}"
+                      url="{% static 'readthedocsext/theme/css/images/avatar-1.png' %}">
+  </readthedocs-avatar>
 {% endif %}

readthedocsext/theme/static/readthedocsext/theme/css/images/avatar-1.png

@@ -0,0 +1,66 @@
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import pureRand from "pure-rand";
+
+import { LightDOMElement } from "../application/elements";
+
+// This image lives alongside our CSS sources, and bundling outputs this image
+// to the application static path. From here, Django ``static`` template tag is
+// used to reference the file through storage. So, this import is not directly
+// needed here, and this might be a pattern to redo eventually.
+import avatarImage from "../../css/images/avatar-1.png";
+
+export class AvatarElement extends LitElement {
+  static properties = {
+    seed: { type: String },
+    url: { type: String },
+  };
+
+  static styles = css`
+    :host {
+      --avatar-x: 0;
+      --avatar-y: 0;
+      --avatar-scale: -10px;
+      --avatar-background-image: none;
+    }
+
+    :host > div {
+      background-image: var(--avatar-background-image);
+      background-repeat: no-repeat;
+      background-size: calc(100 * -1 * var(--avatar-scale))
+        calc(100 * -1 * var(--avatar-scale));
+      background-position-x: calc(var(--avatar-x) * var(--avatar-scale));
+      background-position-y: calc(var(--avatar-y) * var(--avatar-scale));
+      image-rendering: pixelated;
+      width: calc(var(--avatar-scale) * -4);
+      height: calc(var(--avatar-scale) * -4);
+    }
+
+    :host(.micro.image) > div {
+      --avatar-scale: -6px;
+    }
+  `;
+
+  render() {
+    return html`<div></div>`;
+  }
+
+  updated(changed) {
+    // Dynamically update background position through CSS variables. The
+    // ``styles`` attribute does not work with dynamic rules, but we can do the
+    // same after an updated event on the web component.
+    if (changed.has("seed") && this.seed) {
+      const rng = pureRand.xoroshiro128plus(this.seed);
+      const posX = pureRand.unsafeUniformIntDistribution(0, 99, rng);
+      const posY = pureRand.unsafeUniformIntDistribution(0, 99, rng);
+      this.style.setProperty("--avatar-x", posX);
+      this.style.setProperty("--avatar-y", posY);
+    }
+    // Similarly, load the image through the avatar URL attribute, as we want
+    // the fully resolved storage URL from Django staticfiles.
+    if (changed.has("url") && this.url) {
+      this.style.setProperty("--avatar-background-image", `url("${this.url}")`);
+    }
+  }
+}
+
+customElements.define("readthedocs-avatar", AvatarElement);

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

@@ -1,7 +1,8 @@
+import * as avatar from "./avatar";
 import * as header from "./header";
 import * as filter from "./filter";
 import * as menus from "./menus";
 import * as notifications from "./notifications";
 import * as popupcards from "./popupcards";
 
-export { header, filter, menus, notifications, popupcards };
+export { avatar, header, filter, menus, notifications, popupcards };