Compare commits

..

19 commits

Author SHA1 Message Date
b642deb087 Merge pull request 'Add fallback avatar and guild icons' (#41) from fallback-server-icons into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Reviewed-on: #41
2025-07-16 02:51:52 +00:00
2381960277
fix: incorrect merge
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
2025-07-16 04:51:18 +02:00
29243aa86f
Merge remote-tracking branch 'origin/main' into fallback-server-icons 2025-07-16 04:49:59 +02:00
07fa883a14
feat: change Avatar id to class
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
2025-07-15 11:31:11 +02:00
32910d2077
feat: improve theming
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
2025-07-15 01:13:10 +02:00
63dbfa2a0d
fix: ACTUALLY fix font theming 2025-07-15 00:44:41 +02:00
64131e6f9c
fix: set back font defaults 2025-07-15 00:36:54 +02:00
186d3c7a0a
feat: add preferred font field to themes
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
2025-07-15 00:25:52 +02:00
26243a8cd6
fix: colours not working for guild canvas-less fallback
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
2025-07-14 22:27:29 +02:00
890c479f2c
style: minor style changes
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful
2025-07-14 21:56:57 +02:00
b81cd2b73a
feat: improve guild icon fallbacks for blocked canvases 2025-07-14 21:55:10 +02:00
dfec4c9200
fix: properly support blocked canvases for avatars 2025-07-14 21:46:18 +02:00
cbc010943c
chore: minor code cleanup
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
2025-07-14 21:39:42 +02:00
e7558d9a95
refactor: move MemberEntry 2025-07-14 21:39:18 +02:00
f98e8c6110
feat: implement generic <Avatar> component 2025-07-14 21:39:00 +02:00
f4ddcf9d8d
fix: prop 2025-07-14 21:37:45 +02:00
b319a06749
feat: import function from JOHN OZBAY 2025-07-14 21:36:41 +02:00
25cd9a397e
feat: implement caching for hash function 2025-07-14 20:05:31 +02:00
bbc822604f
Merge branch 'irc-colours' into fallback-server-icons 2025-07-14 19:51:12 +02:00
19 changed files with 211 additions and 53 deletions

View file

@ -65,7 +65,7 @@ useHead({
<style>
html,
body {
font-family: Arial, Helvetica, sans-serif;
font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
box-sizing: border-box;
color: var(--text-color);
background: var(--optional-body-background);

46
components/Avatar.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<NuxtImg v-if="displayAvatar"
class="display-avatar"
:src="displayAvatar"
:alt="displayName" />
<Icon v-else
name="lucide:user"
:alt="displayName" />
</template>
<script lang="ts" setup>
import { NuxtImg } from '#components';
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
const props = defineProps<{
user?: UserResponse,
member?: GuildMemberResponse,
}>();
let displayName: string
let displayAvatar: string | null
const user = props.user || props.member?.user
if (user) {
displayName = props.member?.nickname
|| user.display_name
|| user.username
if (user.avatar) {
displayAvatar = user.avatar
} else if (!isCanvasBlocked()){
displayAvatar = generateDefaultIcon(displayName, user.uuid)
} else {
displayAvatar = null
}
}
</script>
<style scoped>
.display-avatar {
border-radius: var(--pfp-radius);
}
</style>

View file

@ -1,7 +1,6 @@
<template>
<div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
<img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
<Icon v-else class="member-avatar" name="lucide:user" />
<Avatar :member="props.member" class="member-avatar"/>
<span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
</div>

View file

@ -13,7 +13,7 @@
<VerticalSpacer />
<div id="direct-message-list">
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
<UserEntry v-for="user of friends" :user="user"
:href="`/me/${user.uuid}`"/>
</div>
</div>

View file

@ -8,14 +8,10 @@
viewBox="0 0 150 87.5" version="1.1" id="svg1"
style="overflow: visible;">
<defs id="defs1" />
<defs
id="defs1" />
<g
id="layer1"
<g id="layer1"
transform="translate(40,-35)">
<g
id="g3"
transform="translate(-35,-20)">
<g id="g3"
transform="translate(-35,-20)">
<path
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
d="m 120.02168,87.850978 100.76157,2.4e-5"
@ -28,16 +24,17 @@
</g>
</svg>
</div>
<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
:author="props.replyMessage.user.display_name || props.replyMessage.user.username"
:text="props.replyMessage?.message"
:reply-id="props.replyMessage.uuid" max-width="reply" />
<div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
<Icon v-else name="lucide:user" class="message-author-avatar" />
<Avatar :user="props.author" class="message-author-avatar"/>
</div>
<div class="message-data">
<div class="message-metadata">
<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
{{ author?.display_name || author?.username }}
{{ displayName }}
</span>
<span class="message-date" :title="date.toString()">
<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@ -81,6 +78,7 @@ const dateHidden = ref<boolean>(true);
const date = new Date(props.timestamp);
const currentDate: Date = new Date()
const displayName = props.author?.display_name || props.author?.username
console.log("[MSG] message to render:", props.message);
console.log("author:", props.author);
@ -225,7 +223,6 @@ function getDayDifference(date1: Date, date2: Date) {
.message-author-avatar {
width: 100%;
border-radius: 50%;
}
.left-column {

View file

@ -42,6 +42,7 @@
<script lang="ts" setup>
import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
import scrollToBottom from '~/utils/scrollToBottom';
import { generateIrcColor } from '#imports';
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();

View file

@ -1,8 +1,8 @@
<template>
<NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
<img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
<Icon v-else class="user-avatar" name="lucide:user" />
<span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
<Avatar :user="props.user" class="user-avatar"/>
<span class="user-display-name">{{ displayName }}</span>
</NuxtLink>
</template>
@ -12,6 +12,8 @@ import type { UserResponse } from '~/types/interfaces';
const props = defineProps<{
user: UserResponse
}>();
const displayName = props.user.display_name || props.user.username
</script>
<style>
@ -35,6 +37,5 @@ const props = defineProps<{
.user-avatar {
width: 2.3em;
height: 2.3em;
border-radius: 50%;
}
</style>

View file

@ -1,7 +1,6 @@
<template>
<div id="profile-popup">
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
<Icon v-else id="avatar" name="lucide:user" />
<Avatar :user="props.user" id="avatar"/>
<div id="cover-color"></div>
<div id="main-body">

View file

@ -18,8 +18,18 @@
<VerticalSpacer />
<div class="left-column-segment" id="left-column-middle">
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
<NuxtImg v-if="guild.icon"
class="sidebar-icon guild-icon"
:alt="guild.name"
:src="guild.icon" />
<NuxtImg v-else-if="!blockedCanvas"
class="sidebar-icon guild-icon"
:alt="guild.name"
: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 />
@ -53,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!");
@ -206,8 +218,8 @@ function createDropdown() {
display: flex;
flex-direction: column;
padding-left: .25em;
padding-right: .25em;
padding-left: var(--sidebar-margin);
padding-right: var(--sidebar-margin);
padding-top: .5em;
background: var(--optional-sidebar-background);
@ -228,6 +240,7 @@ function createDropdown() {
#left-column-middle {
overflow-y: scroll;
flex-grow: 1;
gap: var(--sidebar-icon-gap);
}
#middle-left-column {
@ -241,12 +254,16 @@ function createDropdown() {
}
#home-button {
height: var(--sidebar-width);
height: var(--sidebar-icon-width);
}
.guild-icon {
border-radius: var(--guild-icon-radius);
}
.sidebar-icon {
width: var(--sidebar-width);
height: var(--sidebar-width);
width: var(--sidebar-icon-width);
height: var(--sidebar-icon-width);
}
.sidebar-bottom-buttons {

View file

@ -26,7 +26,7 @@
<script lang="ts" setup>
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
import MemberEntry from "~/components/Member/MemberEntry.vue";
import MemberEntry from "~/components/Guild/MemberEntry.vue";
import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
const route = useRoute();

View file

@ -12,15 +12,17 @@
--padding-color: #e0e0e0;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--primary-color: #f07028;
--primary-highlighted-color: #f28f4b;
--secondary-color: #683820;
--secondary-highlighted-color: #885830;
--accent-color: #a04b24;
--accent-highlighted-color: #b86038;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--guild-icon-radius: 20%;
--pfp-radius: 50%;
--preferred-font: Arial;
}

View file

@ -19,8 +19,13 @@
--accent-color: #b35719;
--accent-highlighted-color: #c76a2e;
--sidebar-width: 2.5em;
--sidebar-icon-width: 2.5em;
--sidebar-icon-gap: .25em;
--sidebar-margin: .5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--guild-icon-radius: 15%;
--pfp-radius: 50%;
--preferred-font: Arial;
}

View file

@ -23,7 +23,8 @@
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--pfp-radius: 50%;
--preferred-font: Arial;
--optional-body-background: ; /* background element for the body */
--optional-chat-background: ; /* background element for the chat box */

View file

@ -11,11 +11,6 @@
--chatbox-background-color: #dfdbd6;
--padding-color: #484848;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--primary-color: #df5f0b;
--primary-highlighted-color: #ef6812;
@ -23,4 +18,10 @@
--secondary-highlighted-color: #f8b68a;
--accent-color: #e68b4e;
--accent-highlighted-color: #f69254;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 50%;
--preferred-font: Arial;
}

View file

@ -19,10 +19,11 @@
--accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80;
--sidebar-width: 2.5em;
--sidebar-width: 2.5em;
--standard-radius: .5em;
--button-radius: .6em;
--pfp-radius: 100%;
--pfp-radius: 50%;
--preferred-font: Arial;
/* --optional-body-background: background */
--optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);

View file

@ -3,7 +3,7 @@ import type { MessageResponse, UserResponse } from "./interfaces";
export interface MessageProps {
class?: string,
img?: string | null,
author?: UserResponse
author: UserResponse
text: string,
timestamp: number,
format: "12" | "24",

View file

@ -0,0 +1,40 @@
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'
const root = document.documentElement;
const preferredFont = getComputedStyle(root).getPropertyValue("--preferred-font");
ctx.font = `bold 96px ${preferredFont}, 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"
}

View file

@ -5,11 +5,9 @@ let h64: CallableFunction;
h64 = (await xxhash()).h64;
})();
export default (seed: string): string => {
const lightness = 50
// this should probably be cached eventually
const idHash = h64(seed)
export default (seed: string, saturation: number = 100, lightness: number = 50): string => {
const idHash = useState(`h64Hash-${seed}`, () => h64(seed))
const hashValue: bigint = idHash.value
return `hsl(${idHash % 360n}, 100%, ${lightness}%)`
return `hsl(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
}

50
utils/isCanvasBlocked.ts Normal file
View file

@ -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;
}