added richtig viel sachen

app/tutorials/[tutorialId]/LoadPrism.tsx

@@ -0,0 +1,19 @@
+"use client";
+import React from "react";
+import { useEffect } from "react";
+
+import Prism from "prismjs";
+import "../../../styles/prism_themes/prism-one-dark.css";
+//import "../../../styles/prism_themes/prism-one-light.css";
+
+export default function LoadPrism() {
+	useEffect(() => {
+		document.querySelectorAll("pre").forEach((pre) => {
+			if (pre.classList.length < 1) {
+				pre.classList.add("language-");
+			}
+		});
+		Prism.highlightAll();
+	}, []);
+	return <div></div>;
+}

app/tutorials/[tutorialId]/layout.tsx

@@ -2,11 +2,11 @@ import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
 import styles from "../../../styles/Tutorial.module.scss";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }) {
 	return (
 		<div className={styles.tutorial}>
 			<ContentTable />
-			<div className="tutorialContent">{children}</div>
+			<div>{children}</div>
 			<Sidebar />
 		</div>
 	);

app/tutorials/[tutorialId]/page.tsx

@@ -0,0 +1,73 @@
+import { marked } from "marked";
+import { db, storage } from "../../../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { getDownloadURL, ref } from "firebase/storage";
+import styles from "../../../styles/TutorialContent.module.scss";
+import LoadPrism from "./LoadPrism";
+
+type TutorialMeta = {
+	title: string;
+};
+
+async function GetTutorialMeta(tutorialId: string): Promise<TutorialMeta> {
+	const firebaseData = await getDoc(doc(db, "tutorials", tutorialId));
+	const firebaseJsonData = firebaseData.data();
+
+	const tutorial: TutorialMeta = {
+		title: firebaseJsonData?.title ?? "Tutorial not found!",
+	};
+
+	return tutorial;
+}
+
+async function FetchTutorialMarkdown(tutorialId: string) {
+	try {
+		const url = await getDownloadURL(
+			ref(storage, `markdowns/${tutorialId}.md`)
+		);
+		const data = await fetch(url, {
+			next: { revalidate: 10 },
+		});
+		return await data.text();
+	} catch {
+		return "";
+	}
+}
+
+function ParseMarkdown(markdown: string): string {
+	let result = marked.parse(markdown);
+	return result;
+}
+
+export default async function Tutorial({
+	params,
+}: {
+	params: { tutorialId: string };
+}) {
+	const tutorialId: string = params.tutorialId;
+	const tutorialMeta: TutorialMeta = await GetTutorialMeta(tutorialId);
+	const markdown: string = await FetchTutorialMarkdown(tutorialId);
+
+	return (
+		<div className={styles.tutorialContent}>
+			<div className={styles.head}>
+				<h1>{tutorialMeta.title}</h1>
+			</div>
+			<div
+				className={styles.markdown}
+				dangerouslySetInnerHTML={{
+					__html: ParseMarkdown(markdown),
+				}}
+			></div>
+			<LoadPrism />
+		</div>
+	);
+}
+
+export async function generateStaticParams() {
+	const data = await getDocs(collection(db, "tutorials"));
+
+	return data.docs.map((doc) => ({
+		tutorialId: doc.id,
+	}));
+}

app/tutorials/[tutorial]/page.tsx

@@ -1,20 +0,0 @@
-import { marked } from "marked";
-export default async function Page({
-	params,
-}: {
-	params: { tutorial: string };
-}) {
-	const requestData = await fetch(`http://127.0.0.1:3000/test.json`, {
-		cache: "no-store", //! Just for dev
-		/*next: {   revalidate: 10  }*/
-	});
-	const data = await requestData.json();
-
-	return (
-		<div
-			dangerouslySetInnerHTML={{
-				__html: marked.parse(data.markdown) ?? "",
-			}}
-		></div>
-	);
-}

app/tutorials/layout.tsx

@@ -1,3 +1,3 @@
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }) {
 	return <>{children}</>;
 }

app/tutorials/page.tsx

@@ -1,9 +1,3 @@
-export default function Page({
-	params,
-	searchParams,
-}: {
-	params: { slug: string };
-	searchParams?: { [key: string]: string | string[] | undefined };
-}) {
+export default function Tutorials() {
 	return <h1>List all tutorials</h1>;
 }