improve skill svg generation

generate/portfolio/skills.ejs

@@ -8,23 +8,17 @@
 			xmlns="http://www.w3.org/1999/xhtml"
 			xmlns:xlink="http://www.w3.org/1999/xlink"
 		>
-			<h2>Programming Languages</h2>
-
-			<%- include("badges.ejs", { badges: data.programmingLanguage }) %>
-
-			<h2>Front End</h2>
-
-			<h3>Web</h3>
-
-			<%- include("badges.ejs", { badges: data.frontEndWeb }) %>
-
-			<h3>Desktop</h3>
-
-			<%- include("badges.ejs", { badges: data.frontEndDesktop }) %>
-
-			<h3>Game development</h3>
-
-			<%- include("badges.ejs", { badges: data.gameDev }) %>
+			<% for (let key in data) { %>
+				<% if(data[key] instanceof Array){ %>
+					<h2><%- key %></h2>
+					<%- include("badges.ejs", { badges: data[key] }) %>
+				<% } else{ %>  
+					<% for (let subKey in data[key]) { %>
+						<h3><%- subKey %></h3>
+						<%- include("badges.ejs", { badges: data[key][subKey] }) %>
+					<% } %>
+				<% } %>
+			<% } %>
 		</div>
 	</foreignObject>
 </svg>

generate/portfolio/skills.json

@@ -1,12 +1,15 @@
 {
-	"programmingLanguage": [
+	"Programming Languages": [
 		"javascript",
 		"typescript",
 		"python",
 		"rust",
 		"csharp"
 	],
-	"frontEndWeb": ["react", "svelte", "tailwindcss"],
-	"frontEndDesktop": ["gtk", "electron", "tauri"],
-	"gameDev": ["unity", "godotengine Godot"]
+	"Front End": {
+		"Web": ["react", "svelte", "tailwindcss"],
+		"Desktop": ["gtk", "electron", "tauri"]
+	},
+	"Game Development": ["unity", "godotengine Godot"],
+	"Etc": ["figma", "markdown"]
 }

generate/postProcess.ts

@@ -57,17 +57,50 @@ function generatePortfolioSVGs() {
 
 	const style = readFileSync("./generate/portfolio/style.css", "utf-8")
 
-	const data: { [key in keyof typeof skills]: Badge[] } = {
-		programmingLanguage: [],
-		frontEndWeb: [],
-		frontEndDesktop: [],
-		gameDev: [],
-	}
+	const data: {
+		[key: string]: Badge[] | { [key: string]: Badge[] }
+	} = {}
 
-	for (const skillCategory in skills) {
-		skills[skillCategory as keyof typeof skills].forEach((badge: string) => {
-			data[skillCategory as keyof typeof skills].push(parseBadge(badge))
-		})
+	// C O G N I T O - H A Z A R D
+	// THIS PART OF THE CODE WAS WRITTEN IN 3 AM
+	// C O G N I T O - H A Z A R D
+
+	for (const key in skills) {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		if (skills[key] instanceof Array) {
+			if (!data[key]) {
+				data[key] = []
+			}
+
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			;(skills[key] as string[]).forEach((badge) =>
+				(data[key] as Badge[]).push(parseBadge(badge))
+			)
+		} else {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			for (const subKey in skills[key]) {
+				if (!data[key]) data[key] = {}
+
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				if (!data[key][subKey]) {
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
+					data[key][subKey] = []
+				}
+
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				skills[key][subKey].forEach((badge: string) =>
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
+					(data[key][subKey] as Badge[]).push(parseBadge(badge))
+				)
+			}
+		}
 	}
 
 	const renderedSVG = ejs.render(