Fix Gravatar profiles showing on hover and add gravatar explanation and profile page for users

This commit is contained in:
badblocks 2025-03-18 14:21:50 -07:00
parent 2451a6c630
commit 4c0db9f842
7 changed files with 79 additions and 10 deletions

View file

@ -36,6 +36,14 @@
<!-- Floating UI -->
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.9"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.13"></script>
<!-- Gravatar -->
<!-- Import the hovercard styles -->
<link rel="stylesheet" href="https://unpkg.com/@gravatar-com/hovercards@0.10.8/dist/style.css">
<!-- Import the hovercards library -->
<script src="https://unpkg.com/@gravatar-com/hovercards@0.10.8"></script>
{% block css %}{% endblock %}
{% block javascript_head %}{% endblock %}
@ -97,14 +105,14 @@
<div class="dropdown dropdown-end hidden sm:block">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
{{ user.email|gravatar:40 }}
{{ user.email|gravatar_no_hover:40 }}
</div>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-32 p-2 shadow">
<li>
<a class="flex items-center justify-between" href="https://www.gravatar.com/profile/" target="_blank" rel="noopener noreferrer">
<a class="flex items-center justify-between" href="{% url 'profile' %}">
<div>Profile</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
@ -171,7 +179,29 @@
<script defer src="{% static 'js/tooltip.js' %}"></script>
<script defer src="{% static 'js/base.js' %}"></script>
<!-- Gravatar -->
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof Gravatar !== 'undefined' && typeof Gravatar.Hovercards !== 'undefined') {
const hovercards = new Gravatar.Hovercards({
myHash: '{{ user.email|gravatar_hash }}'
});
hovercards.attach( document.body, { ignoreSelector: 'img[src*="gravatar.com/avatar/"].ignore' } );
}
});
// i18n: {
// 'Edit your profile →': 'Modifier votre profil →',
// 'View profile →': 'Voir le profil →',
// 'Contact': 'Contact',
// 'Send money': 'Envoyer de l\'argent',
// 'Sorry, we are unable to load this Gravatar profile.': 'Désolé, nous ne pouvons pas charger ce profil Gravatar.',
// 'Profile not found.': 'Profil non trouvé.',
// 'Too Many Requests.': 'Trop de demandes.',
// 'Internal Server Error.': 'Erreur interne du serveur.',
// }
</script>
<script defer src="{% static 'js/base.js' %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>