dynamic post routes

1 files changed, 77 insertions, 0 deletions

diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
new file mode 100644
index 0000000..8a1dce1
--- /dev/null
+++ b/pages/post/[id].tsx
@@ -0,0 +1,77 @@
+import ReactMarkdown from 'react-markdown';
+import { readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+// import Seperator from '../../components/articleSeperator';
+import Navbar from '../../components/navbar';
+// import Button from '../../components/button';
+// import Image from '../../components/image';
+import Chapters, { chapter } from '../../components/chapters';
+
+interface ArticleMeta {
+	title?: string;
+	subtitle?: string;
+	date?: Date;
+	chapters?: Array<chapter>;
+}
+
+export default function Post(props: {
+	content: string,
+	meta: ArticleMeta
+}) {
+	return <div>
+		<div className="centeredPage">
+			<div className="titleWrapper">
+				<h1>{props.meta.title}</h1>
+				<p className="subtile">{props.meta.subtitle}</p>
+			</div>
+			<div className="navAreaWrapper">
+				<div className="sticky">
+					<Navbar/>
+					<Chapters chapters={props.meta.chapters}/>
+				</div>
+			</div>
+			<div className="contentWrapper">
+				<ReactMarkdown children={props.content}/>
+			</div>
+		</div>
+	</div>
+}
+
+function preprocessor(fileContent: string) {
+	var fileAsArr = fileContent.split("\n");
+	var meta: ArticleMeta = {};
+
+	var result = fileAsArr.join("\n").trim()
+	return { meta, result }
+}
+
+export function getStaticProps(props: {params: { id: string }}) {
+	var filename = join("posts/", props.params.id + ".md")
+	var filecontent = readFileSync(filename).toString().trim()
+
+	var parsed = preprocessor(filecontent);
+
+	return {
+		props: {
+			content: parsed.result,
+			meta: parsed.meta,
+		},
+	}
+}
+
+export function getStaticPaths() {
+	var files = readdirSync("posts").filter(f => f.endsWith(".md"));
+
+	return {
+		paths: files.map((f) => {
+			return {
+				params: {
+					id: f.substr(0, f.length - 3)
+				}
+			}
+		}),
+		fallback: false,
+	}
+}
+