Improve performance with get static paths

package.json

@@ -10,8 +10,7 @@
   },
   "dependencies": {
     "-": "^0.0.1",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",

src/app/competences/[competence]/page.tsx

@@ -1,3 +1,4 @@
+import { Card } from "@/components/ui/card";
 import { getCompetences } from "@/utils/getCompetences";
 import { getHboICompetenceLinks } from "@/utils/getHboICompetenceLinks";
 import { getRoles } from "@/utils/getRoles";
@@ -34,15 +35,15 @@ export default async function Competencepage({
 }: {
 	params: { competence: string };
 }) {
-	const formatCompetence = competence.replaceAll("-", " ");
+	const formatCompetence = decodeURI(competence);
 	const [competenceRoles, competenceData, hboiLinks] = await Promise.all([
 		getCompetenceRoles(formatCompetence),
 		getCompetence(formatCompetence),
 		getCompetenceHboI(formatCompetence),
 	]);
 	return (
 		<div className="flex flex-1 items-center justify-center">
-			<div className="flex flex-col gap-4 max-w-xl card">
+			<Card className="flex flex-col gap-4 max-w-xl p-4">
 				<div>
 					<h1>{formatCompetence}</h1>
 					<p className="lead">{competenceData.description}</p>
@@ -61,7 +62,7 @@ export default async function Competencepage({
 						<Link
 							key={role}
 							className="capitalize"
-							href={`/roles/${role.replaceAll(" ", "-")}`}>
+							href={`/roles/${encodeURI(role)}`}>
 							{role}
 						</Link>
 					))}
@@ -76,17 +77,22 @@ export default async function Competencepage({
 						))}
 					</div>
 				)}
-			</div>
+			</Card>
 		</div>
 	);
 }
 
