components/Avatar.vue

@@ -3,10 +3,8 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<DefaultIcon v-else-if="user"
+	<Icon v-else
-		class="display-avatar"
+		name="lucide:user"
-		:name="displayName"
-		:seed="user.uuid"
 		:alt="displayName" />
 </template>
 
@@ -30,6 +28,10 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
 	}
 }
 

components/DefaultIcon.vue

@@ -1,48 +0,0 @@
-<template>
-  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
-	class="default-icon">
-		<span class="default-icon-text">
-			{{ previewName }}
-		</span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-const props = defineProps<{
-	seed: string,
-	name: string	
-}>();
-
-let previewName = "";
-if (props.name.length > 3) {
-	let guildName: string[] = props.name.split(' ')
-	for (let i = 0; i < 3; i ++) {
-		if (guildName.length > i) {
-			previewName += guildName[i].charAt(0)
-		} else {
-			break
-		}
-	}
-} else {
-	previewName = props.name
-}
-
-</script>
-
-<style scoped>
-.default-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.default-icon-text {
-	/* helps centre the icon, yes, this is NOT perfect */
-	margin-top: -0.15em;
-
-	font-weight: bold;
-
-	color: var(--secondary-text-color)
-}
-</style>

components/Guild/MemberEntry.vue

@@ -30,11 +30,4 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
-
-.member-avatar {
-    min-height: 2.3em;
-	max-height: 2.3em;
-	min-width: 2.3em;
-	max-width: 2.3em;
-}
 </style>

components/Message.vue

@@ -220,10 +220,7 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2em;
+	width: 100%;
-	max-height: 2em;
-	min-width: 2em;
-	max-width: 2em;
 }
 
 .left-column {

components/User/UserEntry.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
 .user-avatar {
     min-width: 2.3em;
     max-width: 2.3em;
-    min-height: 2.3em;
+    min-width: 2.3em;
     max-height: 2.3em;
 }
 

layouts/client.vue

@@ -17,15 +17,19 @@
 				</div>
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon"
 							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="guild.icon" />
-						<DefaultIcon 
+						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon guild-icon" 
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
-							:name="guild.name" :seed="guild.uuid"/>
+							:src="generateDefaultIcon(guild.name, guild.uuid)" />
+						<Icon v-else name="lucide:server"
+							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name" />
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -48,7 +52,6 @@
 <script lang="ts" setup>
 import { ModalBase } from '#components';
 import { render } from 'vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
@@ -60,6 +63,8 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
+const blockedCanvas = isCanvasBlocked()
+
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
@@ -244,10 +249,6 @@ function createDropdown() {
 	height: var(--sidebar-icon-width);
 }
 
-#guild-icon-container {
-	text-decoration: none;
-}
-
 .guild-icon {
 	border-radius: var(--guild-icon-radius);
 }

pages/servers/[serverId]/channels/[channelId].vue

@@ -133,6 +133,13 @@ function handleMemberClick(member: GuildMemberResponse) {
 	text-overflow: ellipsis;
 }
 
+.member-avatar {
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
+}
+
 .member-display-name {
 	overflow: hidden;
 	text-overflow: ellipsis;

utils/generateDefaultIcon.ts

@@ -0,0 +1,38 @@
+export default (name: string, seed: string): string => {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (canvas && ctx) {
+		canvas.width = 256;
+		canvas.height = 256;
+
+		// get the first char from every word in the guild name
+		let previewName = "";
+		if (name.length > 3) {
+			let guildName: string[] = name.split(' ')
+			for (let i = 0; i < 3; i ++) {
+				if (guildName.length > i) {
+					previewName += guildName[i].charAt(0)
+				} else {
+					break
+				}
+			}
+		} else {
+			previewName = name
+		}
+
+		// fill background using seeded colour
+		ctx.fillStyle = generateIrcColor(seed, 50)
+		ctx.fillRect(0, 0, 256, 256)
+
+		ctx.fillStyle = 'white'
+		ctx.textAlign = 'center'
+		ctx.textBaseline = 'middle'
+		ctx.font = `bold 96px Arial, Helvetica, sans-serif`
+		// 136 isn't actually centered, but it *looks* centered
+		ctx.fillText(previewName, 128, 136)
+
+		return canvas.toDataURL("image/png");
+	}
+
+	return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
+}

utils/isCanvasBlocked.ts

@@ -0,0 +1,50 @@
+//
+// Canvas Blocker &								  
+// Firefox privacy.resistFingerprinting Detector. 
+// (c) 2018 // JOHN OZBAY // CRYPT.EE 			  
+// MIT License
+//
+export default () => {
+	// create a 1px image data
+	var blocked = false;
+	var canvas = document.createElement("canvas");
+	var ctx = canvas.getContext("2d");
+	
+	// some blockers just return an undefined ctx. So let's check that first. 
+	if (ctx) {
+		var imageData = ctx.createImageData(1,1);
+		var originalImageData  = imageData.data;
+
+		// set pixels to RGB 128
+		originalImageData[0]=128; 
+		originalImageData[1]=128; 
+		originalImageData[2]=128; 
+		originalImageData[3]=255;
+		
+		// set this to canvas
+		ctx.putImageData(imageData,1,1); 
+		
+		try {
+			// now get the data back from canvas.
+			var checkData = ctx.getImageData(1, 1, 1, 1).data;
+
+			// If this is firefox, and privacy.resistFingerprinting is enabled,
+			// OR a browser extension blocking the canvas, 
+			// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
+
+			// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
+			if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
+				blocked = true;
+				console.log("Canvas is blocked. Will display warning.");
+			}
+		} catch (error) {
+			// some extensions will return getImageData null. this is to account for that.
+			blocked = true;
+			console.log("Canvas is blocked. Will display warning.");
+		}
+	} else {
+		blocked = true;
+		console.log("Canvas is blocked. Will display warning.");
+	}
+	return blocked;
+}