diff --git a/app/layout.tsx b/app/layout.tsx index 1fc74cf..b6398dc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,7 +7,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - +
diff --git a/app/tutorials/[tutorialId]/ContentTable.tsx b/app/tutorials/[tutorialId]/ContentTable.tsx index c83ca0d..593f4f5 100644 --- a/app/tutorials/[tutorialId]/ContentTable.tsx +++ b/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
ContentTable
; +export default function ContentTable({ + tutorialMeta, +}: { + tutorialMeta: TutorialMeta; +}) { + return ( +
+
+
+

Contents

+ {tutorialMeta?.contentTable?.map((e, i) => { + return ( + + {e.title} + + ); + })} +
+
+
+ ); } diff --git a/app/tutorials/[tutorialId]/layout.tsx b/app/tutorials/[tutorialId]/layout.tsx index 0b62427..3b00239 100644 --- a/app/tutorials/[tutorialId]/layout.tsx +++ b/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 ( -
- -
{children}
- -
- ); + return
{children}
; } diff --git a/app/tutorials/[tutorialId]/page.tsx b/app/tutorials/[tutorialId]/page.tsx index 6a1e5bf..b28de95 100644 --- a/app/tutorials/[tutorialId]/page.tsx +++ b/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 { 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 ( -
-
-

{tutorialMeta.title}

+
+ +
+
+

{tutorialMeta.title}

+
+
+
-
- +
); } diff --git a/app/tutorials/layout.tsx b/app/tutorials/layout.tsx deleted file mode 100644 index 1a6212d..0000000 --- a/app/tutorials/layout.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Layout({ children }) { - return <>{children}; -} diff --git a/styles/Tutorial.module.scss b/styles/Tutorial.module.scss index 28b2221..8ce9281 100644 --- a/styles/Tutorial.module.scss +++ b/styles/Tutorial.module.scss @@ -1,5 +1,33 @@ +@import "variables.scss"; .tutorial { display: grid; - grid-template-columns: 0.5fr 1fr 0.5fr; - column-gap: 10px; + gap: 20px; + grid-template-columns: 200px minmax(0px, 1fr) 200px; + margin: 0px auto; + max-width: 1500px; + padding: 0px 24px; + + .tutorialContent { + max-width: 100%; + + .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%; + } + } + } } diff --git a/styles/TutorialContent.module.scss b/styles/TutorialContent.module.scss deleted file mode 100644 index d451159..0000000 --- a/styles/TutorialContent.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "variables.scss"; - -.tutorialContent { - max-width: 100%; - - .head { - } - - .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%; - } - } -} diff --git a/styles/TutorialContentTable.module.scss b/styles/TutorialContentTable.module.scss new file mode 100644 index 0000000..e7443ea --- /dev/null +++ b/styles/TutorialContentTable.module.scss @@ -0,0 +1,17 @@ +@import "variables.scss"; + +.tutorialContentTable { + .stickyContainer { + position: sticky; + top: 60px; + .list { + align-items: flex-start; + display: flex; + flex-direction: column; + font-size: 14px; + margin-bottom: 16px; + padding-bottom: 16px; + row-gap: 10px; + } + } +}