Setup infrastructure for articles written in markdown

9 files changed, 230 insertions, 10 deletions

diff --git a/gulpfile.js b/gulpfile.js
index f6eef2d..824a788 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,11 +1,14 @@
 var gulp = require('gulp'),
 	changed = require('gulp-changed'),
+	hljs = require('highlight.js'),
+	md = require('jstransformer')(require('jstransformer-markdown-it')),
 	minifyhtml = require('gulp-minify-html'),
 	notify = require('gulp-notify'),
 	pug = require('gulp-pug-3'),
 	sass = require('gulp-sass-next');
 
 var config = {
+	mdPath:   './resources/md',
 	pugPath:  './resources/pug',
 	sassPath: './resources/sass',
 }
@@ -33,7 +36,29 @@ function html() {
 	return gulp.src(src)
 		.pipe(changed(dst, {extension: 'html'}))
 		.pipe(pug({
-			basedir: config.pugPath + '/include'
+			basedir: config.pugPath + '/include',
+			filters: {
+				markdown: (text, options) => {
+					options = Object.assign({
+						highlight: (str, lang) => {
+							if (lang && hljs.getLanguage(lang)) {
+								try {
+									return hljs.highlight(str, {language: lang}).value;
+								} catch (__) {}
+							}
+
+							try {
+								return hljs.highlightAuto(str).value;
+							} catch (__) {}
+
+							return '';
+						},
+						langPrefix: 'lang-',
+						linkify: true,
+					}, options);
+					return md.render(text, options).body;
+				}
+			}
 		}))
 		.pipe(minifyhtml())
 		.pipe(gulp.dest(dst));
@@ -59,6 +84,7 @@ function fonts() {
 }
 
 function watch() {
+	gulp.watch(config.mdPath + '/**/*.md', html);
 	gulp.watch(config.pugPath + '/**/*.pug', html);
 	gulp.watch(config.sassPath + '/**/*.scss', css);
 }
diff --git a/package-lock.json b/package-lock.json
index 53be700..c82d1eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,9 @@
         "gulp-minify-html": "^1.0.6",
         "gulp-notify": "^4.0.0",
         "gulp-pug-3": "^1.2.2",
-        "gulp-sass-next": "^6.0.0"
+        "gulp-sass-next": "^6.0.0",
+        "highlight.js": "^11.0.1",
+        "jstransformer-markdown-it": "^2.1.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
@@ -251,6 +253,15 @@
       "integrity": "sha1-PrTWEpc/xrbcbvM49W91nyrFw6Y=",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -2481,9 +2492,9 @@
       }
     },
     "node_modules/gulp-changed": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-4.0.2.tgz",
-      "integrity": "sha512-rAvQt+ByaqrMuJLwucvxC+MC02Vh8ksiJ16hoQlk4xnmlHiLJMque2aXXQMmyocQac3RIjNRcyr7iG1TNH15GA==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-4.0.3.tgz",
+      "integrity": "sha512-oIymgTNmmIvdqRRpdtohmELix81q+CA/D9DgVCvaM4Ulai0xgalf+XS6A95JwskbxRGQKtzzhMmdWZEuikX67w==",
       "dev": true,
       "dependencies": {
         "make-dir": "^3.0.0",
@@ -3287,6 +3298,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -3789,6 +3809,18 @@
         "promise": "^7.0.1"
       }
     },
+    "node_modules/jstransformer-markdown-it": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz",
+      "integrity": "sha1-aewwzkUYvtWZezjwJ2SOjChekvc=",
+      "dev": true,
+      "dependencies": {
+        "markdown-it": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=7"
+      }
+    },
     "node_modules/just-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz",
@@ -3980,6 +4012,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -4252,6 +4293,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
     "node_modules/matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -4294,6 +4351,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
     "node_modules/memoizee": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.10.tgz",
@@ -6175,6 +6238,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "node_modules/sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -6650,6 +6719,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
     "node_modules/unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
@@ -7396,6 +7471,15 @@
       "integrity": "sha1-PrTWEpc/xrbcbvM49W91nyrFw6Y=",
       "dev": true
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -9370,9 +9454,9 @@
       }
     },
     "gulp-changed": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-4.0.2.tgz",
-      "integrity": "sha512-rAvQt+ByaqrMuJLwucvxC+MC02Vh8ksiJ16hoQlk4xnmlHiLJMque2aXXQMmyocQac3RIjNRcyr7iG1TNH15GA==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gulp-changed/-/gulp-changed-4.0.3.tgz",
+      "integrity": "sha512-oIymgTNmmIvdqRRpdtohmELix81q+CA/D9DgVCvaM4Ulai0xgalf+XS6A95JwskbxRGQKtzzhMmdWZEuikX67w==",
       "dev": true,
       "requires": {
         "make-dir": "^3.0.0",
@@ -9976,6 +10060,12 @@
         }
       }
     },
+    "highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==",
+      "dev": true
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -10385,6 +10475,15 @@
         "promise": "^7.0.1"
       }
     },
