Dynamic markdown page generation with preloading

12 files changed, 123 insertions, 55 deletions

diff --git a/package-lock.json b/package-lock.json
index c833cb9..4a318a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "sass": "^1.35.2"
       },
       "devDependencies": {
+        "@types/marked": "^2.0.4",
         "@types/react": "^17.0.14",
         "typescript": "4.3.5"
       }
@@ -33,9 +34,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz",
+      "integrity": "sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -240,6 +241,12 @@
       "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
       "peer": true
     },
+    "node_modules/@types/marked": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.4.tgz",
+      "integrity": "sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "16.3.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.3.3.tgz",
@@ -3550,9 +3557,9 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz",
+      "integrity": "sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow=="
     },
     "@babel/highlight": {
       "version": "7.14.5",
@@ -3720,6 +3727,12 @@
       "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
       "peer": true
     },
+    "@types/marked": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.4.tgz",
+      "integrity": "sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==",
+      "dev": true
+    },
     "@types/node": {
       "version": "16.3.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.3.3.tgz",
diff --git a/package.json b/package.json
index bceb376..eebfe19 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "sass": "^1.35.2"
   },
   "devDependencies": {
+    "@types/marked": "^2.0.4",
     "@types/react": "^17.0.14",
     "typescript": "4.3.5"
   }
diff --git a/pages/logs/[directory].tsx b/pages/logs/[directory].tsx
new file mode 100644
index 0000000..00fe78d
--- /dev/null
+++ b/pages/logs/[directory].tsx
@@ -0,0 +1,58 @@
+import path from 'path';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
+import React, { FC } from 'react';
+import { getPosts, getMarkdown, Post, getPostFromDirectory } from '../../utils/Posts';
+import Markdown from '../../components/Markdown';
+import DefaultPage from '../../templates/Default';
+
+interface Props {
+  post: Post;
+  markdown: string;
+}
+
+const Page : FC<Props> = ({ post, markdown }) => {
+    return (
+      <>
+        <DefaultPage
+          path={"/logs/" + post.directory}
+        >
+        <Markdown
+          md={markdown}
+        />
+        </DefaultPage>
+      </>
+    );
+}
+
+export default Page;
+
+export const getStaticProps: GetStaticProps = async (
+    context: GetStaticPropsContext
+  ) => {
+    const directory = context.params!.directory as string;
+
+    const post = await getPostFromDirectory(directory);
+
+    const markdown = await getMarkdown(post);
+    
+    return {
+      props: { post, markdown },
+    }
+}
+
+export async function getStaticPaths() {
+  const posts = await getPosts();
+
+  const paths = posts.map((post) => {
+    return {
+      params: {
+        directory: post.directory
+      }
+    };
+  });
+
+  return {
+    paths,
+    fallback: false
+  };
+}
\ No newline at end of file
diff --git a/pages/logs/cgit-nginx-ubuntu/index.tsx b/pages/logs/cgit-nginx-ubuntu/index.tsx
deleted file mode 100644
index ccfe5d2..0000000
--- a/pages/logs/cgit-nginx-ubuntu/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// @ts-ignore
-import md from './cgit-nginx-ubuntu.md';
-import MarkdownPage from '../../../templates/MarkdownPage';
-
-export default function cGitNGINXUbuntu() {
-  return (
-    <MarkdownPage
-      md={md}
-      path={'/logs/cgit-nginx-ubuntu'}
-    />
-  );
-}
\ No newline at end of file
diff --git a/pages/logs/packaging-nebula-for-debian/index.tsx b/pages/logs/packaging-nebula-for-debian/index.tsx
deleted file mode 100644
index a8e8e2c..0000000
--- a/pages/logs/packaging-nebula-for-debian/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// @ts-ignore
-import md from './nebula.md';
-import MarkdownPage from '../../../templates/MarkdownPage';
-
-export default function NebulaOnDebian() {
-  return (
-    <MarkdownPage
-      md={md}
-      path={'/logs/nebula-on-debian'}
-    />
-  );
-}
\ No newline at end of file
diff --git a/plugins/withMarkdownLoader.js b/plugins/withMarkdownLoader.js
index 7dd51b6..c1e0ac6 100644
--- a/plugins/withMarkdownLoader.js
+++ b/plugins/withMarkdownLoader.js
@@ -1,12 +1,6 @@
-const hljs = require('highlight.js');
 const pluginFactory = require('./pluginFactory');
