Create an avatar tag to be usable anywhere we need an avatar.

- fixes #1285 - Use a django tag to render an avatar component.
boostorg · Sep 27, 2024 · 43ece9b · 43ece9b
1 parent 20225fa
commit 43ece9b
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 94 deletions.
diff --git a/libraries/views.py b/libraries/views.py
@@ -265,9 +265,9 @@ def get_context_data(self, **kwargs):
  context["maintainers"] = self.get_maintainers(context["version"])
  context["author_tag"] = self.get_author_tag()
  exclude_maintainer_ids = [
- getattr(x.commitauthor, "id")
+ x.commitauthor.id
  for x in context["maintainers"]
- if x.commitauthor
+ if getattr(x.commitauthor, 'id', None)
  ]
  context["top_contributors_release"] = self.get_top_contributors(
  version=context["version"],
@@ -431,7 +431,10 @@ def get_maintainers(self, version):
  if author_email := commit_authors.get(user.email.lower(), None):
  user.commitauthor = author_email.author
  else:
- user.commitauthor = None
+ user.commitauthor = {
+ "github_profile_url": "",
+ "avatar_url": "",
+ }
  return qs
 
  def get_top_contributors(self, version=None, exclude=None):

diff --git a/templates/admin/library_report_detail.html b/templates/admin/library_report_detail.html
@@ -1,4 +1,4 @@
-{% load static humanize %}
+{% load static humanize avatar_tags %}
 <!DOCTYPE html>
 <html>
  <head>
@@ -65,14 +65,8 @@ <h1 class="mx-auto">Boost {{ version.display_name }}</h1>
  <div>
  <div class="grid grid-cols-5 gap-2">
  {% for author in top_contributors_release_overall %}
- <div class="flex flex-col gap-y-2 w-20">
- {% if author.avatar_url %}
- <img src="{{ author.avatar_url }}"
- alt="{{ author.name }}"
- class="w-8 h-8 rounded mx-auto">
- {% else %}
- <div class="w-8 h-8 rounded bg-gray-300 mx-auto"></div>
- {% endif %}
+ <div class="flex flex-col gap-y-2 w-20 items-center">
+ {% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
  <div class="w-full flex flex-col">
  <div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
  {{ author.name }}
@@ -111,14 +105,8 @@ <h4>There were {{ item.version_count.commit_count }} commits in release {{ versi
  <div class="mb-2">Top Contributors</div>
  <div class="grid grid-cols-5 gap-2 flex-wrap">
  {% for author in item.top_contributors_release %}
- <div class="flex flex-col gap-y-2 w-20">
- {% if author.avatar_url %}
- <img src="{{ author.avatar_url }}"
- alt="{{ author.name }}"
- class="w-8 h-8 rounded mx-auto">
- {% else %}
- <div class="w-8 h-8 rounded bg-gray-300 mx-auto"></div>
- {% endif %}
+ <div class="flex flex-col gap-y-2 w-20 items-center">
+ {% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
  <div class="w-full flex flex-col justify-center items-center">
  <div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
  {{ author.name }}

diff --git a/templates/admin/library_stat_detail.html b/templates/admin/library_stat_detail.html
@@ -1,5 +1,5 @@
 {% extends "admin/base_site.html" %}
-{% load static %}
+{% load static avatar_tags %}
 {% block extrahead %}
  <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
 {% endblock extrahead %}
@@ -33,12 +33,7 @@ <h3 class="mb-2">
  <div class="flex flex-col gap-y-1">
  {% for author in commits_per_author %}
  <div class="flex gap-x-1">
- {% if author.avatar_url %}
- <img src="{{ author.avatar_url }}" alt="github avatar" class="w-8 rounded">
- {% else %}
- <div class="w-8 h-8 rounded bg-silver">
- </div>
- {% endif %}
+ {% avatar name=author.name image_url=author.avatar_url href=author.github_profile_url %}
  <div>
  {{ author.name }}: {{ author.count }}
  </div>
@@ -60,14 +55,7 @@ <h3 class="my-2">
  <hr>
  {% endifchanged %}
  <div class="flex gap-x-1">
- {% if item.commit__author__avatar_url %}
- <img src="{{ item.commit__author__avatar_url }}"
- alt="github avatar"
- class="w-8 rounded">
- {% else %}
- <div class="w-8 h-8 rounded bg-silver">
- </div>
- {% endif %}
+ {% avatar name=item.commit__author__name image_url=item.commit__author__avatar_url href=None %}
  <div>
  {{ item.commit__author__name }}: {{ item.count }}
  </div>

diff --git a/templates/libraries/detail.html b/templates/libraries/detail.html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
-{% load i18n %}
-{% load static %}
+{% load i18n static avatar_tags %}
 
 {% block title %}{{ object.display_name }} ({{ version.display_name }}){% endblock %}
 {% block description %}{% trans object.description %}{% endblock %}
@@ -117,65 +116,21 @@
  <!-- Avatars -->
  <h2 class="text-2xl">Maintainers &amp; Contributors</h2>
  <div class="flex flex-col gap-y-4">
- <div class="flex flex-wrap justify-center">
+ <div class="flex flex-wrap justify-center gap-2">
  {% for user in maintainers %}
- <a {% if user.commitauthor.github_profile_url %}href="{{ user.commitauthor.github_profile_url }}"{% endif %}>
- <div class="p-1 md:p-2 w-min text-center flex flex-col items-center">
- <div class="bg-gray-300 dark:bg-slate rounded-lg h-12 w-12">
- {% if user.image or user.commitauthor.avatar_url %}
- <img src="{% if user.image %}{{ user.image.url}}{% else %}{{ user.commitauthor.avatar_url }}{% endif %}"
- title="{{ user.get_full_name }}"
- alt="{{ user.get_full_name }}"
- class="rounded-lg h-12 w-12 object-cover" />
- {% else %}
- <i class="h-12 w-12 m-auto text-3xl align-middle fas fa-user text-white dark:text-white/60 " title="{{ user.get_full_name }}"></i>
- {% endif %}
- </div>
- <span class="text-xs">{{ user.get_full_name }}</span>
- </div>
- </a>
+ {% avatar image_url=user.image|default:user.commitauthor.avatar_url href=user.commitauthor.github_profile_url name=user.get_full_name image_size="h-12 w-12" is_show_name=True %}
  {% endfor %}
  </div>
 
- <div class="flex flex-wrap justify-center">
+ <div class="flex flex-wrap justify-center gap-2">
  {% for author in top_contributors_release %}
- <a
- {% if author.github_profile_url %}
- href="{{ author.github_profile_url }}"
- {% endif %}
- >
- <div class="p-1 md:p-2 flex text-center justify-center" title="{{ author.name }}">
- <div class="bg-gray-300 dark:bg-slate rounded-lg h-9 w-9 overflow-hidden">
- {% if author.avatar_url %}
- <img src="{{ author.avatar_url }}"
- title="{{ author.name }}"
- alt="{{ author.name }}"
- class="rounded-lg h-9 w-9 object-cover" />
- {% else %}
- <i class="h-9 w-9 m-auto text-3xl fas fa-user text-white dark:text-white/60 " title="{{ author.name }}"></i>
- {% endif %}
- </div>
- </div>
- </a>
+ {% avatar image_url=author.avatar_url href=author.github_profile_url name=author.name %}
  {% endfor %}
  </div>
 
- <div class="flex flex-wrap justify-center">
+ <div class="flex flex-wrap justify-center gap-2">
  {% for author in top_contributors_overall %}
- <a {% if author.github_profile_url %}href="{{ author.github_profile_url }}"{% endif %}>
- <div class="p-1 md:p-2 flex text-center justify-center" title="{{ author.name }}">
- <div class="bg-gray-300 dark:bg-slate rounded-lg h-9 w-9 overflow-hidden">
- {% if author.avatar_url %}
- <img src="{{ author.avatar_url }}"
- title="{{ author.name }}"
- alt="{{ author.name }}"
- class="rounded-lg h-9 w-9 object-cover" />
- {% else %}
- <i class="h-9 w-9 m-auto text-3xl fas fa-user text-white dark:text-white/60 " title="{{ author.name }}"></i>
- {% endif %}
- </div>
- </div>
- </a>
+ {% avatar image_url=author.avatar_url href=author.github_profile_url name=author.name %}
  {% endfor %}
  </div>
 

diff --git a/templates/partials/avatar.html b/templates/partials/avatar.html
@@ -1,7 +1,20 @@
-{% if profile.avatar %}
-<img class="avatar" src="{{ profile.avatar.url }}" alt="{{ profile.user }}" />
-{% elif show_placeholder %}
-<span class="avatar empty">
- <i class="far fa-user fa-4x" ></i>
-</span>
-{% endif %}
+{# Intended to be used with a django tag: avatar_tags.avatar #}
+{% with av_size=av_size|default:"w-9 h-9" av_show_name=av_show_name|default:False av_title=av_title|default:av_name av_alt=av_alt|default:av_name %}
+ <a {% if av_href %}href="{{ av_href }}"{% endif %}>
+ <div class="w-min text-center flex flex-col justify-center items-center">
+ <div class="bg-gray-300 dark:bg-slate rounded-lg {{ av_size }} flex items-center">
+ {% if av_image_url %}
+ <img src="{{ av_image_url }}"
+ title="{{ av_title }}"
+ alt="{{ av_alt }}"
+ class="rounded-lg {{ av_size }} object-cover mx-auto" />
+ {% else %}
+ <i class="{{ av_size }} m-auto text-3xl align-middle fas fa-user text-white dark:text-white/60" title="{{ av_title }}"></i>
+ {% endif %}
+ </div>
+ {% if av_show_name %}
+ <span class="text-xs">{{ av_name }}</span>
+ {% endif %}
+ </div>
+ </a>
+{% endwith %}
diff --git a/users/templatetags/__init__.py b/users/templatetags/__init__.py
diff --git a/users/templatetags/avatar_tags.py b/users/templatetags/avatar_tags.py
@@ -0,0 +1,26 @@
+from django import template
+from django.template.loader import render_to_string
+
+register = template.Library()
+
+
+@register.simple_tag()
+def avatar(
+ name,
+ image_url,
+ href,
+ is_show_name=False,
+ alt=None,
+ title=None,
+ image_size=None,
+):
+ context = {
+ "av_name": name,
+ "av_href": href,
+ "av_image_url": image_url,
+ "av_show_name": is_show_name,
+ "av_size": image_size,
+ "av_title": title,
+ "av_alt": alt,
+ }
+ return render_to_string("partials/avatar.html", context)