From 5725cec33f6772420391236ef67eaf2be293f2bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Thu, 12 Sep 2024 17:33:10 +0200 Subject: [PATCH] Add breadcrumbs --- src/components/Avatar.svelte | 45 ++++++++++++ src/components/Header.svelte | 93 ++++++++++++++----------- src/components/NodeId.svelte | 40 +++++++++++ src/lib/blockies.ts | 125 ++++++++++++++++++++++++++++++++++ src/views/Home.svelte | 8 +++ src/views/repo/Issues.svelte | 18 +++++ src/views/repo/Layout.svelte | 6 +- src/views/repo/Patches.svelte | 17 +++++ src/views/repo/router.ts | 15 ++-- 9 files changed, 320 insertions(+), 47 deletions(-) create mode 100644 src/components/Avatar.svelte create mode 100644 src/components/NodeId.svelte create mode 100644 src/lib/blockies.ts diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte new file mode 100644 index 000000000..70bdd72aa --- /dev/null +++ b/src/components/Avatar.svelte @@ -0,0 +1,45 @@ + + + + +avatar diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 34f4062af..cf6ca9e7b 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -11,7 +11,7 @@ .header { padding: 0 0.5rem; gap: 0.25rem; - height: 3rem; + height: 5rem; } .wrapper { width: 100%; @@ -27,7 +27,7 @@ top: 0; left: 0.5rem; right: 0.5rem; - height: 3rem; + height: 5rem; z-index: -1; background-color: var(--color-background-float); @@ -53,44 +53,61 @@
-
-
-
- { - window.history.back(); - }}> - - - { - window.history.forward(); - }}> - - +
+
+
+
+ { + window.history.back(); + }}> + + + { + window.history.forward(); + }}> + + +
+ +
+ + + +
+ + + Offline + + + + + + +
+ Theme +
+ +
-
- - - -
- - - Offline - - - - - - -
- Theme -
- - +
+
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte new file mode 100644 index 000000000..a801af913 --- /dev/null +++ b/src/components/NodeId.svelte @@ -0,0 +1,40 @@ + + + + +
+ + {#if alias} + + {alias} + + {:else} + + {truncateId(nodeId)} + + {/if} +
diff --git a/src/lib/blockies.ts b/src/lib/blockies.ts new file mode 100644 index 000000000..341a9a3b4 --- /dev/null +++ b/src/lib/blockies.ts @@ -0,0 +1,125 @@ +// Copyright (c) 2019, Ethereum Name Service + +// The random number is a js implementation of the Xorshift PRNG +const randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values + +function seedrand(seed: string) { + for (let i = 0; i < randseed.length; i++) { + randseed[i] = 0; + } + for (let i = 0; i < seed.length; i++) { + randseed[i % 4] = + (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i); + } +} + +function rand(): number { + // Based on Java's String.hashCode(), expanded to 4 32bit values. + const t = randseed[0] ^ (randseed[0] << 11); + + randseed[0] = randseed[1]; + randseed[1] = randseed[2]; + randseed[2] = randseed[3]; + randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8); + + return (randseed[3] >>> 0) / ((1 << 31) >>> 0); +} + +function createColor(): string { + // Saturation is the whole color spectrum. + const h = Math.floor(rand() * 360); + // Saturation goes from 40 to 100, it avoids greyish colors. + const s = rand() * 60 + 40 + "%"; + // Lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%. + const l = (rand() + rand() + rand() + rand()) * 25 + "%"; + + return `hsl(${h}, ${s}, ${l})`; +} + +function createImageData(size: number): number[] { + const width = size; + const height = size; + + const dataWidth = Math.ceil(width / 2); + const mirrorWidth = width - dataWidth; + + const data = []; + for (let y = 0; y < height; y++) { + let row = []; + for (let x = 0; x < dataWidth; x++) { + // this makes foreground and background color to have a 43% (1/2.3) probability + // spot color has 13% chance + row[x] = Math.floor(rand() * 2.3); + } + const r = row.slice(0, mirrorWidth); + r.reverse(); + row = row.concat(r); + + for (let i = 0; i < row.length; i++) { + data.push(row[i]); + } + } + + return data; +} + +function createCanvas( + imageData: number[], + color: string, + scale: number, + bgcolor: string, + spotcolor: string, +): HTMLCanvasElement { + const c = document.createElement("canvas"); + const width = Math.sqrt(imageData.length); + c.width = c.height = width * scale; + + const cc = c.getContext("2d"); + + if (!cc) throw new Error("Can't get 2D context"); + + cc.fillStyle = bgcolor; + cc.fillRect(0, 0, c.width, c.height); + cc.fillStyle = color; + + for (let i = 0; i < imageData.length; i++) { + const row = Math.floor(i / width); + const col = i % width; + // if data is 2, choose spot color, if 1 choose foreground + cc.fillStyle = imageData[i] === 1 ? color : spotcolor; + + // if data is 0, leave the background + if (imageData[i]) { + cc.fillRect(col * scale, row * scale, scale, scale); + } + } + + return c; +} + +export interface Options { + seed: string; + size: number; + scale: number; + color?: string; + bgcolor?: string; + spotcolor?: string; +} + +export function createIcon(opts: Options): HTMLCanvasElement { + opts = opts || {}; + const size = opts.size || 8; + const scale = opts.scale || 4; + const seed = + opts.seed || Math.floor(Math.random() * Math.pow(10, 16)).toString(16); + + seedrand(seed); + + const color = opts.color || createColor(); + const bgcolor = opts.bgcolor || createColor(); + const spotcolor = opts.spotcolor || createColor(); + const imageData = createImageData(size); + const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor); + + return canvas; +} diff --git a/src/views/Home.svelte b/src/views/Home.svelte index cae89ca69..baf218b56 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -7,6 +7,7 @@ import CopyableId from "@app/components/CopyableId.svelte"; import Header from "@app/components/Header.svelte"; import RepoCard from "@app/components/RepoCard.svelte"; + import NodeId from "@app/components/NodeId.svelte"; export let repos: RepoInfo[]; export let config: Config; @@ -68,6 +69,13 @@ + + +
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte index 45b561f4f..1791fddc3 100644 --- a/src/views/repo/Issues.svelte +++ b/src/views/repo/Issues.svelte @@ -1,14 +1,32 @@ + + + + {project.data.name} + + Issues + + 
     
     {#each issues as issue}
diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
index 51db06009..b67a46d0e 100644
--- a/src/views/repo/Layout.svelte
+++ b/src/views/repo/Layout.svelte
@@ -8,8 +8,6 @@
   import NakedButton from "@app/components/NakedButton.svelte";
 
   export let repo: RepoInfo;
-
-  $: project = repo.payloads["xyz.radicle.project"]!;