diff --git a/pages/api/avatar/[name].tsx b/pages/api/avatar/[name].tsx index f6db18e..c4605a5 100644 --- a/pages/api/avatar/[name].tsx +++ b/pages/api/avatar/[name].tsx @@ -1,7 +1,7 @@ import { ImageResponse } from "@vercel/og"; import { NextRequest, NextResponse } from "next/server"; import { renderToReadableStream } from "react-dom/server"; -import { generateGradient } from "../../../utils/gradient"; +import { generateGradient, generateSolidColor } from "../../../utils/gradient"; export const config = { runtime: "experimental-edge", @@ -11,12 +11,14 @@ export default async function (req: NextRequest, res: NextResponse) { const url = new URL(req.url); const name = url.searchParams.get("name"); const text = url.searchParams.get("text"); + const noise = url.searchParams.get("noise"); + const solid = url.searchParams.get("solid"); const size = Number(url.searchParams.get("size") || "120"); const [username, type] = name?.split(".") || []; const fileType = type?.includes("svg") ? "svg" : "png"; const gradient = generateGradient(username || Math.random() + ""); - + const solidColor = generateSolidColor(username || Math.random() + ""); const avatar = ( + + + + + + - + {fileType === "svg" && text && ( 1 ? "54%" : "55.5%"} alignmentBaseline="central" dominantBaseline="central" textAnchor="middle" fill="#fff" fontFamily="sans-serif" - fontSize={(size * 0.9) / text.length} + fontSize={(size * 0.7) / text.length} > {text} diff --git a/utils/gradient.ts b/utils/gradient.ts index 8ff5362..37eb07a 100644 --- a/utils/gradient.ts +++ b/utils/gradient.ts @@ -9,7 +9,7 @@ export function djb2(str: string) { } export function generateGradient(username: string) { - const c1 = color({ h: djb2(username) % 360, s: 0.95, l: 0.5 }); + const c1 = color({ h: djb2(username) % 360, s: 0.8, l: 0.6 }); const second = c1.triad()[1].toHexString(); return { @@ -17,3 +17,11 @@ export function generateGradient(username: string) { toColor: second, }; } + +export function generateSolidColor(username: string) { + const c = color({ h: djb2(username) % 360, s: 0.7, l: 0.65 }); + + return { + color: c.toHexString(), + }; +}