Use jdenticon for default avatars (#416)

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 ""
-				return "http://localhost:16157/default.png"
+		},
+		"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 {

package-lock.json

@@ -19,6 +19,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",
@@ -841,7 +842,6 @@
       "integrity": "sha512-5cHBxFGJx6L4s56Bubp4fglrEpmyJypsqI6RgzMfBHWUJQGWAAi8cWcgetEbZXHYXo9C2Fa4EEds/uSyS4cxmA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -1348,6 +1348,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-renderer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.2.1.tgz",
+      "integrity": "sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2577,6 +2587,22 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jdenticon": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-3.3.0.tgz",
+      "integrity": "sha512-DhuBRNRIybGPeAjMjdHbkIfiwZCCmf8ggu7C49jhp6aJ7DYsZfudnvnTY5/1vgUhrGA7JaDAx1WevnpjCPvaGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "canvas-renderer": "~2.2.0"
+      },
+      "bin": {
+        "jdenticon": "bin/jdenticon.js"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -5904,8 +5930,7 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/unicorn-magic": {
       "version": "0.1.0",

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",

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')!;
 

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>

templates/pages/forks.html

@@ -8,7 +8,11 @@
                 {{ 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>

templates/pages/likes.html

@@ -6,7 +6,11 @@
             {{ 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>

templates/pages/revisions.html

@@ -11,7 +11,11 @@
                     <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">

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">