nostr/coracle
1
0
Fork 0
mirror of https://github.com/coracle-social/coracle.git synced 2024-09-18 19:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up generation code

Browse Source
This commit is contained in:
Wojciech Morkowski 2023-03-11 23:20:51 +01:00 committed by Jonathan Staab
parent 633815a953
commit 5e19ceb99a
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/partials/ImageCircle.svelte
View File

@ -11,6 +11,6 @@
`overflow-hidden w-${size} h-${size} inline-block shrink-0 rounded-full border border-solid
border-white bg-cover bg-center`
)}
style="background-image: url({src}); {$$props.style}">
style="background-image: url({src}); {$$props.style || ''}">
<slot></slot>
</div>

14
src/partials/PersonCircle.svelte
View File

@ -1,14 +1,16 @@
<script lang="ts">
import { invertColor, stringToHex } from "src/util/misc";
import { generateAvatarColors } from "src/util/misc";
import ImageCircle from "./ImageCircle.svelte";
import LogoSvg from "./LogoSvg.svelte";
import cx from "classnames";
import type { Person } from "src/util/types"
export let person;
export let person : Person;
export let size = 4;
const color = stringToHex(person.pubkey);
const bgColor = invertColor(color);
$: avatarColor = person.kind0 && !person.kind0.picture
? generateAvatarColors(person.pubkey)
: { primary: '#EB5E28', bg: 'transparent' };
</script>
{#if person.kind0?.picture}
@ -17,8 +19,8 @@
<ImageCircle
{size}
src={""}
class={cx($$props.class, "test", "relative")}
style="--logo-color: {color}; --logo-bg-color: {bgColor}; background-color: var(--logo-bg-color);"
class={cx($$props.class, "relative")}
style="--logo-color: {avatarColor.primary}; --logo-bg-color: {avatarColor.bg}; background-color: var(--logo-bg-color);"
>
<LogoSvg class="absolute left-2/4 top-2/4 -translate-x-1/2 -translate-y-1/2 logo" style="height: 85%; width: 85%;" />
</ImageCircle>

14
src/util/misc.ts
View File

@ -5,6 +5,7 @@ import Fuse from "fuse.js/dist/fuse.min.js"
import {writable} from 'svelte/store'
import {isObject, round} from 'hurdak/lib/hurdak'
import {warn} from 'src/util/logger'
import {memoizeWith} from 'ramda';
export const fuzzy = (data, opts = {}) => {
const fuse = new Fuse(data, opts)
@ -282,7 +283,7 @@ export const stringToColor = (value, {saturation = 100, lightness = 50, opacity
}
// https://stackoverflow.com/a/75255491
export const stringToHex = function(str: string) {
const stringToHex = function(str: string) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
@ -302,7 +303,7 @@ function padZero(str: string, len?: number) {
}
// https://stackoverflow.com/a/35970186
export function invertColor(hex: string) {
function invertColor(hex: string) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
@ -321,6 +322,15 @@ export function invertColor(hex: string) {
return '#' + padZero(r) + padZero(g) + padZero(b);
}
export const generateAvatarColors = memoizeWith(identity, (pubkey: string) => {
const primary = stringToHex(pubkey);
return {
primary,
bg: invertColor(primary),
}
});
export const tryFunc = (f, ignore = null) => {
try {
const r = f()