Skip to content

Commit

Permalink
feature[kudos-community-www]: new homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
mankins committed Aug 23, 2023
1 parent eacef22 commit 6c2047f
Show file tree
Hide file tree
Showing 14 changed files with 577 additions and 169 deletions.
2 changes: 2 additions & 0 deletions kudos-community/www/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"scripts": {
"dev": "dotenv vite dev",
"dev:host": "dotenv -- vite dev --host",
"build": "vite build",
"preview": "vite preview",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
Expand Down Expand Up @@ -35,6 +36,7 @@
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"sass": "^1.62.0",
"string-hash": "^1.1.3",
"svelte": "^3.54.0",
"tailwindcss": "^3.3.1",
"uuid": "^9.0.0",
Expand Down
7 changes: 7 additions & 0 deletions kudos-community/www/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions kudos-community/www/src/lib/components/Icon.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
export type BrandIcons =
| 'brand/facebook'
| 'brand/github'
| 'brand/google'
| 'brand/instagram'
| 'brand/nft'
Expand Down
14 changes: 12 additions & 2 deletions kudos-community/www/src/lib/components/Nav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,19 @@
export let showBanner = false;
export let brand = 'Kudos';
export let enableLogin = true;
export let autoHide = true;
let hidden = true;
let translateY = 0;
let scrollY = 0;
$: {
hidden = scrollY < 100;
translateY = scrollY < 100 ? 0 : -20; // Adjust this value as needed
if (autoHide) {
hidden = scrollY < 100;
translateY = scrollY < 100 ? 0 : -20; // Adjust this value as needed
} else {
hidden = false;
}
}
const navItems = [
Expand Down Expand Up @@ -79,6 +84,11 @@
</ol>

<div class="flex items-center justify-end">
<a href="https://www.github.com/LoremLabs/kudos" target="_new">
<span class="sr-only">@LoremLabs Kudos Repo</span>
<Icon name="brand/github" class="w-8 h-8 textblack" />
</a>

{#if enableLogin}
{#if $page.data?.loggedIn}
<a href="/dashboard" class="px-3 text-cyan-200 underline">
Expand Down
19 changes: 19 additions & 0 deletions kudos-community/www/src/lib/components/Pill.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script>
import { colorizer, defaultPalette } from '$lib/utils/colorizer';
export let type = '';
export let pallette = defaultPalette;
export let bg = '';
export let colorize = true;
export { klass as class };
let klass = '';
</script>

<span
title={`${type}`}
on:click
class={`flex h-5 cursor-pointer flex-row flex-nowrap items-center justify-center text-ellipsis whitespace-nowrap rounded-full border-2 border-white px-1.5 py-1 text-center font-mono text-xs font-thin lowercase tracking-tighter text-white md:h-6 ${klass}`}
style={`background-color:${colorize ? colorizer(type, pallette) : bg}; font-size: 0.6rem;`}
>
<slot />
</span>
8 changes: 8 additions & 0 deletions kudos-community/www/src/lib/static/icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions kudos-community/www/src/lib/utils/colorizer.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import colors from 'tailwindcss/colors';
import stringHash from 'string-hash';

export const defaultPalette = [
'#3366CC',
'#DC3912',
'#FF9900',
'#109618',
'#990099',
'#3B3EAC',
'#0099C6',
'#DD4477',
'#66AA00',
'#FF0099',
'#B82E2E',
'#316395',
'#994499',
'#22AA99',
'#AACA51',
'#6633CC',
'#F67370',
'#8B0707',
'#329262',
'#5574A6',
'#3B3EAC'
];

[
'red',
'blue',
'green',
'yellow',
'pink',
'amber',
'purple',
'sky',
'indigo',
'rose',
'slate'
].forEach((color) => {
Object.values(colors[color]).forEach((value, index) => {
if (index > 2 && index < 9 && index % 2 === 0) {
// console.log(index, color, value);
defaultPalette.push(value);
}
});
});

// for any text, always return a consistent color
export function colorizer(name: string, palette: string[] = defaultPalette) {
name = (name || '??').toLowerCase();
// console.log((Math.abs(stringHash(name)) % palette.length), stringHash(name), name, palette.length);
return palette[stringHash(name) % palette.length];
}
Loading

0 comments on commit 6c2047f

Please sign in to comment.