From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED, URIBL_DBL_BLOCKED_OPENDNS autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1695820208; bh=SBRk7a8hzJ8UZKhnvkQUex7EiC4fnAtlyuMCq4ph2aM=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=raeBnsRC9KS6sLD18Aajx9vR1GJSFbwypM/vIWKtj52fd7Jkm5jB57Hfomkv9NqYb q+LvW+99c1UWy6GUxBPLICVKHWrxQ42HLPwkSOZ3ThfOjV6rDYqPL2+or+AbyNpVoe veYU4+9TqQPk/PrEGkRjy7BS/8QEkY6zfUzQpLSubj2nPSob0dgFBodXZU83wEvjbP vmNcNJHmLYowi/YHEHF/rt7yjzC0M7ZBhA9GjIpCuQDMmV5aheY/l8OcXHHIzBPEMC Qo3BGXjJIW900Yk/t74CsMSZXNWoulaN1gpdMK6u2OSk6P52n5hEWNTsRWbdYsi7l3 mM+/cEroHnVZQ== Received: from localhost.localdomain (unknown [175.158.50.50]) by gnuweeb.org (Postfix) with ESMTPSA id AC51824B799; Wed, 27 Sep 2023 20:10:06 +0700 (WIB) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , Irvan Malik Azantha , Memet Zx , GNU/Weeb Mailing List Subject: [PATCH v2 1/2] fix(page): fix getFixedRandomColor() function Date: Wed, 27 Sep 2023 20:09:33 +0700 Message-Id: <20230927130934.1237-2-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.34.1.windows.1 In-Reply-To: <20230927130934.1237-1-kiizuha@gnuweeb.org> References: <20230927130934.1237-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: The previous code for `getFixedRandomColor()`, where Tailwind dynamically creates class names, does not work properly. This is because Tailwind does not support dynamic class names such as string concatenation or conditional class names like `text-${color}-${level}`. Tailwind uses regular expressions to search for complete class names. Reference: https://tailwindcss.com/docs/content-configuration#dynamic-class-names Fixes: e21879bf509a ("feat(page): implement chat bubble message rendering") Signed-off-by: Muhammad Rizki --- index.html | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 64e5884..81162db 100644 --- a/index.html +++ b/index.html @@ -394,17 +394,27 @@ } function getFixedRandomColor(name) { - const colors = [ - "red", "yellow", "blue", "sky", "purple", "orange", - "amber", "lime", "green", "emerald", "teal", "cyan", - "indigo", "violet", "fuchsia", "pink", "rose" - ]; - - const c = colors[hashCode(name) % colors.length]; - return [ - "text-" + c + "-400", - "border-" + c + "-400", - ]; + const colorData = { + red: "text-red-400 border-red-400", + yellow: "text-yellow-400 border-yellow-400", + blue: "text-blue-400 border-blue-400", + sky: "text-sky-400 border-sky-400", + purple: "text-purple-400 border-purple-400", + orange: "text-orange-400 border-orange-400", + amber: "text-amber-400 border-amber-400", + lime: "text-lime-400 border-lime-400", + green: "text-green-400 border-green-400", + emerald: "text-emerald-400 border-emerald-400", + teal: "text-teal-400 border-teal-400", + cyan: "text-cyan-400 border-cyan-400", + indigo: "text-indigo-400 border-indigo-400", + violet: "text-violet-400 border-violet-400", + fuchsia: "text-fuchsia-400 border-fuchsia-400", + pink: "text-pink-400 border-pink-400", + rose: "text-rose-400 border-rose-400", + }; + const colorNames = Object.keys(colorData); + return colorData[colorNames[hashCode(name) % colorNames.length]].split(" "); } function cleanMessageText(text) { -- Muhammad Rizki