Setup infrastructure for articles written in markdown

6 files changed, 54 insertions, 1 deletions

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;
 }