+    "jstransformer-markdown-it": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz",
+      "integrity": "sha1-aewwzkUYvtWZezjwJ2SOjChekvc=",
+      "dev": true,
+      "requires": {
+        "markdown-it": "^8.0.0"
+      }
+    },
     "just-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz",
@@ -10562,6 +10661,15 @@
         "resolve": "^1.1.7"
       }
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -10801,6 +10909,19 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -10836,6 +10957,12 @@
         }
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
     "memoizee": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.10.tgz",
@@ -12375,6 +12502,12 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -12786,6 +12919,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
diff --git a/package.json b/package.json
index 3979ff7..8b08ffe 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "gulp-minify-html": "^1.0.6",
     "gulp-notify": "^4.0.0",
     "gulp-pug-3": "^1.2.2",
-    "gulp-sass-next": "^6.0.0"
+    "gulp-sass-next": "^6.0.0",
+    "highlight.js": "^11.0.1",
+    "jstransformer-markdown-it": "^2.1.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
diff --git a/resources/md/2021-06-22-clean-sandbox.md b/resources/md/2021-06-22-clean-sandbox.md
new file mode 100644
index 0000000..623a080
--- /dev/null
+++ b/resources/md/2021-06-22-clean-sandbox.md
@@ -0,0 +1,7 @@
+Example of an article with markdown.
+
+See https://camilstaps.gitlab.io/clean-sandbox.
+
+```js
+let xyz = 5;
+```
diff --git a/resources/pug/finals/articles/2021-06-22-clean-sandbox.pug b/resources/pug/finals/articles/2021-06-22-clean-sandbox.pug
new file mode 100644
index 0000000..cd343dd
--- /dev/null
+++ b/resources/pug/finals/articles/2021-06-22-clean-sandbox.pug
@@ -0,0 +1,12 @@
+extends /layout-articles.pug
+
+block prepend menu
+	- var page = '2021-06-22-clean-sandbox'
+
+block subtitle
+	| Clean Sandbox
+block subtitleDate
+	| 22 June 2021
+
+block page
+	include:markdown ../../../md/2021-06-22-clean-sandbox.md
diff --git a/resources/pug/finals/articles/index.pug b/resources/pug/finals/articles/index.pug
new file mode 100644
index 0000000..17951c7
--- /dev/null
+++ b/resources/pug/finals/articles/index.pug
@@ -0,0 +1,12 @@
+extends /layout-articles.pug
+
+block prepend menu
+	- var page = ''
+
+block subtitle
+	| Home
+
+block page
+	p.
+		This is a collection of some software-related articles I wrote.
+		Perhaps it will be larger than this one day.
diff --git a/resources/pug/include/layout-articles.pug b/resources/pug/include/layout-articles.pug
new file mode 100644
index 0000000..88b1aea
--- /dev/null
+++ b/resources/pug/include/layout-articles.pug
@@ -0,0 +1,8 @@
+extends layout-sidebar.pug
+
+block append menu
+	- var base_url = '/articles/'
+	+menu(
+		{name: 'Home', link: ''},
+		{name: 'Clean Sandbox', year: 2021, month: 6, day: 22},
+	)
diff --git a/resources/pug/include/layout-sidebar.pug b/resources/pug/include/layout-sidebar.pug
index 68c1ac2..8cf7d5a 100644
--- a/resources/pug/include/layout-sidebar.pug
+++ b/resources/pug/include/layout-sidebar.pug
@@ -6,10 +6,15 @@ block content
 			ul.nav.nav-pills.nav-stacked
 				block menu
 					mixin menu(...items)
+						- const pad_zero = n => n < 10 ? '0' + n : n;
+
 						each item in items
 							if typeof item.link == 'undefined'
 								- item.link = item.name.toLowerCase().replace(/\W/g, '-')
 
+							unless typeof item.year == 'undefined' || typeof item.month == 'undefined' || typeof item.day == 'undefined'
+								- item.link = item.year + '-' + pad_zero(item.month) + '-' + pad_zero(item.day) + '-' + item.link
+
 							li(role='presentation', class=(page == item.link) ? 'active' : '')
 								a(href=base_url + (item.link == '' ? '' : item.link + '.html'))= item.name
 
@@ -22,5 +27,5 @@ block content
 		div.col-lg-2.col-md-2.text-right
 			block subtitle-right
 
-		div.col-lg-9.col-md-8.text-justify
+		div.col-lg-9.col-md-8.text-justify.markdown
 			block page
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index 7afe3b4..e401645 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -92,6 +92,15 @@ span.tt {
 	font-family: monospace;
 }
 
+/* markdown is used for page content, but h1 - h3 are already used for the page
+ * title and subtitle. So we adapt the font size of the headings in the
+ * markdown content so that they are not larger than the page title. */
+.markdown {
+	h1 { font-size: 18px; } /* size of h4 */
+	h2 { font-size: 14px; } /* size of h5 */
+	h3 { font-size: 12px; } /* size of h5 */
+}
+
 footer {
 	padding: 1em 0;
 }