temp

src/app/topic/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import { Zilla_Slab } from 'next/font/google'
 import { topics } from '@/app/db/data'
 import { notFound } from 'next/navigation'
+import string2hex from '@/app/utils/string2hex'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -17,7 +18,10 @@ export default function Page({
   const { name, description, wiki } = topic
 
   return (
-    <div className='flex p-4 lg:p-8 mx-auto bg-slate-200 shadow-slate-300 shadow-sm rounded-md max-w-2xl flex-col gap-4'>
+    <div
+      style={{ backgroundColor: string2hex(description) }}
+      className='flex p-4 lg:p-8 mx-auto bg-slate-200 shadow-slate-300 shadow-sm rounded-md max-w-2xl flex-col gap-4'
+    >
       <h1 className={`${zillaSlab.className} text-5xl`}>{name}</h1>
       <p className='text-slate-700 text-lg'>{description}</p>
       <p>

src/app/utils/string2hex.ts

@@ -0,0 +1,22 @@
+export default function string2hex(str: string): string {
+  // Hash function to convert string to a number
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+
+  // Convert the hash to a hex color code
+  let color = '#'
+  for (let i = 0; i < 3; i++) {
+    // Ensuring minimum brightness for each component to make text stand out
+    // Adjust the minimum brightness as needed (e.g., 0x80 for brighter colors)
+    const minBrightness = 0x80
+    const value =
+      (((hash >> (i * 8)) & 0xff) % (0xff - minBrightness)) + minBrightness
+    color += ('00' + value.toString(16)).substr(-2)
+  }
+
+  return color
+}