Use jdenticon for default avatars (#416)

thomiceli · Jan 26, 2025 · 28c7e75 · 28c7e75
1 parent 0609b64
commit 28c7e75
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 17 deletions.
diff --git a/internal/web/server/renderer.go b/internal/web/server/renderer.go
@@ -92,10 +92,13 @@ func (s *Server) setFuncMap() {
 				return "https://www.gravatar.com/avatar/" + user.MD5Hash + "?d=identicon&s=200"
 			}
 
-			if s.dev {
-				return "http://localhost:16157/default.png"
+			return ""
+		},
+		"shouldGenerateAvatar": func(user *db.User, noGravatar bool) bool {
+			if user == nil {
+				return true
 			}
-			return config.C.ExternalUrl + "/" + context.ManifestEntries["default.png"].File
+			return user.AvatarURL == "" && (user.MD5Hash == "" || noGravatar)
 		},
 		"asset": func(file string) string {
 			if s.dev {
@@ -113,12 +116,6 @@ func (s *Server) setFuncMap() {
 		"dev": func() bool {
 			return s.dev
 		},
-		"defaultAvatar": func() string {
-			if s.dev {
-				return "http://localhost:16157/default.png"
-			}
-			return config.C.ExternalUrl + "/" + context.ManifestEntries["default.png"].File
-		},
 		"visibilityStr": func(visibility db.Visibility, lowercase bool) string {
 			s := "Public"
 			switch visibility {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "cssnano": "^5.1.15",
     "dayjs": "^1.11.9",
     "github-markdown-css": "^5.5.0",
+    "jdenticon": "^3.3.0",
     "nodemon": "^2.0.22",
     "postcss": "^8.4.32",
     "postcss-cli": "^11.0.0",

diff --git a/public/default.png b/public/default.png
diff --git a/public/main.ts b/public/main.ts
@@ -1,7 +1,6 @@
 import './style.scss';
 import './favicon-32.png';
 import './opengist.svg';
-import './default.png';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import 'dayjs/locale/cs';
@@ -13,11 +12,14 @@ import 'dayjs/locale/pt';
 import 'dayjs/locale/ru';
 import 'dayjs/locale/zh';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import jdenticon from 'jdenticon/standalone';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.locale(window.opengist_locale || 'en');
 
+jdenticon.update("[data-jdenticon-value]")
+
 document.addEventListener('DOMContentLoaded', () => {
     const themeMenu = document.getElementById('theme-menu')!;
 

diff --git a/templates/pages/all.html b/templates/pages/all.html
@@ -6,7 +6,15 @@
                 {{if .fromUser}}
                 <div class="flex items-center">
                     <div class="flex-shrink-0">
-                        <img class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" src="{{ avatarUrl .fromUser .DisableGravatar }}" alt="{{ .fromuser.Username }}'s Avatar">
+                        {{ if not (shouldGenerateAvatar .fromUser .DisableGravatar) }}
+                            <img class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" src="{{ avatarUrl .fromUser .DisableGravatar }}" alt="{{ .fromuser.Username }}'s Avatar">
+                        {{ else }}
+                            <svg class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700"
+                                 data-jdenticon-value="{{ .fromUser.Username }}"
+                                 width="48"
+                                 height="48">
+                            </svg>
+                        {{ end }}
                     </div>
                     <div>
                         <h1 class="text-2xl font-bold leading-tight">{{.fromUser.Username}}</h1>

diff --git a/templates/pages/forks.html b/templates/pages/forks.html
@@ -8,7 +8,11 @@ <h3 class="text-xl font-bold leading-tight break-all py-2">{{ .locale.Tr "gist.f
                 {{ range $gist := .forks }}
                 <li class="flex py-4">
                     <a href="{{ $.c.ExternalUrl }}/{{ $gist.User.Username }}">
+                        {{ if not (shouldGenerateAvatar $gist.User $.DisableGravatar) }}
                         <img class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" src="{{ avatarUrl $gist.User $.DisableGravatar }}" alt="{{ $gist.User.Username }}'s Avatar">
+                        {{ else }}
+                        <svg class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" data-jdenticon-value="{{ $gist.User.Username }}" width="48" height="48"></svg>
+                        {{ end }}
                     </a>
                     <div>
                         <a href="{{ $.c.ExternalUrl }}/{{ $gist.User.Username }}" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ $gist.User.Username }}</a>

diff --git a/templates/pages/likes.html b/templates/pages/likes.html
@@ -6,7 +6,11 @@ <h3 class="text-xl font-bold leading-tight break-all py-2">{{ .locale.Tr "gist.l
             {{ range $user := .likers }}
                 <div class="relative flex items-center space-x-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-6 py-5 shadow-sm focus-within:ring-1 focus-within:border-primary-500 focus-within:ring-primary-500 hover:border-gray-600 dark:hover:border-gray-400">
                     <div class="min-w-0 flex">
-                        <img class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" src="{{ avatarUrl $user $.DisableGravatar }}" alt="{{ $user.Username }}'s Avatar">
+                        {{ if not (shouldGenerateAvatar .fromUser $.DisableGravatar) }}
+                            <img class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" src="{{ avatarUrl $user $.DisableGravatar }}" alt="{{ $user.Username }}'s Avatar">
+                        {{ else }}
+                            <svg class="h-12 w-12 rounded-md mr-2 border border-gray-200 dark:border-gray-700" data-jdenticon-value="{{ $user.Username }}" width="48" height="48"></svg>
+                        {{ end }}
                         <a href="{{ $.c.ExternalUrl }}/{{ $user.Username }}" class="focus:outline-none">
                             <span class="absolute inset-0" aria-hidden="true"></span>
                             <p class="text-sm font-medium text-slate-700 dark:text-slate-300 align-middle">{{ $user.Username }}</p>

diff --git a/templates/pages/revisions.html b/templates/pages/revisions.html
@@ -11,7 +11,11 @@ <h3 class="text-sm py-2 flex-auto">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                 </svg>
                 {{ $user := (index $.emails $commit.AuthorEmail) }}
-                <img class="h-5 w-5 rounded-full inline" src="{{if $user }}{{ avatarUrl $user $.DisableGravatar }}{{else}}{{defaultAvatar}}{{end}}" {{if $user }}alt="{{ $user.Username }}'s Avatar"{{end}} />
+                {{ if not (shouldGenerateAvatar $user $.DisableGravatar) }}
+                    <img class="h-5 w-5 rounded-full inline" src="{{ avatarUrl $user $.DisableGravatar }}" {{if $user }}alt="{{ $user.Username }}'s Avatar"{{end}} />
+                {{ else }}
+                    <svg class="h-5 w-5 rounded-full inline" data-jdenticon-value="{{ $commit.AuthorName }}" width="20" height="20"></svg>
+                {{ end }}
                 <span class="font-bold">{{if $user}}<a href="{{ $.c.ExternalUrl }}/{{$user.Username}}" class="text-slate-300 hover:text-slate-300 hover:underline">{{ $commit.AuthorName }}</a>{{else}}{{ $commit.AuthorName }}{{end}}</span> {{ $.locale.Tr "gist.revision.revised" }} <span class="moment-timestamp font-bold">{{ $commit.Timestamp }}</span>. <a href="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/rev/{{ $commit.Hash }}">{{ $.locale.Tr "gist.revision.go-to-revision" }}</a></h3>
                 {{ if ne $commit.Changed "" }}
                     <p class="text-sm float-right py-2">

diff --git a/templates/partials/_gist_preview.html b/templates/partials/_gist_preview.html
@@ -5,7 +5,11 @@
         <div class="flex ">
             <div class="div">
                 <a href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}">
-                    <img class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" src="{{ avatarUrl .gist.User .DisableGravatar }}" alt="{{ .gist.User.Username }}'s Avatar">
+                    {{ if not (shouldGenerateAvatar .gist.User .DisableGravatar) }}
+                        <img class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" src="{{ avatarUrl .gist.User .DisableGravatar }}" alt="{{ .gist.User.Username }}'s Avatar">
+                    {{ else }}
+                        <svg class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" data-jdenticon-value="{{ .gist.User.Username }}" width="40" height="40"></svg>
+                    {{ end }}
                 </a>
             </div>
             <div class="flex-auto">