Skip to content

Commit

Permalink
Merge pull request #24 from kjellherzke/dev
Browse files Browse the repository at this point in the history
feat: BREAKING new visuals; rm: unnecessary content;
  • Loading branch information
kjellherzke authored Jun 2, 2024
2 parents f43c819 + 59e3d59 commit 00e0e45
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 28 deletions.
47 changes: 23 additions & 24 deletions src/components/learningpath/Visualizer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// - Nodes can have alternatively (preferred) node url, so that the node itself proposes a new node list
// - BUT: Nodes can only have either a markdown or a new node url, whereas Node Urls have priority

// import { useState } from "react";
import tailwind from "../../../tailwind.config";

export interface Path {
title: string;
Expand All @@ -29,9 +29,10 @@ export interface PathNode {
nodes?: PathNode[];
}

const generationColor = (generation: number, isTransparent = false) =>
(generation == 0 ? "#F8E16C" : generation == 1 ? "#00C49A" : "#156064") +
(isTransparent ? "A0" : "");
const generationColor = (generation: number): string =>
(tailwind.theme.extend.colors.visualGraphs as Record<string, string>)[
`generation${generation}`
];

const toMarkdownUrl = (nodeUrl: string) =>
nodeUrl.substring(0, nodeUrl.length - 4) + "md";
Expand Down Expand Up @@ -59,11 +60,16 @@ function SingleNode({
style={{
left: data.x,
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",
borderColor: generationColor(data.generation),
fontWeight: data.generation == 0 ? 500 : 400,
color:
data.generation == 0
? tailwind.theme.extend.colors.background
: generationColor(data.generation),
backgroundColor:
data.generation == 0
? generationColor(data.generation)
: tailwind.theme.extend.colors.background,
}}
>
<span>{data.name}</span>
Expand Down Expand Up @@ -120,32 +126,25 @@ function NodeLine({ data, from }: { data: PathNode; from: PathNode }) {
>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id={gradientId}>
<stop
offset="20%"
stopColor={generationColor(from.generation, data?.nodeUrl == null)}
/>
<stop offset="20%" stopColor={generationColor(from.generation)} />
<stop
offset="50%"
stopColor={generationColor(
data.generation + 1,
data?.nodeUrl == null,
)}
stopColor={generationColor(data.generation + 1)}
opacity={0.2}
/>
<stop
offset="80%"
stopColor={generationColor(data.generation, data?.nodeUrl == null)}
/>
<stop offset="80%" stopColor={generationColor(data.generation)} />
</linearGradient>
</defs>
<line
x1={from.x + from.width / 2}
y1={from.y + from.height / 2}
x2={data.x + data.width / 2}
y2={data.y + data.height / 2}
strokeWidth={from.generation == 0 ? 7 : 5}
stroke={`url(#${gradientId})`}
strokeDasharray={data.generation > 1 ? "5,5" : "none"}
// strokeWidth={from.generation == 0 ? 7 : 5}
strokeWidth={5}
// stroke={`url(#${gradientId})`}
stroke={generationColor(data.generation)}
// strokeDasharray={data.generation > 1 ? "5,5" : "none"}
/>
</svg>
);
Expand Down
15 changes: 11 additions & 4 deletions tailwind.config.js → tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
/** @type {import('tailwindcss').Config} */
import type { Config } from "tailwindcss";

export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
fontFamily: {
sans: "Space Grotesk",
},

extend: {
colors: {
primary: "#FFFFFF",
secondary: "#A8A8A8",
slate: "#303030",
background: "#111111",
visualGraphs: {
generation0: "#f9f871",
generation1: "#ffc75f",
generation2: "#ff9671",
generation3: "#ff6f91",
generation4: "#d65db1",
generation5: "#845ec2",
},
},
},
},
plugins: [],
};
} satisfies Config;

0 comments on commit 00e0e45

Please sign in to comment.