22.1

[til]
- size tags by count
- manually define creation date
- add (and use) reference shortcode

Author: miermontoto

.eleventy.js

@@ -29,7 +29,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addShortcode("tilTags", (data) => buildTagWall(data));
     eleventyConfig.addShortcode("tilRecents", (data) => getRecents(data));
     eleventyConfig.addShortcode("tilRelated", (data, current) => getRelated(data, current));
-    eleventyConfig.addShortcode("tilTimestamps", (element) => buildTimestamps(element) );
+    eleventyConfig.addShortcode("tilTimestamps", buildTimestamps);
 
     eleventyConfig.addShortcode("qka", (data) => qka(data));
     eleventyConfig.addShortcode("quizButtons", (json) => quizButtons(json));
@@ -41,6 +41,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addShortcode("keywords", (pkg) => buildKeywords(pkg));
     eleventyConfig.addShortcode("version", (pkg) => buildVersionTag(pkg));
 
+    eleventyConfig.addShortcode("reference", (url, num) => `<a href="${url}" class="reference" target="_blank" rel="noopener noreferrer">[${num}]</a>`);
 
     eleventyConfig.setLibrary("njk", new Nunjucks.Environment(
         new Nunjucks.FileSystemLoader("./"),

package.json

@@ -4,6 +4,7 @@ tags: ["eleventy"]
 eleventyNavigation:
   key: "eleventy-package"
 keywords: ["eleventy", "package.json", "shortcodes", "package", "json"]
+created: 2024-08-24
 ---
 
 for a long time now, I've been using a custom shortcode in Eleventy through the

src/content/collections/til/eleventy-package.md

@@ -4,6 +4,7 @@ tags: ["ios", "html", "javascript"]
 eleventyNavigation:
   key: "ios-event-bubbling"
 keywords: ["ios", "html", "javascript", "event bubbling", "event delegation", "event propagation", "event handling"]
+created: 2024-08-24
 ---
 
 recently, while preparing the 22.0 release of this website, I noticed that the
@@ -29,10 +30,14 @@ sections.forEach(({ button, section }) => {
 });
 ```
 
-after some investigation (and Claude's help), I found out that the issue was
-related to [*event bubbling*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture). By simply moving the event listener from the
-`window` object to the `document` object and flipping the loop to iterate over
-the sections last, the issue was fixed.
+after some investigation
+{% reference 'https://www.quirksmode.org/blog/archives/2010/09/click_event_delegation.html', '1' %}
+{% reference 'https://www.sitepoint.com/community/t/handling-click-in-the-safari-browser/417837', '2' %}
+(and Claude's help), I found out that the issue was related to
+[*event bubbling*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture).
+By simply moving the event listener from the `window` object to the `document`
+object and flipping the loop to iterate over the sections last, the issue was
+fixed.
 
 here is the updated code that works on all platforms:
 
@@ -48,12 +53,3 @@ better compatibility, and the mentioned change of the loop order, avoiding the
 addition of separate event listeners.
 
 *Thanks, Claude!*
-
-<br>
-
-### references
-
-- [Apple Developer Documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
-- [MDN: Event Bubbling and Capture](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)
-- [QuircksMode: Click event delegation on iOS](https://www.quirksmode.org/blog/archives/2010/09/click_event_delegation.html)
-- [SitePoint: Handling .click() in the Safari browser](https://www.sitepoint.com/community/t/handling-click-in-the-safari-browser/417837)

src/content/collections/til/ios-event-bubbling.md

@@ -4,6 +4,7 @@ tags: ["puppeteer", "pdf"]
 eleventyNavigation:
   key: "pdf-count"
 keywords: ["puppeteer", "pdf", "page count", "number of pages", "chromium", "wkhtmltopdf"]
+created: 2024-08-15
 ---
 
 in Okticket, we are building a serverless service that generates PDF from HTML.

src/content/collections/til/pdf-count.md

@@ -1,28 +1,43 @@
+const maxTagSize = 1.25
+const minTagSize = 0.75
+
 function buildTagWall(data) {
 	const tags = {}
 
 	data.forEach((element) => {
 		element.data.tags.forEach((tag) => {
-			if (tags[tag]) { tags[tag] += 1 }
-			else { tags[tag] = 1 }
+			if (!tags[tag]) { tags[tag] = {} }
+			if (tags[tag].count) { tags[tag].count += 1 }
+			else { tags[tag].count = 1 }
 		})
 	})
 
-	delete tags.til
+	delete tags.til // remove the 'til' tag from the list
+
+	// calculate size by count.
+	const maxCount = Math.max(...Object.values(tags).map((tag) => tag.count))
+	const minCount = Math.min(...Object.values(tags).map((tag) => tag.count))
+	Object.keys(tags).forEach((tag) => {
+		const size = (tags[tag].count - minCount) / (maxCount - minCount) * (maxTagSize - minTagSize) + minTagSize
+		tags[tag].size = `font-size: ${size}em`
+	})
 
-	// sort tags by count and then alphabetically
 	Object.keys(tags).sort((a, b) => {
-		if (tags[a] === tags[b]) { return a > b ? 1 : -1 }
-		return tags[a] < tags[b] ? 1 : -1
+		// sort by count and then by name
+		if (tags[a].count > tags[b].count) { return -1 }
+		if (tags[a].count < tags[b].count) { return 1 }
+		if (a < b) { return -1 }
+		if (a > b) { return 1 }
+		return 0
 	})
 
 	return Object.keys(tags).map((tag) => {
-		// TODO: size the tags based on the count
 		// TODO: make tags clickable to filter the entries
-		return `<code class="tag">${tag}</code> <span class="count">${tags[tag]}</span>`
+		return `<span class="tag" style="${tags[tag].size}"><code class="tag-name">${tag}</code> <span class="tag-count">${tags[tag].count}</span></span>`
 	}).join(' ')
 }
 
+
 function getRecents(data) {
 	return data.slice(-10).reverse().map((element) => buildEntry(element)).join(' ');
 }
@@ -43,7 +58,8 @@ function buildTitle(element) {
 		return `<code>${tag}</code>`
 	}).join(' ')
 
-	const date = extractDate(element.page.date) || ''
+
+	const date = extractDate(element.data.created) || ''
 
 	return `<div>
 		<a href="${element.url}"><span class="til-card-title">${element.data.title}</span></a>
@@ -102,11 +118,16 @@ function getRelated(data, current) {
 }
 
 
-function buildTimestamps(element) {
+function buildTimestamps(data, element) {
 	let target = element.inputPath.substring(1)
 	target = `https://github.com/miermontoto/mier.info/tree/main${target}`
+
+	// find the element in the data array
+	let fullElement = data.find((entry) => entry.page.fileSlug === element.fileSlug)
+	const date = extractDate(fullElement.data.created)
+
 	return `
-		<div class="timestamp"> created: <time datetime="${element.date}">${element.date}</time></div>
+		<div class="timestamp"> created: <time datetime="${date}">${date}</time></div>
 		<div class="source">source: <a href="${target}">${element.filePathStem}</a></div>
 	`
 }

src/static/js/building/tilling.js

@@ -15,4 +15,4 @@ layout: generic.njk
 
 <hr>
 
-<div id="til-timestamps">{% tilTimestamps page %}</div>
+<div id="til-timestamps">{% tilTimestamps collections.til, page %}</div>