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=1695813014; bh=DtTMzjGmRIh4heuH7PHzhOlmeWTcv/uJcmaap0se0IQ=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=lOyMAfP3Xyr747w1NUMXIyZhqtm/Nm092YgwgxAQeeBdETd5MtgqR/X63XfYTLo8d bBVbqw1nn9rw1pI6JPsk7O9gFTJueT84DwiR2Xkh8+XzboSesK6ue/ldwYyTLWs7mn O6M3dWBPQrns31j/GaWF1sDmyP3LWdcGDU+G8cjtCW7RagKXYyJ7pzHzhrZSaznYCV iJatQdyjB0NKEyoYNDT4GfRjooJEgEMSvqCJ7+3+9J2zQ0LT4dPK4ktoPBomsPur3g KSazl57MeMv/qROIXCsseRe0Kskhz6rNojkjIxl2OSrmENhVg1QQ7MObkQmrxZCPSE uhiPZOys6JfYw== Received: from localhost.localdomain (unknown [175.158.50.50]) by gnuweeb.org (Postfix) with ESMTPSA id 65B5724B784; Wed, 27 Sep 2023 18:10:12 +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 v1 1/1] fix(page): fix getFixedRandomColor() function Date: Wed, 27 Sep 2023 18:09:47 +0700 Message-Id: <20230927110947.1365-2-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.34.1.windows.1 In-Reply-To: <20230927110947.1365-1-kiizuha@gnuweeb.org> References: <20230927110947.1365-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..83cb0ff 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]]; } function cleanMessageText(text) { -- Muhammad Rizki