aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-03-28 19:05:38 +0200
committerlonkaars <l.leblansch@gmail.com>2021-03-28 19:05:38 +0200
commit9eb1c1d1eee4286b6e7a124d3f5a32b3af453be0 (patch)
tree187dab2d295ed29e9f4e2505d8d6e05179094ab9 /pages
parent8b79c4b8892ee981246e4cf40f30cc09a4e0e822 (diff)
dynamic post routes
Diffstat (limited to 'pages')
-rw-r--r--pages/index.tsx5
-rw-r--r--pages/post/[id].tsx77
2 files changed, 82 insertions, 0 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index d572a2d..1f44fec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,6 +4,8 @@ import Button from '../components/button';
import Image from '../components/image';
import Chapters from '../components/chapters';
+import ReactMarkdown from 'react-markdown';
+
export default function Home() {
return <div>
<div className="centeredPage">
@@ -79,6 +81,9 @@ export default function Home() {
</div>
</div>
<div className="contentWrapper">
+
+ <ReactMarkdown children={"### cool\n\nbanaan"}/>
+
<p>
Lorem ipsum <a>dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
</p>
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,
+ }
+}
+