[meta] tag parsing

5 files changed, 44 insertions, 22 deletions

diff --git a/components/image.tsx b/components/image.tsx
index 106c2bd..ad84ff6 100644
--- a/components/image.tsx
+++ b/components/image.tsx
@@ -1,12 +1,12 @@
 export default function Image(props: {
 	src: string;
-	title?: string;
+	alt?: string;
 }) {
 	return <div className="image">
-		<img src={props.src} alt={props.title}/>
+		<img src={props.src} alt={props.alt}/>
 		{
-			props.title && <div>
-				<p>{props.title}</p>
+			props.alt && <div>
+				<p>{props.alt}</p>
 			</div>
 		}
 	</div>
diff --git a/components/articleSeperator.tsx b/components/seperator.tsx
index 917d0be..5f05aca 100644
--- a/components/articleSeperator.tsx
+++ b/components/seperator.tsx
@@ -1,5 +1,5 @@
 export default function ArticleSeperator() {
-	return <div>
+	return <div className="seperator">
 		<svg width="96" height="12" viewBox="0 0 96 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path fillRule="evenodd" clipRule="evenodd" d="M8.04282 8.19986C6.51226 9.73171 4.24587 12 0 12V6C1.68094 6 2.4102 5.34716 3.87868 3.87868C3.90463 3.85273 3.9308 3.82654 3.95718 3.80014C5.48774 2.26829 7.75413 0 12 0C16.2459 0 18.5123 2.26829 20.0428 3.80014C20.0692 3.82654 20.0954 3.85273 20.1213 3.87868C21.5898 5.34716 22.3191 6 24 6C25.6809 6 26.4102 5.34716 27.8787 3.87868C27.9046 3.85273 27.9308 3.82654 27.9572 3.80014C29.4877 2.26829 31.7541 0 36 0C40.2459 0 42.5123 2.26829 44.0428 3.80014C44.0692 3.82654 44.0954 3.85273 44.1213 3.87868C45.5898 5.34716 46.3191 6 48 6C49.6809 6 50.4102 5.34716 51.8787 3.87868C51.9046 3.85273 51.9308 3.82654 51.9572 3.80014C53.4877 2.26829 55.7541 0 60 0C64.2459 0 66.5123 2.26829 68.0428 3.80014C68.0692 3.82654 68.0954 3.85273 68.1213 3.87868C69.5898 5.34716 70.3191 6 72 6C73.6809 6 74.4102 5.34716 75.8787 3.87868L75.9572 3.80014C77.4877 2.26829 79.7541 0 84 0C88.2459 0 90.5123 2.26829 92.0428 3.80014L92.1213 3.87868C93.5898 5.34716 94.3191 6 96 6V12C91.7541 12 89.4877 9.73171 87.9572 8.19986L87.8787 8.12132C86.4102 6.65284 85.6809 6 84 6C82.3191 6 81.5898 6.65284 80.1213 8.12132L80.0428 8.19986C78.5123 9.73171 76.2459 12 72 12C67.7541 12 65.4877 9.73171 63.9572 8.19986C63.9308 8.17346 63.9046 8.14727 63.8787 8.12132C62.4102 6.65284 61.6809 6 60 6C58.3191 6 57.5898 6.65284 56.1213 8.12132C56.0954 8.14727 56.0692 8.17346 56.0428 8.19986C54.5123 9.73171 52.2459 12 48 12C43.7541 12 41.4877 9.73171 39.9572 8.19986C39.9308 8.17346 39.9046 8.14727 39.8787 8.12132C38.4102 6.65284 37.6809 6 36 6C34.3191 6 33.5898 6.65284 32.1213 8.12132C32.0954 8.14727 32.0692 8.17346 32.0428 8.19986C30.5123 9.73171 28.2459 12 24 12C19.7541 12 17.4877 9.73171 15.9572 8.19986C15.9308 8.17346 15.9046 8.14727 15.8787 8.12132C14.4102 6.65284 13.6809 6 12 6C10.3191 6 9.5898 6.65284 8.12132 8.12132C8.09537 8.14727 8.0692 8.17346 8.04282 8.19986Z" fill="var(--fire-opal)"/>
 </svg>
diff --git a/pages/index.tsx b/pages/index.tsx
index 1f44fec..b4f8993 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import Seperator from '../components/articleSeperator';
+import Seperator from '../components/seperator';
 import Navbar from '../components/navbar';
 import Button from '../components/button';
 import Image from '../components/image';
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
index 8a1dce1..f70b21f 100644
--- a/pages/post/[id].tsx
+++ b/pages/post/[id].tsx
@@ -2,16 +2,17 @@ import ReactMarkdown from 'react-markdown';
 import { readdirSync, readFileSync } from 'fs';
 import { join } from 'path';
 
-// import Seperator from '../../components/articleSeperator';
+import Seperator from '../../components/seperator';
 import Navbar from '../../components/navbar';
 // import Button from '../../components/button';
-// import Image from '../../components/image';
+import Image from '../../components/image';
 import Chapters, { chapter } from '../../components/chapters';
 
 interface ArticleMeta {
 	title?: string;
 	subtitle?: string;
-	date?: Date;
+	author?: string;
+	date?: string;
 	chapters?: Array<chapter>;
 }
 
@@ -32,15 +33,41 @@ export default function Post(props: {
 				</div>
 			</div>
 			<div className="contentWrapper">
-				<ReactMarkdown children={props.content}/>
+				<ReactMarkdown
+				children={props.content}
+				renderers={{
+					image: Image,
+					thematicBreak: Seperator,
+				}}/>
 			</div>
 		</div>
 	</div>
 }
 
+var parseTag = {
+	"title": (val: string) => val,
+	"subtitle": (val: string) => val,
+	"author": (val: string) => val,
+	"date": (val: string) => new Date(val).toDateString(),
+}
+
+function parseMeta(file: Array<string>) {
+	var meta: ArticleMeta = {};
+
+	file.forEach(line => {
+		if (!line.startsWith("[meta]: ")) return;
+		var tags = line.match(/\[meta\]:\s+\<(.+?)\>\s+\((.+?)\)/);
+		if (!tags || !tags[1] || !tags[2]) return;
+		if (!parseTag.hasOwnProperty(tags[1])) return;
+		meta[tags[1]] = parseTag[tags[1]](tags[2]);
+	});
+
+	return meta;
+}
+
 function preprocessor(fileContent: string) {
 	var fileAsArr = fileContent.split("\n");
-	var meta: ArticleMeta = {};
+	var meta = parseMeta(fileAsArr);
 
 	var result = fileAsArr.join("\n").trim()
 	return { meta, result }
diff --git a/posts/index.md b/posts/index.md
index d0db92f..c1032f8 100644
--- a/posts/index.md
+++ b/posts/index.md
@@ -1,18 +1,15 @@
-<!--
-#META title Loek’s excruciatingly interesting blog
-#META subtitle Loek heeft dit geschreven
-#META date 27-02-2021
--->
-
-# Loek’s excruciatingly interesting blog
+[meta]: <title> (Loek’s excruciatingly interesting blog)
+[meta]: <subtitle> (Loek heeft dit geschreven)
+[meta]: <author> (Loek)
+[meta]: <date> (March 27 2021)
 
 Lorem ipsum dolor 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
 
 [Here's a link](https://github.com/lonkaars)
 
-![](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fbarkpost-assets.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2013%2F11%2FplainDoge.jpg&f=1&nofb=1)
+![fonny doge meme big laugh hahaha funni image big fonny me laugh because image fonne](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fbarkpost-assets.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2013%2F11%2FplainDoge.jpg&f=1&nofb=1)
 
-> fonny doge meme big laugh hahaha funni image big fonny me laugh because image fonne
+Lorem ipsum dolor 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
 
 ---
 
@@ -20,8 +17,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Lorem ipsum dolor 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
 
-Lorem ipsum dolor 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
-
 # Here's some hierarchy test
 
 ## subsection