22.0 beta 4

[changelog]
- added version table at the top
- version titles are now links
- style tweaks

[general]
- dependencies update
- minor general changes

[webutils]
- new 'uuid' utility

Author: miermontoto

package.json

@@ -8,3 +8,4 @@ eleventyNavigation:
 
 {% addStyle "changelog" %}
 {% changelog changelog %}
+{% include 'src/templates/snippets/top.njk' %}

pnpm-lock.yaml

@@ -45,3 +45,4 @@ several other inspirations:
 - [eduardorl's portfolio](https://eduardorl.vercel.app/)
 - [irene mateos' awesome portfolio](https://enerimateos.com/)
 - [Things Of Interest](https://qntm.org/)
+- [nothing](https://es.nothing.tech/)

src/content/changelog.njk

@@ -0,0 +1,22 @@
+---
+title: uuid
+desc: 'uuid generator'
+redirect_from: /webutils/uuid/
+eleventyNavigation:
+key: uuid
+---
+
+<div>
+	<div id="uuid-options">
+		<span class="label">version</span>
+		<select id="uuid-version">
+			<option value="v1">v1</option>
+			<option value="v4" selected>v4</option>
+			<option value="v7">v7</option>
+			<option value="guid">guid</option>
+		</select>
+	</div>
+	<span class=button id="uuid-generate">generate</span>
+	<span class=button id="uuid-copy">copy</span>
+	<span class="output" id="uuid-output"></span>
+</div>

src/content/collections/projects/mier.info.md

@@ -22,5 +22,24 @@
 		font-size: 0.8rem
 		color: colors.$dark
 
-h1
+.version-title
 	font-size: 3rem
+	text-decoration: none
+
+	&:hover
+		background-color: inherit !important
+		color: inherit !important
+
+#versions li
+	margin: 0.5rem 0
+
+	.version
+		font-size: 1.25rem
+
+	.date
+		font-style: italic
+		font-size: 0.9rem
+
+	.older
+		font-style: italic
+		color: colors.$dark

src/content/collections/webutils/uuid.njk

@@ -178,7 +178,7 @@ video#background
 #overlay-container
     position: fixed
     bottom: 16px
-    left: 16px
+    left: 47%
     margin-bottom: 0
     z-index: 2
 
@@ -253,7 +253,6 @@ video#background
         *:not(:last-child)
             margin-right: 0.5em
 
-
 #projects
     display: flex
     flex-direction: column

src/static/css/app/changelog.sass

@@ -0,0 +1,88 @@
+// UUID v1 (timestamp-based)
+function uuidv1() {
+	const d = new Date().getTime();
+	const nodeId = crypto.getRandomValues(new Uint8Array(6));
+	let uuid = 'xxxxxxxx-xxxx-1xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		const r = (d + Math.random() * 16) % 16 | 0;
+		const v = c == 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
+	});
+	uuid = uuid.substr(0, 23) + nodeId.reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '');
+	return uuid;
+}
+
+// UUID v4 (random)
+function uuidv4() {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0;
+		const v = c == 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
+	});
+}
+
+// UUID v7 (timestamp + random)
+function uuidv7() {
+	const milliseconds = Date.now();
+	const seconds = Math.floor(milliseconds / 1000);
+	const nanos = (milliseconds % 1000) * 1e6;
+
+	const timestamp = BigInt(seconds) * BigInt(1e9) + BigInt(nanos);
+	const timestampHex = timestamp.toString(16).padStart(16, '0');
+
+	const randomBytes = crypto.getRandomValues(new Uint8Array(10));
+	const randomHex = Array.from(randomBytes, (b) => b.toString(16).padStart(2, '0')).join('');
+
+	return `${timestampHex.substr(0, 8)}-${timestampHex.substr(8, 4)}-7${timestampHex.substr(12, 3)}-${randomHex.substr(0, 4)}-${randomHex.substr(4)}`;
+}
+
+// GUID (Microsoft's variant of UUID)
+function guid() {
+	function s4() {
+		return Math.floor((1 + Math.random()) * 0x10000)
+			.toString(16)
+			.substring(1);
+	}
+
+	return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+
+function generate() {
+	const version = document.getElementById('uuid-version').value;
+
+	let uuid = '';
+	switch (version) {
+		case 'v1':
+			uuid = uuidv1();
+			break;
+		case 'v4':
+			uuid = uuidv4();
+			break;
+		case 'v7':
+			uuid = uuidv7();
+			break;
+		case 'guid':
+			uuid = guid();
+			break;
+		default:
+			uuid = 'how?';
+			break;
+	}
+
+	return uuid;
+}
+
+window.addEventListener("load", function (event) {
+	const copy = document.getElementById('uuid-copy');
+	const button = document.getElementById('uuid-generate');
+	const output = document.getElementById('uuid-output');
+
+	copy.addEventListener('click', function (event) {
+		navigator.clipboard.writeText(output.value);
+	});
+
+	button.addEventListener('click', function (event) {
+		output.innerHTML = generate();
+	});
+
+	output.innerHTML = generate();
+});

src/static/css/index.sass

@@ -33,12 +33,36 @@ const processTitle = (title) => {
 	return content
 }
 
+
+const buildVersionsCollapsible = (data) => {
+	const majors = new Set(data.map(d => d.version.major))
+
+	let content = '<div id="versions" class="hoverborder"><h2>versions</h2><ul>'
+
+	majors.forEach((major) => {
+		const fromDate = data.filter(d => d.version.major == major).slice(-1)[0].date
+		const toDate = data.filter(d => d.version.major == major)[0].date
+
+		content += `<li>
+			<a href="#version-${major}" class="version">v${major}</a>
+			<span class="date">${fromDate} - ${toDate}</span>
+		</li>`
+	})
+
+	content += '<li><span class="older">no info available for older versions</span></li></ul></div><hr>'
+	return content
+}
+
+
 const buildChangelog = (data) => {
 	let content = '<div id="changelog">'
 
 	// sort commits by version
 	data.sort((a, b) => { return a.version.major > b.version.major ? -1 : 1 })
 
+	// build the versions collapsible
+	content += buildVersionsCollapsible(data)
+
 	// if the current version isn't in the changelog,
 	// add it manually to the data array
 	checkCurrent(data)
@@ -48,7 +72,7 @@ const buildChangelog = (data) => {
 		// if the major version has changed, add a new header
 		if (prevMajor != d.version.major) {
 			if (prevMajor) content += '</div><hr>'
-			content += `<div id="version-${d.version.major}"><h1>v${d.version.major}</h1>`
+			content += `<div id="version-${d.version.major}"><h1><a class="version-title" href="#title">v${d.version.major}</a></h1>`
 		}
 		prevMajor = d.version.major
 

src/static/js/app/uuid.js

@@ -2,15 +2,15 @@ import {load} from './video.js';
 let videoElement = document.getElementById('background');
 
 // create elements
-let overlay_container = document.createElement('div');
+let overlayContainer = document.createElement('div');
 let overlay_box = document.createElement('div');
 let fullscreen = document.createElement('span');
 let stop = document.createElement('span');
 let next = document.createElement('span');
 let nowplaying = document.createElement('span');
 
 // set attributes
-overlay_container.setAttribute('id', 'overlay-container');
+overlayContainer.setAttribute('id', 'overlay-container');
 overlay_box.setAttribute('id', 'overlay-box');
 fullscreen.setAttribute('id', 'bg-fullscreen');
 stop.setAttribute('id', 'bg-stop');
@@ -34,18 +34,18 @@ fullscreen.addEventListener('click', () => {
         videoElement.classList.remove('fullscreen');
         fullscreen.classList.remove('active');
         overlay_box.classList.remove('active');
-        overlay_container.style.zIndex = '2';
+        overlayContainer.style.zIndex = '2';
     } else {
         videoElement.classList.add('fullscreen');
         fullscreen.classList.add('active');
         overlay_box.classList.add('active');
-        overlay_container.style.zIndex = '4';
+        overlayContainer.style.zIndex = '4';
     }
 });
 
 stop.addEventListener('click', () => {
     videoElement.remove();
-    overlay_container.remove();
+    overlayContainer.remove();
 });
 
 next.addEventListener('click', () => {
@@ -56,6 +56,6 @@ next.addEventListener('click', () => {
 overlay_box.appendChild(fullscreen);
 overlay_box.appendChild(stop);
 overlay_box.appendChild(next);
-overlay_container.appendChild(overlay_box);
-overlay_container.appendChild(nowplaying);
-document.body.appendChild(overlay_container);
+overlayContainer.appendChild(overlay_box);
+overlayContainer.appendChild(nowplaying);
+document.body.appendChild(overlayContainer);