+const markedOptions = require('../utils/markedOptions');
 
-function highlight(code, lang) {
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-
-    const highlighted = hljs.highlight(code, { language }).value;
-    return highlighted;
-}
 
 const withMarkdownLoader = pluginFactory((config, _options) => {
     config.module.rules.push({
@@ -20,9 +14,7 @@ const withMarkdownLoader = pluginFactory((config, _options) => {
             },
             {
                 loader: 'markdown-loader',
-                options: {
-                    highlight
-                }
+                options: markedOptions
             }
         ]
     });
diff --git a/pages/logs/cgit-nginx-ubuntu/cgit-nginx-ubuntu.md b/posts/cgit-nginx-ubuntu/main.md
index c225bd4..c225bd4 100644
--- a/pages/logs/cgit-nginx-ubuntu/cgit-nginx-ubuntu.md
+++ b/posts/cgit-nginx-ubuntu/main.md
diff --git a/posts/cgit-nginx-ubuntu/meta.json b/posts/cgit-nginx-ubuntu/meta.json
new file mode 100644
index 0000000..81968b4
--- /dev/null
+++ b/posts/cgit-nginx-ubuntu/meta.json
@@ -0,0 +1,3 @@
+{
+    "name": "Installing cGit behind NGINX on Ubuntu"
+}
\ No newline at end of file
diff --git a/pages/logs/packaging-nebula-for-debian/nebula.md b/posts/packaging-nebula-for-debian/main.md
index d1c178f..d1c178f 100644
--- a/pages/logs/packaging-nebula-for-debian/nebula.md
+++ b/posts/packaging-nebula-for-debian/main.md
diff --git a/posts/packaging-nebula-for-debian/meta.json b/posts/packaging-nebula-for-debian/meta.json
new file mode 100644
index 0000000..2e4895c
--- /dev/null
+++ b/posts/packaging-nebula-for-debian/meta.json
@@ -0,0 +1,3 @@
+{
+    "name": "Packaging Nebula for Debian"
+}
\ No newline at end of file
diff --git a/utils/Posts.tsx b/utils/Posts.tsx
index e82357a..d82467e 100644
--- a/utils/Posts.tsx
+++ b/utils/Posts.tsx
@@ -1,5 +1,9 @@
 import { promises as fs } from 'fs';
 import path from 'path';
+import marked from 'marked';
+import markedOptions from './markedOptions';
+
+marked.setOptions(markedOptions);
 
 interface PostMetadata {
   name: string;
@@ -24,21 +28,24 @@ async function getMetadata(postPath : string) : Promise<PostMetadata> {
   return JSON.parse(postMetadata) as PostMetadata;
 }
 
-async function getPosts() : Promise<Post[]> {
-  const postsDirectory = path.join(process.cwd(), 'posts');
-  const directories = await fs.readdir(postsDirectory);
+const POST_PATH = path.join(process.cwd(), 'posts');
+
+async function getPostFromDirectory(directory : string) {
+  const postPath = path.join(POST_PATH, directory);
+
+  const meta = await getMetadata(postPath);
 
-  const posts = directories.map(async (directory) => {
-    const postPath = path.join(postsDirectory, directory);
-    
-    const meta = await getMetadata(postPath);
+  return {
+    directory,
+    path: postPath,
+    meta
+  };
+}
+
+async function getPosts() : Promise<Post[]> {
+  const directories = await fs.readdir(POST_PATH);
 
-    return {
-      directory,
-      path: postPath,
-      meta 
-    };
-  });
+  const posts = directories.map(getPostFromDirectory);
 
   return await Promise.all(posts);
 }
@@ -48,10 +55,13 @@ async function getMarkdown(post : Post) : Promise<string> {
 
   const markdown = await fs.readFile(markdownPath, 'utf8');
 
-  return markdown;
+  const html = marked(markdown);
+
+  return html;
 }
 
 export {
   getPosts,
-  getMetadata,
+  getMarkdown,
+  getPostFromDirectory
 };
\ No newline at end of file
diff --git a/utils/markedOptions.js b/utils/markedOptions.js
new file mode 100644
index 0000000..ebc7a6f
--- /dev/null
+++ b/utils/markedOptions.js
@@ -0,0 +1,12 @@
+const hljs = require('highlight.js');
+
+function highlight(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+
+    const highlighted = hljs.highlight(code, { language }).value;
+    return highlighted;
+}
+
+module.exports = {
+    highlight
+};
\ No newline at end of file