21.9

[treemap]
- implement treemap

[changelog]
- better titles
- minor styling changes
- skip repeated commits

[general]
- minor footer changes

Author: miermontoto

.eleventy.js

@@ -3,7 +3,7 @@ const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const Nunjucks = require("nunjucks");
 
-const buildBreadcrumbs = require('./src/static/js/building/breadcrumbs.js');
+const { buildBreadcrumbs, buildTreemap } = require('./src/static/js/building/breadcrumbs.js');
 const buildChangelog = require('./src/static/js/building/changelog.js');
 const addAsset = require('./src/static/js/building/linking.js');
 const { qka, quizButtons, quizQuestions } = require('./src/static/js/building/quizzing.js');
@@ -21,6 +21,7 @@ module.exports = function (eleventyConfig) {
 
 
     eleventyConfig.addShortcode("breadcrumbs", function(navPages) { return buildBreadcrumbs(navPages, this.page) });
+    eleventyConfig.addShortcode("treemap", function(navPages) { return buildTreemap(navPages) });
     eleventyConfig.addShortcode("changelog", (data) => buildChangelog(data));
     eleventyConfig.addShortcode("qka", (data) => qka(data));
     eleventyConfig.addShortcode("quizButtons", (json) => quizButtons(json));

build-changelog.rb

@@ -51,11 +51,12 @@ def log(msg)
 	commit = Commit.new
 	commit.body, commit.date, commit.hash, commit.author = line.split("||")
 	commit.author.strip!
+	commit.hash.strip!
 
 	# filter out commits
-	next unless commit.author in allowed_authors # discard commits from other authors
+	next unless commit.author in allowed_authors   # discard commits from other authors
+	next if commit.body =~ /Merge pull request/    # discard merge commits
 	next if commit.body !~ /^\d{1,2}\.\d{1,2}(.*)/ # discard commits that don't have a version number (XX.y)
-	next if commit.body =~ /Merge pull request/ # discard merge commits
 
 	# process version
 	commit.version = Version.new
@@ -87,6 +88,12 @@ def log(msg)
 	commit.title = commit.title.gsub(/`(.*)`/, "<code>\\1</code>")
 	commit.message = commit.message.gsub(/`(.*)`/, "<code>\\1</code>") unless commit.message.nil?
 
+	# skip commits with repeated titles
+	next if commits.map(&:title).include? commit.title
+
+	# bold sections in the commit message (format: "[section]")
+	commit.message = commit.message.gsub(/\[(.*)\]/, "<strong>\[\\1\]</strong>") unless commit.message.nil?
+
 	commits << commit
 end
 

package.json

@@ -8,3 +8,4 @@ eleventyNavigation:
   title: map
 ---
 
+{% treemap collections.all %}

src/content/treemap.njk

@@ -11,9 +11,14 @@
 
 	.title
 		font-weight: bold
-		font-size: 1.5rem
+		font-size: 1.75rem
+
+		.subtitle
+			font-weight: normal
+			font-size: 1rem
 
 	.date
+		margin-top: 0.75em
 		font-size: 0.8rem
 		color: colors.$dark
 

src/static/css/app/changelog.sass

@@ -22,6 +22,7 @@ footer
     color: colors.$light
     background: colors.$primary
     padding: 1em
+    font-size: 0.85em
 
     img
         height: 2em

src/static/css/global.sass

@@ -10,7 +10,42 @@ function findSelfInNavPages(navPages, url) {
     }
 
     return null;
-}
+};
+
+const buildTreemap = (navPages) => {
+    let html = `<ul id="treemap">`
+    let pages = navPages.filter(p => p.url !== '/' && p.url !== false)
+    let tree = []
+
+    while (pages.length > 0) {
+        const page = pages.shift()
+
+        let element = {
+            name: page.fileSlug,
+            html: `<li class="treemap-node"><a href="${page.url}">${page.fileSlug}</a>`,
+            children: navPages.filter(p => p.data.eleventyNavigation?.parent === page.fileSlug)
+        }
+
+        // remove children from navPages
+        pages = pages.filter(p => !element.children.includes(p))
+
+        if (element.children.length > 0) {
+            element.html += `<ul class="treemap-children">`
+            element.children.forEach(child => {element.html += `<li class="treemap-node"><a href="${child.url}">${child.fileSlug}</a></li>`})
+            element.html += `</ul>`
+        }
+
+        element.html += `</li>`
+        tree.push(element)
+    }
+
+    tree.sort((a, b) => a.name > b.name ? 1 : -1) // sort tree by name
+    tree.forEach(node => html += node.html) // add html to the treemap
+
+    html += `</ul>`
+
+    return html
+};
 
 const buildBreadcrumbs = (navPages, thisPage) => {
     if (!thisPage.url) return ''; // if permalink is false in frontmatter, don't show breadcrumbs
@@ -35,4 +70,4 @@ const buildBreadcrumbs = (navPages, thisPage) => {
     return html;
 };
 
-module.exports = buildBreadcrumbs;
+module.exports = {buildBreadcrumbs, buildTreemap};

src/static/js/building/breadcrumbs.js

@@ -18,6 +18,21 @@ const checkCurrent = (data) => {
 	})
 }
 
+
+const processTitle = (title) => {
+	let content = `<span class="title">`
+
+	const parts = title.split(': ')
+	content += parts[0]
+
+	if (parts.length > 1) {
+		content += `<span class="subtitle"> ${parts.slice(1).join(': ')}</span>`
+	}
+
+	content += `</span>`
+	return content
+}
+
 const buildChangelog = (data) => {
 	let content = '<div id="changelog">'
 
@@ -38,7 +53,8 @@ const buildChangelog = (data) => {
 		prevMajor = d.version.major
 
 		// add the commit entry
-		content += `<div class="entry hoverborder"><span class="title">${d.title}</span>`
+		content += `<div class="entry hoverborder">`
+		content += processTitle(d.title)
 		if (d.message) content += `<br><span class="message">${d.message.replace(/\n/g, '<br>')}</span>`
 		content += `<a class="date" href="https://github.com/miermontoto/mier.info/commit/${d.hash}" target="_blank">${d.date}</a></div>`
 	})

src/static/js/building/changelog.js

@@ -2,8 +2,8 @@
 	<img src="/assets/favicon.svg" alt="logo">
 
 	<a property="dct:title" rel="cc:attributionURL" href="https://mier.info">mier.info</a>
-	by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/miermontoto">Juan Mier</a>.
+	by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/miermontoto">Juan Mier</a>
 
-	<a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target="_blank" rel="license noopener noreferrer"  class="footer-links">license</a>
+	<a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target="_blank" rel="license noopener noreferrer" class="footer-links">license</a>
 	<a href="https://github.com/miermontoto/mier.info" target="_blank" class="footer-links">source</a>
 </footer>