summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--gulpfile.js28
-rw-r--r--package-lock.json153
-rw-r--r--package.json4
-rw-r--r--resources/md/2021-06-22-clean-sandbox.md7
-rw-r--r--resources/pug/finals/articles/2021-06-22-clean-sandbox.pug12
-rw-r--r--resources/pug/finals/articles/index.pug12
-rw-r--r--resources/pug/include/layout-articles.pug8
-rw-r--r--resources/pug/include/layout-sidebar.pug7
-rw-r--r--resources/sass/style.scss9
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;
}