janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 12:52:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

contens

Browse Source
This commit is contained in:
Janis
2022-12-19 01:12:11 +01:00
parent 8a8ea32c34
commit 8ac23deb65
8 changed files with 101 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@@ -7,7 +7,7 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html>
<html style={{ scrollBehavior: "smooth" }}>
<head></head>
<body>
<header>

25
app/tutorials/[tutorialId]/ContentTable.tsx
View File

@@ -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>
);
}

12
app/tutorials/[tutorialId]/layout.tsx
View File

@@ -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>;
}

42
app/tutorials/[tutorialId]/page.tsx
View File

@@ -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>
);
}

3
app/tutorials/layout.tsx
View File

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

32
styles/Tutorial.module.scss
View File

@@ -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%;
}
}
}
}

28
styles/TutorialContent.module.scss
View File

@@ -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%;
}
}
}

17
styles/TutorialContentTable.module.scss Normal file
View File

@@ -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;
}
}
}