card metadata info

fezcode · fezcode · commit 959347a205c5 · 2025-11-03T18:43:51.000+03:00
diff --git a/public/posts/about-fezcodex.txt b/public/posts/about-fezcodex.txt
@@ -9,5 +9,5 @@ so expect plenty of reviews and musings on the latest (or classic) video games t
 And when I'm not gaming, I'm probably lost in a good book, binging a captivating series like _"The Bear"_,  or grooving to some timeless tunes (_De La Soul always on rotation_).
 
 This space is entirely my own, a place where my ideas, opinions, and sometimes questionable tastes run wild.
-I share whatever I want, whenever I want, without apology. So, if you're looking for polished, perfectly curated content,
+If you're looking for polished, perfectly curated content,
 you might find some of that, but mostly, you'll find genuine, unadulterated me. Dive in, explore, and enjoy the ride!
diff --git a/public/posts/dnd-content.txt b/public/posts/dnd-content.txt
@@ -5,6 +5,8 @@
 Dungeons & Dragons is _kinda_ fun, offering engaging narratives and strategic depth.
 It's a hobby that provides a welcome escape and a platform for creative exploration.
 
+[Divinity - Original Sin 2 (Main Theme)](https://www.youtube.com/watch?v=UkgVL05NsWo)
+
 ## Introduction
 
 Let's talk about some of the D&D and RPG content I enjoy.
@@ -18,6 +20,8 @@ The process of building and painting these miniatures is a satisfying aspect of
 complementing the imaginative battles they represent. It's an activity that combines creativity,
 strategic thinking, and a sense of community, all contributing to a well-rounded pastime.
 
+[Secret Level - Warhammer Episode](https://www.youtube.com/watch?v=ncauRK9f75Q)
+
 ## D&D, RPG, and Fantasy: A Quick Dive
 
 It's easy to use terms like D&D, RPG, and fantasy interchangeably, and honestly, I often do! While they're distinct, they share a lot of common ground, especially in the realm of immersive storytelling and world-building.
diff --git a/src/components/LogCard.js b/src/components/LogCard.js
@@ -9,6 +9,7 @@ import {
   MusicNote,
   Television,
   ForkKnife,
+  Star
 } from '@phosphor-icons/react';
 
 const categoryIcons = {
@@ -71,6 +72,22 @@ const LogCard = ({ log, index, totalLogs }) => {
 
   const cardStyle = categoryStyles[category] || {};
 
+  const renderStars = (rating) => {
+    const stars = [];
+    for (let i = 0; i < 5; i++) {
+      if (i < rating) {
+        stars.push(
+          <Star key={i} size={16} weight="fill" className="text-yellow-400" />,
+        );
+      } else {
+        stars.push(
+          <Star key={i} size={16} weight="fill" className="text-gray-500" />,
+        );
+      }
+    }
+    return <div className="flex ml-1 mt-1">{stars}</div>;
+  };
+
   return (
     <Link to={`/logs/${slug}`} className="block">
       <div
@@ -112,9 +129,7 @@ const LogCard = ({ log, index, totalLogs }) => {
         <div className="flex items-center justify-between">
           <div className="flex items-center">
             <div className="text-yellow-400">
-              {[...Array(rating)].map((_, i) => (
-                <span key={i}>★</span>
-              ))}
+              {renderStars(rating)}
             </div>
             <div className="text-gray-400 ml-2">({rating}/5)</div>
           </div>
diff --git a/src/components/LogMetadata.js b/src/components/LogMetadata.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Label from './Label';
 import { Star } from '@phosphor-icons/react';
 import { FaExternalLinkAlt } from 'react-icons/fa';
+import colors from '../config/colors';
 
 const LogMetadata = ({ metadata }) => {
   if (!metadata) {
@@ -24,10 +25,23 @@ const LogMetadata = ({ metadata }) => {
     return <div className="flex ml-1 mt-1">{stars}</div>;
   };
 
+  const logMetadataBackgroundColorStyle = {
+    backgroundColor: colors[`${metadata.category.toLowerCase()}-alpha-10`],
+  };
+
   return (
     <aside className="sticky top-24">
-      <div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
-        <h3 className="text-lg font-semibold text-gray-100 mb-4 border-b pb-2 border-gray-500">
+      <div
+        className="p-6 rounded-lg border"
+        style={{
+          backgroundColor: colors[`${metadata.category.toLowerCase()}-alpha-10`],
+          borderColor: colors[`${metadata.category.toLowerCase()}-alpha-50`],
+        }}
+      >
+        <h3
+          className="text-lg font-semibold mb-4 border-b pb-2 border-gray-500"
+          style={{ color: colors[metadata.category.toLowerCase()] }}
+        >
           About Log
         </h3>
         <div className="space-y-4">
