contens

app/tutorials/[tutorialId]/ContentTable.tsx

@@ -1,5 +1,26 @@
 import React from "react";
+import { TutorialMeta } from "./page";
+import styles from "../../../styles/TutorialContentTable.module.scss";
 
-export default function ContentTable() {
-	return <div>ContentTable</div>;
+export default function ContentTable({
+	tutorialMeta,
+}: {
+	tutorialMeta: TutorialMeta;
+}) {
+	return (
+		<div className={styles.tutorialContentTable}>
+			<div className={styles.stickyContainer}>
+				<div className={styles.list}>
+					<h2>Contents</h2>
+					{tutorialMeta?.contentTable?.map((e, i) => {
+						return (
+							<a key={i} href={"#" + e.anchor}>
+								{e.title}
+							</a>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
 }

app/tutorials/[tutorialId]/layout.tsx

@@ -1,13 +1,3 @@
-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>
-	);
+	return <div>{children}</div>;
 }

app/tutorials/[tutorialId]/page.tsx

@@ -2,21 +2,31 @@ 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 ContentTable from "./ContentTable";
+import Sidebar from "./Sidebar";
+import styles from "../../../styles/Tutorial.module.scss";
 import LoadPrism from "./LoadPrism";
 
-type TutorialMeta = {
+export type ContentTable = {
+	anchor: string;
 	title: string;
 };
 
+export type TutorialMeta = {
+	id: string;
+	title: string;
+	contentTable: ContentTable[];
+};
+
 async function GetTutorialMeta(tutorialId: string): Promise<TutorialMeta> {
 	const firebaseData = await getDoc(doc(db, "tutorials", tutorialId));
 	const firebaseJsonData = firebaseData.data();
 
 	const tutorial: TutorialMeta = {
+		id: tutorialId,
 		title: firebaseJsonData?.title ?? "Tutorial not found!",
+		contentTable: firebaseJsonData?.contentTable ?? [],
 	};
-
 	return tutorial;
 }
 
@@ -36,9 +46,11 @@ async function FetchTutorialMarkdown(tutorialId: string) {
 
 function ParseMarkdown(markdown: string): string {
 	let result = marked.parse(markdown);
+
 	return result;
 }
 
+//* MAIN
 export default async function Tutorial({
 	params,
 }: {
@@ -49,17 +61,21 @@ export default async function Tutorial({
 	const markdown: string = await FetchTutorialMarkdown(tutorialId);
 
 	return (
-		<div className={styles.tutorialContent}>
-			<div className={styles.head}>
-				<h1>{tutorialMeta.title}</h1>
+		<div className={styles.tutorial}>
+			<ContentTable tutorialMeta={tutorialMeta} />
+			<div className={styles.tutorialContent}>
+				<div className={styles.head}>
+					<h1>{tutorialMeta.title}</h1>
+				</div>
+				<div
+					className={styles.markdown}
+					dangerouslySetInnerHTML={{
+						__html: ParseMarkdown(markdown),
+					}}
+				></div>
+				<LoadPrism />
 			</div>
-			<div
-				className={styles.markdown}
-				dangerouslySetInnerHTML={{
-					__html: ParseMarkdown(markdown),
-				}}
-			></div>
-			<LoadPrism />
+			<Sidebar />
 		</div>
 	);
 }

app/tutorials/layout.tsx

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