public inbox for [email protected]
 help / color / mirror / Atom feed
From: Muhammad Rizki <[email protected]>
To: Ammar Faizi <[email protected]>
Cc: Muhammad Rizki <[email protected]>,
	Alviro Iskandar Setiawan <[email protected]>,
	Irvan Malik Azantha <[email protected]>,
	Memet Zx <[email protected]>,
	GNU/Weeb Mailing List <[email protected]>
Subject: [PATCH v2 1/2] fix(page): fix getFixedRandomColor() function
Date: Wed, 27 Sep 2023 20:09:33 +0700	[thread overview]
Message-ID: <[email protected]> (raw)
In-Reply-To: <[email protected]>

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 <[email protected]>
---
 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


  reply	other threads:[~2023-09-27 13:10 UTC|newest]

Thread overview: 7+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-09-27 13:09 [PATCH v2 0/2] Fix getFixedRandomColor() function Muhammad Rizki
2023-09-27 13:09 ` Muhammad Rizki [this message]
2023-09-27 13:09 ` [PATCH v2 2/2] feat(page): add error message for recent messages Muhammad Rizki
2023-09-27 13:14 ` [PATCH v2 0/2] Fix getFixedRandomColor() function Ammar Faizi
2023-09-27 14:54   ` Muhammad Rizki
2023-09-27 14:54     ` Ammar Faizi
2023-09-27 14:56       ` Muhammad Rizki

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox