22.0 beta 5

miermontoto · miermontoto · commit 7b5ac39568f5 · 2024-08-16T09:48:32.000+02:00
[general]
- add emojis to titles
- update and remove dependencies
- minor footer changes
- move treemap to own js file
- minor style changes
- various bug fixes

[mier.info]
- add information and links

[about]
- no longer an undergraduate!!!

[index]
- new background video
diff --git a/.eleventy.js b/.eleventy.js
@@ -3,7 +3,8 @@ const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const Nunjucks = require("nunjucks");
 
-const { buildBreadcrumbs, buildTreemap } = require('./src/static/js/building/breadcrumbs.js');
+const buildBreadcrumbs = require('./src/static/js/building/breadcrumbs.js');
+const buildTreemap = require('./src/static/js/building/treemap.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');
diff --git a/assets/media/background/dont-get-me-started.mp4 b/assets/media/background/dont-get-me-started.mp4
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/content/about.njk b/src/content/about.njk
@@ -1,8 +1,8 @@
 {% import "src/static/macros.njk" as macros %}
 
 <ul>
-	<li>spanish computer engineering undergraduate.</li>
-	<li>currently 🎓 studying at EPI Gijón (University of Oviedo).</li>
+	<li>spanish computer engineering graduate.</li>
+	<li>🎓 studied at EPI Gijón (University of Oviedo).</li>
 	<li>interested in all things 💻 tech and 🎵 music.</li>
 	<li>i like 🧗 climbing, 🚲 cycling and playing 🎸 bass.</li>
 	<li>{{ macros.renderIcon('ruby') }} ruby, {{ macros.renderIcon('python') }} python, {{ macros.renderIcon('java') }} java and a little bit of everything else (c/c++/c#, shell, web, sql, ...)</li>
diff --git a/src/content/collections/experience/grado.md b/src/content/collections/experience/grado.md
@@ -1,7 +1,7 @@
 ---
 name: universidad de oviedo
 role: computer engineering degree
-period: 2020-2024 (expected)
+period: 2020-2024
 logo: epi
 ---
 
diff --git a/src/content/collections/projects/mier.info.md b/src/content/collections/projects/mier.info.md
@@ -8,33 +8,56 @@ star: star
 permalink: /this/
 redirect_from: [/mier.info/, /self/]
 emoji: 🌐
-buttons: [
-	{img: "β ", url: "https://mier-f6277--beta-ms6exjco.web.app/", text: "beta"}
-]
+# buttons: [
+# 	{img: "β ", url: "https://mier-f6277--beta-ms6exjco.web.app/", text: "beta"}
+# ]
 eleventyNavigation:
   key: this
   title: mier.info
 ---
 
 ## intro
-this webpage is a collection of my personal projects, a place that i control that allows me to build and publish my own small ideas.
-i've spent a lot of time building it and slowly redefining it (yet it still looks like this)
-even though it's not impressive neither visually nor technically, it represents my ideas and beliefs.
+this webpage is a collection of my personal projects, a place that I control
+that allows me to build and publish my own small ideas.
+I've spent a lot of time building it and slowly redefining it,
+and even though it's not impressive neither visually nor technically,
+it represents my ideas and beliefs.
 
 <br>
 
 ## tech
-almost everything you see, from the breadcrumbs to the buttons, is handcrafted and built from scratch with <img src="/assets/icons/tech/eleventy.svg" class="icon" alt="eleventy">, hosted in <img src="/assets/icons/tech/firebase.svg" class="icon" alt="firebase">, using <img src="/assets/icons/tech/nunjucks.svg" class="icon" alt="nunjucks">, <img src="/assets/icons/tech/sass.svg" class="icon" alt="sass">, <img src="/assets/icons/tech/markdown.svg" class="icon" alt="markdown"> (and a ton of client-side <img src="/assets/icons/tech/js.svg" class="icon" alt="javascript">).
+almost everything you see, from the breadcrumbs to the buttons, is handcrafted
+and built from scratch with <img src="/assets/icons/tech/eleventy.svg" class="icon" alt="eleventy">,
+hosted in <img src="/assets/icons/tech/firebase.svg" class="icon" alt="firebase">,
+using <img src="/assets/icons/tech/nunjucks.svg" class="icon" alt="nunjucks">,
+<img src="/assets/icons/tech/sass.svg" class="icon" alt="sass">,
+<img src="/assets/icons/tech/markdown.svg" class="icon" alt="markdown">
+(and a ton of client-side <img src="/assets/icons/tech/js.svg" class="icon" alt="javascript">).
 
-apart from having its github repo, it is connected to firebase hosting through CI/CD using github actions, including the 'beta' branch that hosts the latest changes before going live.
+the github repo is connected to firebase hosting through CI/CD using github actions, including the 'beta' branch that hosts the latest changes before going live.
+
+### custom elements
+- the [**changelog**](/changelog/) is generated using the git history, first
+  processed using a ruby script which generates a json file, which is then
+  processed by javascript to generate the html changelog.
+- the **breadcrumbs** at the top of the page (which are also used for navigation)
+  are generated using the eleventyNavigation keys and processed with javascript
+  to statically generate the html navigation bar for each page.
+- the [**treemap**](/treemap/) is generated in a similar way to the breadcrumbs,
+  using the eleventy collections and processed with javascript to generate the
+  html treemap.
 
 <br>
 
 ## design
-the "design" is a tribute to the legendary [daft punk 90's website](https://web.archive.org/web/20220223020719/https://daftpunk.com/).
-as you can probably tell, it's a very important reference for me, and even though it doesn't hold up to today's standards, i've always loved the simplicty and the way that it looks.
+the "design" is a tribute to the legendary
+[daft punk 90's website](https://web.archive.org/web/20220223020719/https://daftpunk.com/).
+as you can probably tell, it's a very important reference for me,
+and even though it doesn't hold up to today's standards,
+i've always loved its simplicty and looks.
 
-from December 1st to January 7th every year, there is snow falling (thanks to [zachleat](https://github.com/zachleat/snow-fall))
+from December 1st to January 7th every year, there is snow falling
+(thanks to [zachleat](https://github.com/zachleat/snow-fall))
 
 several other inspirations:
 - [mschf](https://mschf.com/)
diff --git a/src/content/collections/webutils/uuid.njk b/src/content/collections/webutils/uuid.njk
@@ -3,7 +3,7 @@ title: uuid
 desc: 'uuid generator'
 redirect_from: /webutils/uuid/
 eleventyNavigation:
-key: uuid
+  key: uuid
 ---
 
 <div>
diff --git a/src/content/collections/writeups/test.md b/src/content/collections/writeups/test.md
diff --git a/src/content/data/backgrounds.json b/src/content/data/backgrounds.json
@@ -3,5 +3,6 @@
 	{"name": "Random Access Memories Unboxed", "src": "ram-unboxed.mp4"},
 	{"name": "Random Access Memories Unseen Ad", "src": "unseen-ram.mp4"},
 	{"name": "10th Anniversary Teaser of Electroma", "src": "electroma-ad.mp4"},
-	{"name": "Daft Punk + GAP Spot Ad", "src": "gap-commercial.mp4"}
+	{"name": "Daft Punk + GAP Spot Ad", "src": "gap-commercial.mp4"},
+	{"name": "The Smile - Don't Get Me Started (official video)", "src": "dont-get-me-started.mp4"}
 ]
diff --git a/src/content/treemap.njk b/src/content/treemap.njk
@@ -5,7 +5,6 @@ permalink: /treemap/
 redirect_from: /map/
 eleventyNavigation:
   key: treemap
-  title: map
 ---
 
 {% treemap collections.all %}
diff --git a/src/static/css/global.sass b/src/static/css/global.sass
@@ -23,14 +23,14 @@ footer
     color: colors.$light
     background: colors.$primary
     padding: 1em
-    font-size: 0.85em
+    font-size: 0.95em
 
     img
         height: 2em
         margin-bottom: -0.75em
 
     .footer-links
-        font-size: 0.75em
+        font-size: 0.65em
         font-style: italic
         color: colors.$light !important
 
@@ -77,7 +77,7 @@ code
     position: fixed
     bottom: 10px
     right: 10px
-    font-size: min(14px, 2.25vw)
+    font-size: min(14px, max(2.25vw, 0.65em))
     color: colors.$light
     user-select: none
     text-decoration: none
@@ -177,11 +177,16 @@ quote
     color: colors.$light
     user-select: none
 
+    #b-map
+        text-decoration: none
+        color: inherit !important
+        background-color: inherit !important
+
     .bc-target
         font-size: 1.1em
 
-    .bc-target:not(a)
-        color: colors.$white
+        &:not(a)
+            color: colors.$white
 
 img
     user-select: none
@@ -214,5 +219,5 @@ img
 h1, h2, h3
     font-weight: normal
 
-b
+b, strong
     font-weight: bolder
diff --git a/src/static/js/building/breadcrumbs.js b/src/static/js/building/breadcrumbs.js
@@ -12,41 +12,6 @@ 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
     let targetName = thisPage.url.replace('.html', '').split('/').filter(v => v !== '').join('/');
@@ -58,7 +23,7 @@ const buildBreadcrumbs = (navPages, thisPage) => {
     }
 
     // build the breadcrumbs
-    let html = `<nav aria-label="breadcrumbs" id="breadcrumbs">$ <a href="/" id="indx-btn">/</a>`; // home button
+    let html = `<nav aria-label="breadcrumbs" id="breadcrumbs"><a href="/treemap/" id="b-map">$</a> <a href="/" id="indx-btn">/</a>`; // home button
 
     if (currentPage.parent) { // if the page has a parent, add it to the breadcrumbs
         let parentPage = findSelfInNavPages(navPages, currentPage.parent);
@@ -70,4 +35,4 @@ const buildBreadcrumbs = (navPages, thisPage) => {
     return html;
 };
 
-module.exports = {buildBreadcrumbs, buildTreemap};
+module.exports = buildBreadcrumbs;
diff --git a/src/static/js/building/treemap.js b/src/static/js/building/treemap.js
@@ -0,0 +1,36 @@
+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
+};
+
+module.exports = buildTreemap;
diff --git a/src/templates/generic.njk b/src/templates/generic.njk
@@ -8,7 +8,7 @@ css: generic
         {% set navPages = collections.all | eleventyNavigation %}
         {% breadcrumbs navPages %}
     </span>
-    <span id="title">{{ title }}</span>
+    <span id="title">{{ emoji }} {{ title }}</span>
     {% if subtitle %}
         <span id="subtitle">{{ subtitle }}</span>
     {% endif %}
diff --git a/src/templates/snippets/footer.njk b/src/templates/snippets/footer.njk
@@ -2,8 +2,11 @@
 	<img src="/assets/favicon.svg" alt="logo">
 
 	<a property="dct:title" rel="cc:attributionURL" href="/">mier.info</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>
+	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="https://github.com/miermontoto/mier.info" target="_blank" class="footer-links">source</a>
+	<a href="/treemap/" class="footer-links">map</a>
 </footer>

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`{"name": "Random Access Memories Unboxed", "src": "ram-unboxed.mp4"},`
`4`	`4`	`{"name": "Random Access Memories Unseen Ad", "src": "unseen-ram.mp4"},`
`5`	`5`	`{"name": "10th Anniversary Teaser of Electroma", "src": "electroma-ad.mp4"},`
`6`		`- {"name": "Daft Punk + GAP Spot Ad", "src": "gap-commercial.mp4"}`
	`6`	`+ {"name": "Daft Punk + GAP Spot Ad", "src": "gap-commercial.mp4"},`
	`7`	`+ {"name": "The Smile - Don't Get Me Started (official video)", "src": "dont-get-me-started.mp4"}`
`7`	`8`	`]`