LoL rules now readable.

src/app/reeglid/[slug]/page.tsx

@@ -1,35 +1,44 @@
-// filepath: /home/renkar/Dokumendid/Projects/tipilan/src/app/reeglid/[slug]/page.tsx
-import fs from "node:fs/promises";
+import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import path from "node:path";
-import matter from "gray-matter";
+import fs from "node:fs/promises";
 import ReactMarkdown from "react-markdown";
 
-type Props = { params: { slug: string } };
+type Props = {
+  params: Promise<{ slug: string }>;
+};
 
 export default async function RulePage({ params }: Props) {
-  const filePath = path.join(process.cwd(), "src/data/rules", `${params.slug}.md`);
-  let file;
+  const { slug } = await params;
+
+  const filePath = path.join(process.cwd(), "src/data/rules", `${slug}.md`);
+  let file: string;
+
   try {
     file = await fs.readFile(filePath, "utf8");
-  } catch (e) {
-    return <div className="text-red-500">Reegleid ei leitud.</div>;
+  } catch {
+    file = `# ${slug.toUpperCase()} REEGLID\n\nSisu hetkel puudub.`;
   }
-  const { content, data } = matter(file);
 
-return (
-  <div className="prose mx-auto my-16 ml-8 mr-8">
-    <h1>{data.title || params.slug.toUpperCase() + " REEGLID"}</h1>
-    <ReactMarkdown
-      components={{
-        h1: ({node, ...props}) => <h1 className="font-bold" {...props} />,
-        h2: ({node, ...props}) => <h2 className="font-bold" {...props} />,
-        h3: ({node, ...props}) => <h3 className="font-bold" {...props} />,
-        h4: ({node, ...props}) => <h4 className="font-bold" {...props} />,
-        h5: ({node, ...props}) => <h5 className="font-bold" {...props} />,
-        h6: ({node, ...props}) => <h6 className="font-bold" {...props} />,
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-  </div>
-);
+  const data = { title: undefined as string | undefined };
+
+  return (
+    <>
+      <h1
+        className={`not-prose ${vipnagorgialla.className} font-bold italic uppercase text-[64px] leading-[96px] tracking-[-0.02em] text-[#2A2C3F] dark:text-[#EEE5E5] mx-auto mt-16 mb-6 px-8`}
+      >
+        {data.title || `${slug.toUpperCase()} REEGLID`}
+      </h1>
+
+      <div
+        className={`mx-auto px-8 font-worksans
+          [&_ol]:ml-6
+          [&_ol_ol]:ml-10
+          [&_ol_ol_ol]:ml-14
+          [&_h2]:font-bold
+        `}
+      >
+        <ReactMarkdown>{file}</ReactMarkdown>
+      </div>
+      </>
+  );
+}