17.0 RC1

- recursive search for css and js files
- url encoder/decoder webutil
- error mesages
- style changes to webutils
- minor changes

.eleventy.js

@@ -1,23 +1,54 @@
+const fs = require("fs");
+const path = require("path");
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 
+function findFileInDir(dir, filename) {
+    let files = fs.readdirSync(dir);
+
+    for (const file of files) {
+        let filepath = path.join(dir, file);
+
+        if (fs.statSync(filepath).isDirectory()) {
+            let result = findFileInDir(filepath, filename);
+            if (result) return result;
+        } else if (path.basename(filepath) === filename) {
+            return filepath;
+        }
+    }
+
+    return null;
+}
+
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(EleventyRenderPlugin);
 
-    eleventyConfig.addPassthroughCopy("./src/static/js/**");
-    eleventyConfig.addPassthroughCopy("./assets/**");
+    eleventyConfig.addPassthroughCopy("./src/static/js");
+    eleventyConfig.addPassthroughCopy("./assets");
     eleventyConfig.addPassthroughCopy("**.data.json");
-    eleventyConfig.addGlobalData('repo', async () => fetch('https://api.github.com/repos/11ty/eleventy'));
     eleventyConfig.setDataFileSuffixes([".data", ""]);
+    eleventyConfig.setQuietMode(true);
     eleventyConfig.setServerOptions({
-        watch: ["_site/static/**"]
+        watch: ["_site/static/css/**"]
     });
 
     eleventyConfig.addShortcode("addScript", function (filename) {
-        return `<script src="/static/js/app/${filename}.js"></script>`;
+        let filepath = findFileInDir("./src/static/js", `${filename}.js`);
+        if (filepath) {
+            return `<script src="${filepath.replace('src', '')}"></script>`;
+        }
+
+        console.log(`JS file ${filename} not found in ./src/static/js`);
+        return '';
     });
 
     eleventyConfig.addShortcode("addStyle", function (filename) {
-        return `<link rel="stylesheet" href="/static/css/app/${filename}.css">`;
+        let filepath = findFileInDir("./src/static/css", `${filename}.sass`);
+        if (filepath) {
+            return `<link rel="stylesheet" href="${filepath.replace('src', '').replace('.sass', '.css')}">`;
+        }
+
+        console.log(`JS file ${filename} not found in ./src/static/js`);
+        return '';
     });
 
     eleventyConfig.addShortcode("keywords", function() {

src/content/collections/experience/grado.md

@@ -2,7 +2,7 @@
 name: universidad de oviedo
 role: computer engineering degree
 period: 2020-2024 (expected)
-logo: 'epi'
+logo: epi
 ---
 
 **grades:** 3.0 GPA, <b style="color: gold;"><i>12 honors</i></b>
@@ -19,4 +19,4 @@ some relevant projects and assignments:
 - [network and binary analysis in Assembly and C](https://github.com/miermontoto/HackingForce).
 - [RPC, MOM and consensus/sync algorithms in C](https://github.com/miermontoto/Distribuidos/tree/main/PL/entregas/entrega1).
 - data analysis and manipulation in [R](https://github.com/miermontoto/Estadistica/tree/main/PL) and [MATLAB](https://github.com/miermontoto/Computacion/tree/main/PL).
-- [cybersecurity, digital signing and certificates in C#](https://github.com/miermontoto/Seguridad/tree/master/PL)
+- [cybersecurity, digital signing and certificates in C#](https://github.com/miermontoto/Seguridad/tree/master/PL).

src/content/collections/experience/okticket.md

@@ -5,13 +5,13 @@ period: 2023 (3 months)
 icons: [fa-brands fa-laravel fa-solid, fa-brands fa-php, fa-brands fa-docker, devicon-ruby-plain]
 class: okticket
 ---
-extracurricular internship at *okticket*, a Fintech SaaS that digitizes and manages employee tickets.
+extracurricular internship at *okticket*, a fintech SaaS that digitizes and manages employee tickets.
 
 ---
 
-- back-end system migration (laravel 10, PHP 8.2, composer 2)
+- back-end system migration (laravel 10, PHP 8.2, composer 2).
 - local deploy automation with Docker and Ruby.
 - load and stress tests with [Locust](https://locust.io/).
-- implementation of code styling and linting tools such as [duster](https://github.com/tighten/duster)
+- implementation of code styling and linting tools such as [duster](https://github.com/tighten/duster).
 - deployment of brand new features to testing environments in Mexico.
 - general back-end and development tasks.

src/content/collections/projects/gti.njk

@@ -14,6 +14,7 @@ source: https://github.com/search?q=repo%3Amiermontoto%2Fmiermontoto+gti.&type=c
 	<span id="correct">0</span> / <span id="total">?</span>
 	<span id="→">→</span>
 	<span id="scored"><span id="score">0</span>%</span>
+	<noscript class=".error">ERROR: JavaScript is NEEDED for the quiz to work!</noscript>
 </div>
 <span class="button" id="reset">reset</span>
 

src/content/collections/projects/webutils.njk

@@ -1,6 +1,6 @@
 ---
 title: webutils
-desc: wip!!
+desc: 'small collection of web utilities: md5, base64, url encode/decode, etc.'
 icons: [devicon-javascript-plain]
 permalink: /webutils/
 demo: /webutils/

src/content/collections/webutils/base64.njk

@@ -2,11 +2,11 @@
 {% addStyle 'webutils' %}
 
 <div id="decoded">
-	<textarea class="input" id="decoded-text" placeholder="Plain text"></textarea>
-	<span class="button" id="decoded-copy">⎘</span>
+	<textarea class="input" id="decoded-text" placeholder="plain text"></textarea>
+	{# <span class="button" id="decoded-copy">⎘</span> #}
 </div>
 <span><=></span>
 <div id="encoded">
-	<textarea class="output" id="encoded-text" placeholder="Encoded text"></textarea>
-	<span class="button" id="encoded-copy">⎘</span>
+	<textarea class="output" id="encoded-text" placeholder="encoded text"></textarea>
+	{# <span class="button" id="encoded-copy">⎘</span> #}
 </div>

src/content/collections/webutils/md5.njk

@@ -2,6 +2,6 @@
 {% addScript 'md5' %}
 {% addStyle 'webutils' %}
 
-<input id="md5-input" class="input" type="text" placeholder="String to hash using MD5">
+<input id="md5-input" class="input" type="text" placeholder="string to hash using MD5">
 <span id="md5-output" class="output"></span>
 <span class="button" id="md5-copy">copy</span>

src/content/collections/webutils/tiny.njk

@@ -5,6 +5,7 @@
 	<input type="checkbox" id="tiny-ignore">
 	<label for="tiny-ignore">Ignore untinifyable content</label>
 </div>
-<input class="input" id="tiny-input" type="text" placeholder="String to tinify">
+<input class="input" id="tiny-input" type="text" placeholder="string to tinify">
+<br>
 <span class="output" id="tiny-output"></span>
 <span class=button id="tiny-copy">copy</span>

src/content/collections/webutils/url.njk

@@ -0,0 +1,6 @@
+{% addStyle 'webutils' %}
+{% addScript 'url' %}
+
+<textarea class="input" id="url-decoded" type="text" placeholder="decoded URL"></textarea>
+<span><=></span>
+<textarea class="output" id="url-encoded" type="text" placeholder="encoded URL"></textarea>

src/index.njk

@@ -1,7 +1,7 @@
 ---
 layout: base.njk
-css: /static/css/index.css
-js: /static/js/index.js
+css: index
+js: index
 ---
 
 <script src="https://kit.fontawesome.com/a73ee9bbfb.js" crossorigin="anonymous" async></script>

src/static/css/app/webutils.sass

@@ -10,7 +10,7 @@
 	text-align: center
 
 .input, .output
-	width: 80%
+	width: 100%
 	height: max(1em, auto)
 
 .utils

src/static/css/global.sass

@@ -137,3 +137,8 @@ $rotation: 2.5rad
         height: auto
         width: 1.25em
         filter: invert(1) grayscale(1) brightness(1.5)
+
+.error
+    color: base.$wrong
+    font-weight: bold
+    font-size: 2em

src/static/js/app/url.js

@@ -0,0 +1,23 @@
+window.addEventListener("load", function(event) {
+	const decoded = document.querySelector('#url-decoded');
+	const encoded = document.querySelector('#url-encoded');
+
+	const encode = () => {
+		encoded.value = encodeURIComponent(decoded.value);
+	}
+
+	const decode = () => {
+		let text;
+
+		try {
+			text = decodeURIComponent(encoded.value);
+		} catch (e) {
+			text = '!INVALID!';
+		}
+
+		decoded.value = text;
+	}
+
+	decoded.addEventListener('input', encode);
+	encoded.addEventListener('input', decode);
+});

src/static/js/global.js

@@ -1,24 +1,25 @@
-christmas();
-getAgent();
-getWindowSize();
-getTime();
-setInterval(updateInfo, 1000);
+window.addEventListener('load', () => {
+    christmas();
 
-document.querySelectorAll('.topbtn').forEach((btn) => {
-    btn.addEventListener('click', () => {
-        window.scrollTo(0, 0);
+    document.querySelector('#general-info').innerHTML = navigator.userAgent; // get user agent
+    updateInfo();
+    setInterval(updateInfo, 1000);
+
+    document.querySelectorAll('.topbtn').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            window.scrollTo(0, 0);
+        });
     });
-});
 
-document.querySelectorAll('.bordered').forEach((card) => {
-    card.addEventListener('mousemove', (e) => {
-        const rect = card.getBoundingClientRect();
-        const x = e.clientX - rect.left - rect.width / 2;
-        const y = e.clientY - rect.top - rect.height / 2;
-        const angle = Math.atan2(-x, y);
+    document.querySelectorAll('.bordered').forEach((card) => {
+        card.addEventListener('mousemove', (e) => {
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left - rect.width / 2;
+            const y = e.clientY - rect.top - rect.height / 2;
+            const angle = Math.atan2(-x, y);
 
-        console.log(angle);
-        card.style.setProperty('--rotation', angle + 'rad')
+            card.style.setProperty('--rotation', angle + 'rad')
+        });
     });
 });
 
@@ -51,23 +52,19 @@ function letitsnow() {
     document.head.appendChild(script);
 }
 
-function getAgent() {
-    document.getElementById('general-info').innerHTML = navigator.userAgent; // get user agent
-}
-
 function updateInfo() {
     getWindowSize();
     getTime();
 }
 
 function getWindowSize() {
-    let wInfo = document.getElementById('window-info');
+    let wInfo = document.querySelector('#window-info');
     wInfo.innerHTML = '<br>' + window.screen.width + 'x' + window.screen.height; // get window size
     wInfo.innerHTML += ' ' + window.innerWidth + 'px ' + window.innerHeight + 'px';
 }
 
 function getTime() {
-    let dom = document.getElementById('time-info');
+    let dom = document.querySelector('#time-info');
     let date = new Date();
     let time = date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0');
     let day = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();