Repository: hashrock/deno-avatar
Branch: main
Commit: 94e7a43e3dbd
Files: 11
Total size: 14.2 KB
Directory structure:
gitextract_hlz3pruk/
├── .vscode/
│ └── settings.json
├── avatars/
│ ├── Avatar1.tsx
│ ├── Avatar2.tsx
│ ├── Avatar3.tsx
│ └── Avatar4.tsx
├── deno.json
├── deps.ts
├── main.tsx
├── public/
│ ├── index.html
│ └── style.css
└── util.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .vscode/settings.json
================================================
{
"deno.enable": true,
"deno.lint": true,
"deno.unstable": true
}
================================================
FILE: avatars/Avatar1.tsx
================================================
/** @jsx h */
import { h } from "../deps.ts";
export function Avatar1(bgColor: string, denoColor: string[]) {
return (
);
}
================================================
FILE: avatars/Avatar2.tsx
================================================
/** @jsx h */
import { h } from "../deps.ts";
export function Avatar2(bgColor: string, denoColor: string[]) {
return (
);
}
================================================
FILE: avatars/Avatar3.tsx
================================================
/** @jsx h */
import { h } from "../deps.ts";
export function Avatar3(bgColor: string, denoColor: string[]) {
return (
);
}
================================================
FILE: avatars/Avatar4.tsx
================================================
/** @jsx h */
import { h } from "../deps.ts";
export function Avatar4(bgColor: string, denoColor: string[]) {
return (
);
}
================================================
FILE: deno.json
================================================
{
"tasks": {
"start": "deno run -A --watch main.tsx"
}
}
================================================
FILE: deps.ts
================================================
export {
h,
jsx,
serve,
serveStatic,
} from "https://deno.land/x/sift@0.6.0/mod.ts";
================================================
FILE: main.tsx
================================================
/** @jsx h */
import { h, jsx, serve, serveStatic } from "./deps.ts";
import { Avatar1 } from "./avatars/Avatar1.tsx";
import { Avatar2 } from "./avatars/Avatar2.tsx";
import { Avatar3 } from "./avatars/Avatar3.tsx";
import { Avatar4 } from "./avatars/Avatar4.tsx";
import { calcChecksum, Random } from "./util.ts";
interface IconProps {
seed: string;
}
// taken from tailwind color pallete: 100
const bgColors = [
"#fee2e2",
"#ffedd5",
"#fef3c7",
"#fef9c3",
"#ecfccb",
"#dcfce7",
"#d1fae5",
"#ccfbf1",
];
// taken from tailwind color pallete: 200, 600, 900
const denoColors = [
["#fecaca", "#dc2626", "#7f1d1d"],
["#d9f99d", "#65a30d", "#365314"],
["#a7f3d0", "#059669", "#064e3b"],
["#bae6fd", "#0284c7", "#0c4a6e"],
["#ddd6fe", "#7c3aed", "#4c1d95"],
];
const components = [
Avatar1,
Avatar2,
Avatar3,
Avatar4,
];
const Icon = (props: IconProps) => {
if (props.seed === undefined) {
props.seed = "";
}
const checksum = calcChecksum(props.seed);
const rand = new Random(checksum);
const bgColor = bgColors[rand.nextInt(0, bgColors.length - 1)];
const denoColor = denoColors[rand.nextInt(0, denoColors.length - 1)];
const component = components[rand.nextInt(0, components.length - 1)];
return (
component(bgColor, denoColor)
);
};
const NotFound = () => (
Page not found
);
const now = new Date();
now.setDate(now.getDate() + 14);
const init = {
headers: [["content-type", "image/svg+xml"], ["Expires", now.toUTCString()], [
"Cache-Control",
"public, max-age=604800",
]],
};
serve({
"/": serveStatic("public/index.html", { baseUrl: import.meta.url }),
"/avatar/:seed": (request, _connInfo, params) =>
jsx(, init),
"/:filename+": serveStatic("public", { baseUrl: import.meta.url }),
404: () => jsx(, { status: 404 }),
});
================================================
FILE: public/index.html
================================================
Deno Avatar
================================================
FILE: public/style.css
================================================
body {
background-color: rgb(237, 242, 245);
display: flex;
justify-content: center;
}
h1 {
font-size: 1.5rem;
font-weight: 500;
color: rgb(0, 0, 0);
margin-top: 3rem;
text-align: center;
}
.card{
background: white;
padding: 4rem 3rem 2rem 3rem;
margin-top: 8rem;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
text-align: center;
position: relative;
}
button {
background: rgb(0, 0, 0);
border: none;
color: white;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
}
#url{
font-size: inherit;
width: 400px;
border: solid 1px #d1d1d1;
padding: 0.5rem;
border-radius: 4px;
text-align: center;
color: #666;
}
.cord{
position: absolute;
top: -100%;
width: 300px;
left: calc(50% - 150px);
height: 400px;
}
.avatar{
border-radius: 100%;
}
.logo{
margin: 6rem auto 0 auto;
display: block;
}
.github-logo{
display: block;
width: 1.8rem;
}
.github-link{
margin: 1rem auto 0 auto;
display: block;
width: 1.8rem;
}
================================================
FILE: util.ts
================================================
// XorShift by kotofurumiya
// https://sbfl.net/blog/2017/06/01/javascript-reproducible-random/
export class Random {
x: number;
y: number;
z: number;
w: number;
constructor(seed = 88675123) {
this.x = 123456789;
this.y = 362436069;
this.z = 521288629;
this.w = seed;
}
// XorShift
next() {
const t = this.x ^ (this.x << 11);
this.x = this.y;
this.y = this.z;
this.z = this.w;
return this.w = (this.w ^ (this.w >>> 19)) ^ (t ^ (t >>> 8));
}
nextInt(min: number, max: number) {
const r = Math.abs(this.next());
return min + (r % (max + 1 - min));
}
}
export function calcChecksum(str: string) {
let checksum = 0;
for (let i = 0; i < str.length; i++) {
checksum += str.charCodeAt(i);
}
return checksum;
}