+export async function generateStaticParams() {
+	const competences = await getCompetences();
+	return Object.keys(competences).map(key => decodeURI(key));
+}
+
 export async function generateMetadata({
 	params,
 }: {
 	params: { competence: string };
 }): Promise<Metadata> {
-	const competence = params.competence.replaceAll("-", " ");
+	const competence = decodeURI(params.competence);
 	const competences = await getCompetences();
 
 	return {

src/app/competences/page.tsx

@@ -45,9 +45,7 @@ export default async function Competencespage() {
 						<p className="w-60">{phases[section.title]}</p>
 						<div className="flex flex-col">
 							{section.data.map(comp => (
-								<Link
-									href={`/competences/${comp.replaceAll(" ", "-")}`}
-									key={comp}>
+								<Link href={`/competences/${encodeURI(comp)}`} key={comp}>
 									{comp}
 								</Link>
 							))}

src/app/error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+	error,
+	reset,
+}: {
+	error: Error;
+	reset: () => void;
+}) {
+	useEffect(() => {
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div>
+			<h2>Something went wrong!</h2>
+			<button onClick={() => reset()}>Try again</button>
+		</div>
+	);
+}

src/app/globals.css

@@ -1,83 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+ 
 @layer base {
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 222.2 47.4% 11.2%;
-
-		--muted: 210 40% 96.1%;
-		--muted-foreground: 215.4 16.3% 46.9%;
-
-		--popover: 0 0% 100%;
-		--popover-foreground: 222.2 47.4% 11.2%;
-
-		--card: 0 0% 100%;
-		--card-foreground: 222.2 47.4% 11.2%;
-
-		--border: 214.3 31.8% 91.4%;
-		--input: 214.3 31.8% 91.4%;
-
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
-
-		--secondary: 210 40% 96.1%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
-
-		--accent: 210 40% 96.1%;
-		--accent-foreground: 222.2 47.4% 11.2%;
-
-		--destructive: 0 100% 50%;
-		--destructive-foreground: 210 40% 98%;
-
-		--ring: 215 20.2% 65.1%;
-
-		--radius: 0.5rem;
-	}
-
-	.dark {
-		--background: 224 71% 4%;
-		--foreground: 213 31% 91%;
-
-		--muted: 223 47% 11%;
-		--muted-foreground: 215.4 16.3% 56.9%;
-
-		--popover: 224 71% 4%;
-		--popover-foreground: 215 20.2% 65.1%;
-
-		--card: 224 71% 4%;
-		--card-foreground: 213 31% 91%;
-
-		--border: 216 34% 17%;
-		--input: 216 34% 17%;
-
-		--primary: 210 40% 98%;
-		--primary-foreground: 222.2 47.4% 1.2%;
-
-		--secondary: 222.2 47.4% 11.2%;
-		--secondary-foreground: 210 40% 98%;
-
-		--accent: 216 34% 17%;
-		--accent-foreground: 210 40% 98%;
-
-		--destructive: 0 63% 31%;
-		--destructive-foreground: 210 40% 98%;
-
-		--ring: 216 34% 17%;
-
-		--radius: 0.5rem;
-	}
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
-
+ 
 @layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-		font-feature-settings: "rlig" 1, "calt" 1;
-	}
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 h1 {
@@ -96,14 +91,14 @@ h4 {
 	@apply scroll-m-20 text-xl font-semibold tracking-tight;
 }
 
-p {
+/* p {
 	@apply leading-7 [&:not(:first-child)]:mt-6;
-}
+} */
 
 li {
 	@apply my-6 ml-6 list-disc [&>li]:mt-2;
 }
 
 .lead {
-	@apply text-xl text-muted-foreground;
+	@apply text-xl;
 }

src/app/roles/[role]/page.tsx

@@ -13,13 +13,15 @@ const getRole = cache(async (role: string) => {
 	return roles[role];
 });
 
+//Tabel met alle beroepsvelden en taken tegen elkaar, dan filteren per beroepsgroep
+
 export default async function RolePage({
 	params = { role: "" },
 }: {
 	params: { role: string };
 }) {
 	const { role } = params;
-	const formatRole = role.replaceAll("-", " ");
+	const formatRole = decodeURI(role);
 	const roleData = await getRole(formatRole);
 	return (
 		<div className="flex justify-center items-center flex-col flex-1">
@@ -66,9 +68,7 @@ export default async function RolePage({
 					<h2>Competences</h2>
 					<div className="flex flex-col">
 						{Object.keys(roleData.competencies).map(comp => (
-							<Link
-								key={comp}
-								href={`/competences/${comp.replaceAll(" ", "-")}`}>
+							<Link key={comp} href={`/competences/${encodeURI(comp)}`}>
 								{comp}
 							</Link>
 						))}
@@ -84,11 +84,16 @@ export async function generateMetadata({
 }: {
 	params: { role: string };
 }): Promise<Metadata> {
-	const role = params.role.replaceAll("-", " ");
+	const role = decodeURI(params.role);
 	const roles = await getRoles();
 
 	return {
 		title: role,
 		description: roles[role].summary,
 	};
 }
+
+export async function generateStaticParams() {
+	const roles = await getRoles();
+	return Object.keys(roles).map(key => decodeURI(key));
+}

src/app/roles/page.tsx

@@ -9,6 +9,7 @@ import { LevelRoleDescription } from "@/types/level";
 const getCompleteRoles = cache(async () => {
 	const levels = await getLevels();
 	const competences = await getCompetences();
+	const roles = await getRoles();
 
 	const mapCompetence = (
 		competence: string,
@@ -22,6 +23,7 @@ const getCompleteRoles = cache(async () => {
 
 	const mapRole = (role: LevelRoleDescription, level: string) => ({
 		...role,
+		summary: roles[role.name].summary,
 		developed: role.developed.map(comp => mapCompetence(comp, level, true)),
 		"in development": role["in development"].map(comp =>
 			mapCompetence(comp, level)
@@ -56,6 +58,7 @@ export default async function Page() {
 
 	return (
 		<div>
+			<h1>Roles</h1>
 			<div className="flex flex-col flex-wrap dark:bg-[#121212] p-4 rounded-lg gap-4 mt-5 bg-white">
 				<p>Select role(s)</p>
 				<RoleSelect roleNames={roleNames} />

src/components/roleFilter.tsx

@@ -1,17 +1,19 @@
 "use client";
 
 import RoleCard from "@/components/rolecard";
-import { useContext, useMemo, useState } from "react";
+import { useContext, useMemo } from "react";
 import { RolesContext, RolesContextType } from "@/context/rolesProvider";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
 import { Button } from "./ui/button";
 import clsx from "clsx";
+import { LevelContext, LevelContextType } from "@/context/levelProvider";
 
 type CompetenceInfo = { name: string; activity: string };
 type RoleInfo = {
 	developed: CompetenceInfo[];
 	"in development": CompetenceInfo[];
 	name: string;
+	summary: string;
 };
 
 type RoleFilterProps = {
@@ -26,7 +28,7 @@ export default function RoleFilter({
 	allRoles,
 	rolesPerLevel,
 }: RoleFilterProps) {
-	const [level, setLevel] = useState(1);
+	const { level, changeLevel } = useContext(LevelContext) as LevelContextType;
 	const { roles } = useContext(RolesContext) as RolesContextType;
 	const filteredDevRoles = useMemo(
 		() =>
@@ -45,7 +47,7 @@ export default function RoleFilter({
 	return (
 		<Tabs
 			value={`${level}`}
-			onValueChange={value => setLevel(Number(value))}
+			onValueChange={value => changeLevel(Number(value))}
 			className="flex flex-1 items-center flex-col mt-4">
 			<TabsList className="mb-4">
 				{[...new Array(5)].map((_, index) => (
@@ -75,7 +77,7 @@ export default function RoleFilter({
 							className="flex flex-1 justify-center items-center gap-4"
 							key={index}>
 							<p>Chosen role(s) not available at this level</p>
-							<Button onClick={() => setLevel(nextLevel + 1)}>
+							<Button onClick={() => changeLevel(nextLevel + 1)}>
 								Go to level {nextLevel + 1}
 							</Button>
 						</TabsContent>