jh

.markdown/test2.md

@@ -0,0 +1,9 @@
+## Code
+
+```js
+var foo = function (bar) {
+	return bar++;
+};
+
+console.log(foo(5));
+```

app/Footer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "../styles/Footer.module.scss";
+import Image from "next/image";
+export default function Footer() {
+	return (
+		<footer className={styles.footer}>
+			<div className={styles.adContainer}>Future advertisement</div>
+			<div className={styles.content}>
+				<div className={styles.company}>
+					<Image
+						src={"/images/logo.svg"}
+						width={190}
+						height={52}
+						alt={"Logo"}
+					/>
+					<h1>Simple tutorials for everyone!</h1>
+				</div>
+				<div className={styles.links}>
+					<div className={styles.grid}>
+						<a href="#">Tutorials</a>
+						<a href="#">Contact</a>
+						<a href="#">About</a>
+
+						<a></a>
+						<a href="#">Report Bug</a>
+						<a href="#">Legal</a>
+
+						<a></a>
+						<a href="#">Feedback</a>
+						<a href="#">Privacy</a>
+
+						<a></a>
+						<a></a>
+						<a href="#">Cookies</a>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}

app/layout.tsx

@@ -1,5 +1,6 @@
 import "../styles/globals.scss";
 import Nav from "./Nav";
+import Footer from "./Footer";
 
 export default function RootLayout({
 	children,
@@ -14,6 +15,7 @@ export default function RootLayout({
 					<Nav />
 				</header>
 				<main>{children}</main>
+				<Footer />
 			</body>
 		</html>
 	);

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>

public/images/logo.svg

@@ -0,0 +1,7 @@
+<svg width="190" height="52" viewBox="0 0 190 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.853938 44.8066C0.305349 20.9341 13.1515 5.6096 19.6431 0.931396V35.9498C19.6431 47.8042 0.853938 46.5779 0.853938 44.8066Z" fill="#2F86ED"/>
+  <path d="M37.7614 44.8066C38.2904 20.9341 25.9031 5.6096 19.6433 0.931396V35.9498C19.6433 47.8042 37.7614 46.5779 37.7614 44.8066Z" fill="#0D69F3"/>
+  <path d="M19.6436 19.0659C17.6729 20.4266 13.7732 24.8838 13.9397 31.8273H25.3475C25.514 24.8838 21.6143 20.4266 19.6436 19.0659Z" fill="white"/>
+  <circle cx="19.3076" cy="47.6111" r="4.36573" fill="#FDC536"/>
+  <path d="M75.1302 37.989L66.7902 15.819H63.1602L54.7002 37.989H59.3502L61.0602 33.189H68.8002L70.4502 37.989H75.1302ZM67.5402 29.229H62.3202L64.9602 21.849L67.5402 29.229ZM89.0966 23.529C87.7466 21.999 86.0966 21.219 84.1166 21.219C81.8066 21.219 79.8866 22.029 78.3266 23.679C76.7966 25.329 76.0166 27.369 76.0166 29.799C76.0166 32.259 76.7966 34.299 78.3266 35.949C79.8566 37.569 81.8066 38.379 84.1166 38.379C86.1866 38.379 87.8666 37.569 89.1866 35.979V37.989H93.3266V15.189H89.0966V23.529ZM89.3066 29.799C89.3066 31.149 88.8866 32.259 88.0466 33.189C87.2066 34.089 86.1266 34.539 84.7766 34.539C83.4266 34.539 82.3466 34.089 81.4766 33.189C80.6366 32.259 80.2166 31.149 80.2166 29.799C80.2166 28.479 80.6366 27.369 81.4766 26.469C82.3466 25.539 83.4266 25.089 84.7766 25.089C86.1266 25.089 87.2066 25.539 88.0466 26.469C88.8866 27.369 89.3066 28.479 89.3066 29.799ZM110.54 25.839C112.34 25.209 113.57 23.289 113.57 21.339C113.57 19.869 113 18.579 111.89 17.469C110.78 16.359 109.25 15.819 107.27 15.819H97.6101V37.989H107.72C109.85 37.989 111.56 37.359 112.82 36.129C114.11 34.899 114.74 33.369 114.74 31.539C114.74 28.809 113.27 26.529 110.54 25.839ZM106.52 19.689C108.17 19.689 109.16 20.739 109.16 22.029C109.16 23.349 108.17 24.519 106.34 24.519H101.99V19.689H106.52ZM101.99 34.089V28.239H106.85C109.01 28.239 110.15 29.589 110.15 31.179C110.15 32.739 108.98 34.089 106.85 34.089H101.99ZM121.982 37.989V30.219C121.982 26.829 123.572 25.269 125.972 25.269C126.572 25.269 127.232 25.389 127.922 25.599L128.282 21.549C127.622 21.309 126.962 21.189 126.302 21.189C124.292 21.189 122.792 22.059 121.802 23.829V21.639H117.752V37.989H121.982ZM142.182 23.589C140.742 21.999 139.002 21.219 136.962 21.219C134.652 21.219 132.702 22.029 131.172 23.649C129.642 25.239 128.862 27.279 128.862 29.739C128.862 32.199 129.612 34.269 131.142 35.919C132.672 37.569 134.622 38.379 136.962 38.379C139.032 38.379 140.772 37.629 142.182 36.099V37.989H146.202V21.639H142.182V23.589ZM142.242 29.799C142.242 31.119 141.792 32.229 140.922 33.159C140.052 34.089 138.972 34.539 137.652 34.539C136.332 34.539 135.252 34.089 134.382 33.159C133.512 32.229 133.092 31.119 133.092 29.799C133.092 28.509 133.512 27.399 134.352 26.469C135.222 25.539 136.302 25.089 137.652 25.089C138.972 25.089 140.052 25.539 140.922 26.469C141.792 27.399 142.242 28.509 142.242 29.799ZM162.815 24.519V21.669H149.375V25.179H157.145L148.955 35.109V37.989H163.115V34.479H154.775L162.815 24.519ZM181.574 29.439C181.574 26.889 180.794 24.909 179.264 23.439C177.734 21.969 175.754 21.219 173.384 21.219C170.864 21.219 168.824 22.029 167.234 23.649C165.644 25.269 164.864 27.309 164.864 29.799C164.864 32.169 165.614 34.209 167.144 35.859C168.674 37.509 170.864 38.349 173.744 38.349C176.444 38.349 178.814 37.599 180.884 36.099L179.204 33.129C177.794 34.089 175.694 34.779 173.924 34.779C171.344 34.779 169.754 33.609 169.154 31.299H181.424C181.514 30.639 181.574 30.009 181.574 29.439ZM173.384 24.729C175.544 24.729 177.074 26.019 177.464 28.149H169.154C169.664 26.019 171.254 24.729 173.384 24.729Z" fill="#0D69F3"/>
+</svg>

styles/Footer.module.scss

@@ -0,0 +1,72 @@
+@import "variables.scss";
+.footer {
+	padding: 200px 15px 30px 15px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 50px 50px;
+
+	.adContainer {
+		background-color: #ff00003e;
+		width: $footer-ad-container-width;
+		height: $footer-ad-container-height;
+
+		@media (max-width: $footer-ad-container-width) {
+			width: 100%;
+		}
+	}
+	.content {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 100px 100px;
+		align-items: center;
+
+		@media (max-width: $footer-breakpoint-1) {
+			column-gap: 10px;
+		}
+
+		@media (max-width: $footer-breakpoint-3) {
+			grid-template-columns: 1fr;
+			gap: 100px 20px;
+		}
+
+		.company {
+			float: right;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100;
+			flex-shrink: 0;
+			flex: 1;
+			text-align: center;
+			column-gap: 10px;
+			font-size: 0.8em;
+			@media (max-width: $footer-breakpoint-1) {
+				flex-direction: column;
+				font-size: 0.7em;
+				column-gap: 0px;
+			}
+
+			@media (max-width: $footer-breakpoint-3) {
+				grid-row: 2;
+			}
+		}
+
+		.links {
+			display: flex;
+			justify-content: right;
+			align-items: center;
+
+			.grid {
+				display: grid;
+				grid-template-columns: 1fr 1fr 1fr;
+				gap: 20px 100px;
+
+				@media (max-width: $footer-breakpoint-4) {
+					column-gap: 15px;
+				}
+			}
+		}
+	}
+}

styles/Sidebar.module.scss

@@ -2,6 +2,29 @@
 .sidebar {
 	.stickyContainer {
 		position: sticky;
-		top: $grid-sticky-top;
+		top: $tutorial-grid-sticky-top;
+		display: flex;
+		flex-direction: column;
+		row-gap: 20px;
+		font-size: 14px;
+		@media (max-width: $tutorial-breakpoint-1) {
+			display: none;
+		}
+		.sidebarContainer {
+			display: flex;
+			flex-direction: column;
+			row-gap: 5px;
+			background-color: $color-background-card;
+			border-radius: 10px;
+			padding: 10px 10px 15px 10px;
+		}
+		.adContainer {
+			background-color: #ff00003e;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+		}
 	}
 }

styles/Tutorial.module.scss

@@ -2,36 +2,20 @@
 .tutorial {
 	display: grid;
 	gap: 70px;
-	grid-template-columns: 200px minmax(0px, 1fr) 200px;
+	grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
 	margin: 0px auto;
 	max-width: 1800px;
 	padding: 0px 24px;
 
-	.tutorialContent {
-		max-width: 100%;
+	@media (max-width: $tutorial-breakpoint-1) {
+		grid-template-columns: $tutorial-content-table-width 1fr;
+	}
 
-		.markdown {
-			padding: 0 10px 0 10px;
-			color: $md-color-font;
-			list-style: inside;
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: $md-color-headline;
-			}
-			hr {
-				border: 1px solid $md-color-hr;
-			}
-			img {
-				max-width: 100%;
-			}
-			p {
-				margin-top: 1em;
-				line-height: 1.5;
-			}
-		}
+	@media (max-width: $tutorial-breakpoint-2) {
+		grid-template-columns: 1fr;
+	}
+
+	.tutorialContent {
+		min-width: 0;
 	}
 }

styles/TutorialContentTable.module.scss

@@ -1,18 +1,29 @@
 @import "variables.scss";
 
 .tutorialContentTable {
+	@media (max-width: $tutorial-breakpoint-2) {
+		display: none;
+	}
 	.stickyContainer {
 		position: sticky;
-		top: $grid-sticky-top;
+		top: $tutorial-grid-sticky-top;
 
 		.list {
 			align-items: flex-start;
 			display: flex;
 			flex-direction: column;
-			font-size: 14px;
 			margin-bottom: 16px;
 			padding-bottom: 16px;
 			row-gap: 10px;
 		}
+
+		.adContainer {
+			background-color: #ff00003e;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+		}
 	}
 }

styles/globals.scss

@@ -14,7 +14,6 @@
 html,
 body {
 	max-width: 100vw;
-	min-height: 100vh;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 		sans-serif;
@@ -22,6 +21,13 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 	background-color: $color-background-body;
 	color: $color-font;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	main {
+		width: 100%;
+		flex: 1;
+	}
 }
 
 p,

styles/markdown.scss

@@ -0,0 +1,112 @@
+@import "variables.scss";
+.markdown {
+	padding: 0 10px 0 10px;
+	color: $md-color-font;
+
+	hr {
+		border: 1px solid $md-color-hr;
+	}
+
+	/* Texts */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		color: $md-color-headline;
+	}
+
+	p {
+		margin-top: 1em;
+		line-height: 1.5;
+	}
+
+	/* Images */
+	img {
+		max-width: 100%;
+	}
+
+	/* Code */
+	code {
+		background-color: #282c34;
+		padding: 5px;
+		border-radius: 5px;
+	}
+
+	pre {
+		overflow: auto;
+		word-wrap: normal;
+		white-space: pre;
+		display: block;
+
+		code {
+			display: block;
+			font-size: 1em;
+			text-indent: 0;
+			white-space: inherit;
+			background-color: transparent;
+			padding: 0px;
+			border-radius: 0px;
+		}
+	}
+
+	/* Lists */
+	ul,
+	ol {
+		list-style: inside;
+		li {
+			display: list-item;
+		}
+	}
+
+	ul {
+		list-style-type: circle;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	/* Blockquotes */
+	.blockquote {
+		border-left: 5px solid $md-color-blockquote-border;
+		padding-left: 20px;
+		background-color: $md-color-blockquote-background;
+	}
+	/* Table */
+	table {
+		border-radius: 5px;
+		border-collapse: collapse;
+		width: 100%;
+		display: table;
+		overflow: auto;
+
+		thead,
+		tbody {
+			width: 100%;
+		}
+		thead th:nth-child(odd) {
+			color: #ffffff;
+			background: $md-color-table-col-odd-background;
+		}
+		tr {
+			background: $md-color-table-row-odd-background;
+		}
+		tr:nth-child(even) {
+			background: $md-color-table-row-even-background;
+		}
+		th,
+		td {
+			text-align: center;
+			padding: 8px;
+		}
+		td {
+			border-right: 1px solid #ffffff00;
+		}
+		th {
+			color: #ffffff;
+			background: $md-color-table-col-even-background;
+		}
+	}
+}

styles/variables.scss

@@ -2,13 +2,40 @@
 /* Colors: General */
 $color-overlay-mix: #fff;
 $color-background-body: #181a1b; //181a1b
+$color-background-card: mix($color-overlay-mix, $color-background-body, 5%);
 $color-font: #ffffff;
-$color-font-link: #2294ff;
+$color-accent: #2294ff;
+$color-font-link: $color-accent;
 
 /* Colors: Markdown */
-$md-color-font: mix($color-overlay-mix, $color-font, 5%);
-$md-color-headline: mix($color-overlay-mix, $color-font, 20%);
-$md-color-hr: mix($color-overlay-mix, $color-background-body, 20%);
+$md-color-font: mix($color-background-body, $color-font, 5%);
+$md-color-headline: mix($color-background-body, $color-font, 20%);
+$md-color-hr: mix($color-background-body, $color-overlay-mix, 80%);
 
-/* Grid */
-$grid-sticky-top: 60px;
+$md-color-table-col-even-background: #3b556f;
+$md-color-table-col-odd-background: #2f4459;
+$md-color-table-row-even-background: mix(
+	$color-background-body,
+	$color-font,
+	95%
+);
+$md-color-table-row-odd-background: transparent;
+$md-color-blockquote-border: $color-accent;
+$md-color-blockquote-background: mix($color-background-body, $color-font, 95%);
+
+/* Tutorial Page */
+$tutorial-grid-sticky-top: 60px;
+$tutorial-content-table-width: 200px;
+$tutorial-sidebar-width: 200px;
+
+$tutorial-breakpoint-1: 1200px;
+$tutorial-breakpoint-2: 1000px;
+$tutorial-breakpoint-3: 700px;
+/* Footer */
+$footer-ad-container-width: 920px;
+$footer-ad-container-height: 90px;
+
+$footer-breakpoint-1: 1270px;
+$footer-breakpoint-2: 950px;
+$footer-breakpoint-3: 800px;
+$footer-breakpoint-4: 440px;