added richtig viel sachen

app/tutorials/[tutorialId]/ContentTable.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ContentTable() {
+	return <div>ContentTable</div>;
+}

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]/Sidebar.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Sidebar() {
+	return <div>Sidebar</div>;
+}

app/tutorials/[tutorialId]/layout.tsx

@@ -0,0 +1,13 @@
+import ContentTable from "./ContentTable";
+import Sidebar from "./Sidebar";
+import styles from "../../../styles/Tutorial.module.scss";
+
+export default function Layout({ children }) {
+	return (
+		<div className={styles.tutorial}>
+			<ContentTable />
+			<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,
+	}));
+}