From 620db874bc28e89ef8b0b57106f38e0086df0027 Mon Sep 17 00:00:00 2001
From: kjellherzke <kjell.herzke@gmail.com>
Date: Sun, 2 Jun 2024 11:47:57 +0200
Subject: [PATCH] feat: new styling for generation 0 (titles); temporary
 showcase of all currnet possible styles; next update: removing and cleaning
 up visuals

---
 src/components/learningpath/Visualizer.tsx | 26 ++++++++++++++++++----
 src/index.css                              |  4 ++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/learningpath/Visualizer.tsx b/src/components/learningpath/Visualizer.tsx
index e5f6c21..8c81e1a 100644
--- a/src/components/learningpath/Visualizer.tsx
+++ b/src/components/learningpath/Visualizer.tsx
@@ -61,6 +61,9 @@ function SingleNode({
         top: data.y,
         color: generationColor(data.generation, data?.nodeUrl == null),
         borderColor: generationColor(data.generation, data?.nodeUrl == null),
+
+        // special styling for generation 0 (titles)
+        fontWeight: data.generation == 0 ? "bold" : "normal",
       }}
     >
       <span>{data.name}</span>
@@ -140,8 +143,7 @@ function NodeLine({ data, from }: { data: PathNode; from: PathNode }) {
         y1={from.y + from.height / 2}
         x2={data.x + data.width / 2}
         y2={data.y + data.height / 2}
-        strokeWidth={4}
-        // stroke={generationColor(data.generation)}
+        strokeWidth={from.generation == 0 ? 7 : 5}
         stroke={`url(#${gradientId})`}
         strokeDasharray={data.generation > 1 ? "5,5" : "none"}
       />
@@ -211,7 +213,15 @@ export default function LearnPathVisualRenderer({
           <Node
             setMarkdownUrl={setMarkdownUrl}
             setNodeUrl={setNodeUrl}
-            data={{ ...path, name: path.title, generation: 0 }}
+            data={{
+              name: path.title,
+              generation: 0,
+              height: path.height,
+              width: path.width,
+              x: path.x,
+              y: path.y,
+              markdownUrl: path.markdownUrl,
+            }}
             from={null}
           />
           {path.nodes?.map((node, i, elements) => (
@@ -222,7 +232,15 @@ export default function LearnPathVisualRenderer({
               data={node}
               from={
                 i == 0
-                  ? { ...path, name: path.title, generation: 0 }
+                  ? {
+                      name: path.title,
+                      generation: 0,
+                      height: path.height,
+                      width: path.width,
+                      x: path.x,
+                      y: path.y,
+                      markdownUrl: path.markdownUrl,
+                    }
                   : elements[i - 1]
               }
             />
diff --git a/src/index.css b/src/index.css
index 4284fa9..e22611f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,6 +38,10 @@ ul li {
   @apply pl-4;
 }
 
+a {
+  @apply text-blue-400 underline;
+}
+
 code {
   @apply bg-secondary bg-opacity-15 py-0.5 px-2 rounded-xl font-medium;
 }