[PATCH v1 0/1] Fix getFixedRandomColor() function

[PATCH v1 0/1] Fix getFixedRandomColor() function

[Muhammad Rizki]

This series contains fixes:
- Fix getFixedRandomColor() to fix logic Tailwind class name selection.

Please give it a test, thanks!

Muhammad Rizki (1):
  fix(page): fix getFixedRandomColor() function

 index.html | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)


base-commit: e4dc93f72a2bb7537a0e67748f3b406c798960a6
--
Muhammad Rizki

[PATCH v1 1/1] fix(page): fix getFixedRandomColor() function

[Muhammad Rizki]

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 <kiizuha@gnuweeb.org>
---
 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

Re: [PATCH v1 0/1] Fix getFixedRandomColor() function

[Ammar Faizi]

On 9/27/23 6:09 PM, Muhammad Rizki wrote:
> This series contains fixes:
> - Fix getFixedRandomColor() to fix logic Tailwind class name selection.
> 
> Please give it a test, thanks!

I did:

- git apply your patch
- npm run build
- Clear browser cache
- Look at https://www.gnuweeb.org/

It still shows white font color. Looking at the console, it throws these errors:

lockdown-run.js:17 Lockdown failed: TypeError: At intrinsics.Object.groupBy expected boolean not function
   at isAllowedPropertyValue (lockdown-install.js:1:53384)
   at isAllowedProperty (lockdown-install.js:1:53807)
   at visitProperties (lockdown-install.js:1:55095)
   at isAllowedPropertyValue (lockdown-install.js:1:53041)
   at isAllowedProperty (lockdown-install.js:1:53807)
   at visitProperties (lockdown-install.js:1:55095)
   at lockdown-install.js:1:55523
   at repairIntrinsics (lockdown-install.js:1:144597)
   at lockdown-install.js:1:145462
   at lockdown-run.js:4:3
(anonymous) @ lockdown-run.js:17

lockdown-more.js:99 Protecting intrinsics failed: ReferenceError: harden is not defined
   at lockdown-more.js:69:13
   at Set.forEach (<anonymous>)
   at protectIntrinsics (lockdown-more.js:44:22)
   at lockdown-more.js:97:5
(anonymous) @ lockdown-more.js:99

-- 
Ammar Faizi

Re: [PATCH v1 0/1] Fix getFixedRandomColor() function

[Muhammad Rizki]

On 27/09/2023 18.31, Ammar Faizi wrote:
> On 9/27/23 6:09 PM, Muhammad Rizki wrote:
>> This series contains fixes:
>> - Fix getFixedRandomColor() to fix logic Tailwind class name selection.
>>
>> Please give it a test, thanks!
> 
> I did:
> 
> - git apply your patch
> - npm run build
> - Clear browser cache
> - Look at https://www.gnuweeb.org/
> 
> It still shows white font color. Looking at the console, it throws these 
> errors:

Ahh, I forgot to add .split(" "), will patch it in the next series.

> 
> lockdown-run.js:17 Lockdown failed: TypeError: At 
> intrinsics.Object.groupBy expected boolean not function
>    at isAllowedPropertyValue (lockdown-install.js:1:53384)
>    at isAllowedProperty (lockdown-install.js:1:53807)
>    at visitProperties (lockdown-install.js:1:55095)
>    at isAllowedPropertyValue (lockdown-install.js:1:53041)
>    at isAllowedProperty (lockdown-install.js:1:53807)
>    at visitProperties (lockdown-install.js:1:55095)
>    at lockdown-install.js:1:55523
>    at repairIntrinsics (lockdown-install.js:1:144597)
>    at lockdown-install.js:1:145462
>    at lockdown-run.js:4:3
> (anonymous) @ lockdown-run.js:17
> 
> lockdown-more.js:99 Protecting intrinsics failed: ReferenceError: harden 
> is not defined
>    at lockdown-more.js:69:13
>    at Set.forEach (<anonymous>)
>    at protectIntrinsics (lockdown-more.js:44:22)
>    at lockdown-more.js:97:5
> (anonymous) @ lockdown-more.js:99
> 

I think this is irrelevant for current bug? I don't encounter these errors.

Re: [PATCH v1 0/1] Fix getFixedRandomColor() function

[Ammar Faizi]

On 9/27/23 7:28 PM, Muhammad Rizki wrote:
> I think this is irrelevant for current bug? I don't encounter these errors.

Probably. If someone knows what to do, call it out.

-- 
Ammar Faizi