jh

app/tutorials/[tutorialId]/ContentTable.tsx

@@ -20,6 +20,11 @@ export default function ContentTable({
 						);
 					})}
 				</div>
+				{tutorialMeta?.contentTable?.length < 15 ? (
+					<div className={styles.adContainer}>Future advertisement</div>
+				) : (
+					""
+				)}
 			</div>
 		</div>
 	);

app/tutorials/[tutorialId]/LoadMarkdown.tsx

@@ -6,13 +6,29 @@ import Prism from "prismjs";
 import "../../../styles/prism_themes/prism-one-dark.css";
 //import "../../../styles/prism_themes/prism-one-light.css";
 
-export default function LoadPrism() {
+export default function LoadMarkdown() {
 	useEffect(() => {
 		document.querySelectorAll("pre").forEach((pre) => {
 			if (pre.classList.length < 1) {
 				pre.classList.add("language-");
 			}
 		});
+
+		document.querySelectorAll("blockquote").forEach((bq) => {
+			bq.classList.add("blockquote");
+		});
+
+		document.querySelectorAll("li").forEach((li) => {
+			let paragraphText = "";
+			li.querySelectorAll("p").forEach((p) => {
+				paragraphText = p.innerHTML;
+			});
+
+			if (paragraphText != "") {
+				li.innerHTML = paragraphText;
+			}
+		});
+
 		Prism.highlightAll();
 	}, []);
 	return <div></div>;

app/tutorials/[tutorialId]/Sidebar.tsx

@@ -3,7 +3,26 @@ import styles from "../../../styles/Sidebar.module.scss";
 export default function Sidebar() {
 	return (
 		<div className={styles.sidebar}>
-			<div className={styles.stickyContainer}>Sidebar</div>
+			<div className={styles.stickyContainer}>
+				<div className={styles.sidebarContainer}>
+					<h3>Popular</h3>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+				</div>
+
+				<div className={styles.sidebarContainer}>
+					<h3>Related</h3>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+					<a href="#"> Set up Docker</a>
+				</div>
+				<div className={styles.adContainer}>Future advertisement</div>
+			</div>
 		</div>
 	);
 }

app/tutorials/[tutorialId]/head.tsx

@@ -0,0 +1,15 @@
+import { GetTutorialMeta, TutorialMeta } from "./page";
+export default async function Head({
+	params,
+}: {
+	params: { tutorialId: string };
+}) {
+	const tutorialId: string = params.tutorialId;
+	const tutorialMeta: TutorialMeta = await GetTutorialMeta(tutorialId);
+	return (
+		<>
+			<title>{tutorialMeta.title}</title>
+			<meta name="viewport" content="width=device-width, initial-scale=1" />
+		</>
+	);
+}

app/tutorials/[tutorialId]/layout.tsx

@@ -1,3 +1,4 @@
+import "../../../styles/markdown.scss";
 export default function Layout({ children }) {
 	return <div>{children}</div>;
 }

app/tutorials/[tutorialId]/page.tsx

@@ -5,7 +5,8 @@ import { getDownloadURL, ref } from "firebase/storage";
 import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
 import styles from "../../../styles/Tutorial.module.scss";
-import LoadPrism from "./LoadPrism";
+import LoadMarkdown from "./LoadMarkdown";
+import Head from "next/head";
 
 export type ContentTable = {
 	anchor: string;
@@ -18,7 +19,9 @@ export type TutorialMeta = {
 	contentTable: ContentTable[];
 };
 
-async function GetTutorialMeta(tutorialId: string): Promise<TutorialMeta> {
+export async function GetTutorialMeta(
+	tutorialId: string
+): Promise<TutorialMeta> {
 	const firebaseData = await getDoc(doc(db, "tutorials", tutorialId));
 	const firebaseJsonData = firebaseData.data();
 
@@ -36,7 +39,7 @@ async function FetchTutorialMarkdown(tutorialId: string) {
 			ref(storage, `markdowns/${tutorialId}.md`)
 		);
 		const data = await fetch(url, {
-			next: { revalidate: 10 },
+			next: { revalidate: 30 * 60 },
 		});
 		return await data.text();
 	} catch {
@@ -68,12 +71,12 @@ export default async function Tutorial({
 					<h1>{tutorialMeta.title}</h1>
 				</div>
 				<div
-					className={styles.markdown}
+					className="markdown"
 					dangerouslySetInnerHTML={{
 						__html: ParseMarkdown(markdown),
 					}}
 				></div>
-				<LoadPrism />
+				<LoadMarkdown />
 			</div>
 			<Sidebar />
 		</div>