From f111057a2b56e5a87b2d292cce7e08561aef6467 Mon Sep 17 00:00:00 2001
From: OctoSpacc <octo@tutamail.com>
Date: Sat, 13 Apr 2024 23:59:52 +0200
Subject: [PATCH] Finish Collections page, add global script everywhere

---
 public/Assets/JS/Global.js            |   0
 public/Collections/index.html         | 163 ++++++++++++++++++++------
 public/Ecoji/index.html               |   1 +
 public/FramesBrowser/index.html       |   1 +
 public/HashyMagnet/index.html         |   1 +
 public/MBViewer/index.html            |   1 +
 public/MatrixStickerHelper/index.html |   5 +-
 public/ServiceWorker.js               |   0
 public/Userscripts/index.html         |   1 +
 public/index.html                     |  17 +--
 10 files changed, 142 insertions(+), 48 deletions(-)
 create mode 100644 public/Assets/JS/Global.js
 create mode 100644 public/ServiceWorker.js
diff --git a/public/Assets/JS/Global.js b/public/Assets/JS/Global.js
new file mode 100644
index 0000000..e69de29
diff --git a/public/Collections/index.html b/public/Collections/index.html
index 9a6afb6..a751c02 100644
--- a/public/Collections/index.html
+++ b/public/Collections/index.html
@@ -3,26 +3,33 @@
 <head>
 	<meta charset="UTF-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	<title>My Collections | OctoSpacc Place</title>
-	<meta property="og:title" content="My Collections | OctoSpacc Place"/>
+	<title>My Collections 🎀 | OctoSpacc Place</title>
+	<meta property="og:title" content="My Collections 🎀 | OctoSpacc Place"/>
 	<meta property="og:image" content="RichPreview/Collections.jpg"/>
 	<meta property="og:url" content="https://hub.octt.eu.org/Collections/"/>
 	<link rel="canonical" href="https://hub.octt.eu.org/Collections/"/>
-	<!--<meta name="description" content=""/>
-	<meta property="og:description" content=""/>-->
+	<meta name="description" content="Organized listings and collections of my own posts and pages!"/>
+	<meta property="og:description" content="Organized listings and collections of my own posts and pages!"/>
 	<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
 	<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="../Assets/JS/RandomGIF.js"></script>
+	<script src="../Assets/JS/Global.js"></script>
 	<style>
 		.form > * { margin: 4px; }
-		#PostsListMain { text-align: left; }
+		#SitesList, #PostsListMain { text-align: left; }
 		#PostsListMain div { display: inline; }
 		#PostsListMain h4 { display: inline-block; margin: 4px; }
+		ul#PostsListMain { list-style: none; padding: 8px; }
+		ul#PostsListMain > li { display: flex; }
+		ul#PostsListMain > li > a { width: 100%; display: flex; align-items: center; }
+		ul#PostsListMain > li > a > img { margin-left: auto; }
+		#ActionsBar { text-align: right; }
 	</style>
+	<style id="StyleToggleThumbs" data-data="4em"> ul#PostsListMain > li > a > img { height: 4em; } </style>
 </head>
 <body>
 	<div class="Content" style="text-align: center;">
-		<h2>My Collections</h2><br/>
+		<h2>My Collections 🎀</h2><br/>
 		<div style="max-width: 80%; margin: auto;">
 			<p>
 				🇬🇧 This page is an attempt to centralize my personal collections of thematic pages and posts,
@@ -41,18 +48,28 @@
 		<noscript><p>(...if nothing happens please check that JavaScript is working on your browser for this site)</p></noscript>
 		<p>Alternatively, check out my collections directly on my external sites:</p>
 		<ul id="SitesList" class="BackgroundedBox">
-			<li><a href="https://sitoctt.octt.eu.org/Categories/"
+			<li>✨ <a href="https://sitoctt.octt.eu.org/Categories/"
 				data-platform="staticoso"
 				data-categories-blacklist="Blog MicroBlog Note"
-			>https://sitoctt.octt.eu.org/Categories/</a></li>
-			<li><a href="https://octospacc.altervista.org/libreria-post/"
+				data-staticoso-assets-root="https://sitoctt-assets.octt.eu.org"
+			>Tutte le categorie sul sitoctt</a></li>
+			<li>📓️ <a href="https://octospacc.altervista.org/libreria-post/"
 				data-platform="wordpress"
 				data-categories-blacklist="Senza-categoria"
 				data-dump="https://octospacc.github.io/microblog-mirror/search.json"
-			>https://octospacc.altervista.org/libreria-post/</a></li>
+				data-media-urls-replace='/microblog-mirror//assets/ /wp-content/'
+			>Libreria dei post sul MicroBlog</a></li>
+			<li>🏛️ <a href="https://bbs.spacc.eu.org/search.php?keywords=&terms=any&author=Octt&sc=1&sf=firstpost&sr=topics&sk=t&sd=d&st=0&ch=300&t=0&submit=Search"
+				data-platform="phpbb"
+			>Tutti i miei thread su Spacc BBS</a> (non in lista)</li>
 		</ul>
 		<br/><hr/><br/>
+		<a name="..."></a>
 		<div id="CategoriesList" class="form"></div>
+		<div id="ActionsBar" class="form" style="display: none;">
+			<button id="BtnToggleThumbs">Toggle Thumbnails Small/Large 🖼️</button>
+			<br/><br/>
+		</div>
 		<div id="PostsList">
 			<ul id="PostsListMain"></ul>
 			<p id="PostsListAppend"></p>
@@ -62,37 +79,54 @@
 		<span class="FlexItem FooterLeft">
 			<a href="..">↩️ Go Back Home</a>
 		</span>
+		<span class="FlexItem FooterRight">
+			<a href="#...">🔝 Scroll to Options</a>
+		</span>
 	</div>
 	<script>(async function(){
-		var [globalPosts, globalCategories] = [{}, {}];
+		var [globalPosts, globalCategories] = [[], {}];
 		var domParser = new DOMParser();
 		PostsListAppend.textContent = '...';
 
+		// fetch posts
 		for (var refElem of document.querySelectorAll('ul#SitesList > li > a')) {
-			refElem.dataset.categoriesBlacklist = refElem.dataset.categoriesBlacklist.toLowerCase();
-			var fetchUrl, fetchParser;
-			if (refElem.dataset.platform === 'staticoso') {
-				fetchUrl = `${refElem.href.split('/').slice(0, 3).join('/')}/Search.html`;
-				fetchParser = staticosoFetchParser;
-			} else {
-				fetchUrl = refElem.dataset.dump;
-				fetchParser = (function(req){ return req.json() });
+			var [fetchUrl, fetchParser] = [null, null];
+			var siteUrl = refElem.href.split('/').slice(0, 3).join('/');
+			if (refElem.dataset.categoriesBlacklist) {
+				refElem.dataset.categoriesBlacklist = refElem.dataset.categoriesBlacklist.toLowerCase();
+			}
+			switch (refElem.dataset.platform) { default:
+				break; case 'staticoso':
+					fetchUrl = `${siteUrl}/Search.html`;
+					fetchParser = staticosoFetchParser;
+				break; case 'wordpress':
+					fetchUrl = refElem.dataset.dump;
+					fetchParser = wordpressFetchParser;
+			}
+			if (!fetchUrl || !fetchParser) {
+				continue;
 			}
 			try {
 				var postsReq = await fetch(fetchUrl);
-				var postsData = await fetchParser(postsReq, { href: refElem.href, categoriesBlacklist: refElem.dataset.categoriesBlacklist.split(' ') });
+				var postsData = await fetchParser(postsReq, {
+					href: refElem.href,
+					categoriesBlacklist: refElem.dataset.categoriesBlacklist.split(' '),
+					staticosoAssetsRoot: refElem.dataset.staticosoAssetsRoot,
+					mediaUrlsReplace: (refElem.dataset.mediaUrlsReplace || ' ').split(' '),
+				});
 				if (postsReq.status !== 200) {
 					throw '';
 				}
-				globalPosts[refElem.href] = postsData;
+				globalPosts = globalPosts.concat(postsData);
 			} catch (err) {
 				displayError();
 				console.error(err);
 			}
 		}
 
-		// TODO handle blacklist
-		for (var post of Object.values(globalPosts).flat()) {
+		// reorder all by date and display them, newest first
+		globalPosts.sort(function(a, b) { return (b.date - a.date) });
+		for (var post of globalPosts) {
 			for (var categoryIndex in post.categories) {
 				var category = normalizeCategory(post.categories[categoryIndex]);
 				post.categories[categoryIndex] = category;
@@ -101,20 +135,7 @@
 					var categoryElem = document.createElement('button')//('li');
 					//categoryElem.innerHTML = `<label><input type="radio" name="CategoryList"> ${humanizeCategory(category)}</label>`;
 					categoryElem.textContent = humanizeCategory(category);
-					categoryElem.onclick = (function(){
-						var category = normalizeCategory(this.textContent);
-						Array.from(CategoriesList.children).forEach(function(categoryElem){ categoryElem.disabled = false });
-						this.disabled = true;
-						PostsListMain.innerHTML = null;
-						for (var post of Object.values(globalPosts).flat()) {
-							if (post.categories.includes(category)) {
-								var postElem = document.createElement('li');//('div');
-								// TODO cover images
-								postElem.innerHTML = `<a href="${post.url}"><h4>${post.title}</h4></a>`;
-								PostsListMain.appendChild(postElem);
-							}
-						}
-					});
+					categoryElem.onclick = onSelectCategory;
 					CategoriesList.appendChild(categoryElem);
 				}
 				globalCategories[category].push(post);
@@ -125,6 +146,28 @@
 		LoadingInfo.textContent = null;
 		PostsListAppend.textContent = null;
 
+		BtnToggleThumbs.onclick = (function(){
+			var prev = StyleToggleThumbs.dataset.data;
+			var curr = (prev !== '10em' ? '10em' : '4em');
+			StyleToggleThumbs.innerHTML = StyleToggleThumbs.innerHTML.replace(prev, curr);
+			StyleToggleThumbs.dataset.data = curr;
+		});
+
+		async function onSelectCategory () {
+			var category = normalizeCategory(this.textContent);
+			Array.from(CategoriesList.children).forEach(function(categoryElem){ categoryElem.disabled = false });
+			this.disabled = true;
+			PostsListMain.innerHTML = null;
+			ActionsBar.style = null;
+			for (var post of globalPosts) {
+				if (post.categories.includes(category)) {
+					var postElem = document.createElement('li');//('div');
+					postElem.innerHTML = `<a href="${post.url}"><h4>${post.title || '[?]'}</h4><!--<p>${post.summary}</p>--><img src="${post.image || ''}"/></a>`;
+					PostsListMain.appendChild(postElem);
+				}
+			}
+		}
+
 		async function staticosoFetchParser (req, extra) {
 			var postsData = {};
 			var html = await req.text();
@@ -138,11 +181,20 @@
 				for (postElem of categoryElem.querySelectorAll('div ul.staticoso-PagesList > li')) {
 					var postLinkElem = postElem.querySelector('a');
 					var postUrl = (postLinkElem || postElem).getAttribute('href');
-					if (!postUrl || !postUrl.startsWith('../Posts/')) {
+					if (!postUrl || !postUrl.startsWith('../Posts/') || postUrl === '../Posts/index.html') {
 						continue;
 					}
+					postUrl = postUrl.split('/').slice(1).join('/');
 					if (!postsData[postUrl]) {
-						postsData[postUrl] = { url: (extra.href + postUrl), title: postLinkElem.textContent, date: (postElem.querySelector('time') || {}).textContent, categories: [] };
+						postsData[postUrl] = {
+							url: (extra.href + postUrl),
+							title: postLinkElem.textContent,
+							date: isoToUnixWithZone((postElem.querySelector('time') || {}).textContent || ''),
+							image: (postElem.dataset.image
+								? postElem.dataset.image.replace('[staticoso:CustomPath:Assets]', extra.staticosoAssetsRoot).replace('[staticoso:Folder:Assets:AbsoluteRoot]', extra.staticosoAssetsRoot)
+								: (doc.querySelector(`div.staticoso-HtmlSearch-Pages > div.staticoso-HtmlSearch-Page[data-staticoso-htmlsearch-href="${postUrl}"] img[src]`) || {}).src
+							),
+						categories: [] };
 					}
 					postsData[postUrl].categories.push(categoryName);
 				}
@@ -150,6 +202,39 @@
 			return Object.values(postsData);
 		}
 
+		// TODO: also handle (some) tags as categories
+		async function wordpressFetchParser (req, extra) {
+			var sourcePosts = await req.json();
+			var finalPosts = [];
+			for (var post of sourcePosts) {
+				var newCategories = [];
+				for (var category of post.categories) {
+					category = normalizeCategory(category);
+					if (!extra.categoriesBlacklist.includes(category)) {
+						newCategories.push(category);
+					}
+				}
+				if (newCategories.length === 0) {
+					continue;
+				}
+				post.url = `${siteUrl}/?p=${post.ID}`;
+				post.date = isoToUnixWithZone(post.date);
+				post.categories = newCategories;
+				var imageFrag = post.contentHtml.split('<img src="')[1];
+				if (imageFrag) {
+					if (imageFrag.startsWith(extra.mediaUrlsReplace[0])) {
+						imageFrag = imageFrag.replace(extra.mediaUrlsReplace[0], extra.mediaUrlsReplace[1])
+					}
+					post.image = (siteUrl + imageFrag.split('"')[0]);
+				}
+				finalPosts.push(post);
+			}
+			return finalPosts;
+		}
+
+		// NOTE: doesn't handle negative time zones
+		function isoToUnixWithZone (time) { return Number(`${Date.parse(time)}.${time.split('+')[1] || 0}`) }
+
 		function normalizeCategory (category) { return category.toLowerCase().replaceAll(' ', '-') }
 
 		function humanizeCategory (category) { return category.split('-').map(function(word){
diff --git a/public/Ecoji/index.html b/public/Ecoji/index.html
index 5cc5b9c..8242ca3 100644
--- a/public/Ecoji/index.html
+++ b/public/Ecoji/index.html
@@ -21,6 +21,7 @@
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<link rel="manifest" href="manifest.json">
+		<script src="../Assets/JS/Global.js"></script>
 		<style>
 @Media (Prefers-Color-Scheme: Light) {
 	Body, TextArea {
diff --git a/public/FramesBrowser/index.html b/public/FramesBrowser/index.html
index 8d6b29a..4bd41b1 100644
--- a/public/FramesBrowser/index.html
+++ b/public/FramesBrowser/index.html
@@ -92,6 +92,7 @@
 				padding: 8px;
 			}
 		</style>
+		<script src="../Assets/JS/Global.js"></script>
 	</head>
 	<body>
 		<button id="BtnFullscreen" onclick="ToggleFullscreen()">🎞️ Menu</button>
diff --git a/public/HashyMagnet/index.html b/public/HashyMagnet/index.html
index fe18b36..6a25a54 100644
--- a/public/HashyMagnet/index.html
+++ b/public/HashyMagnet/index.html
@@ -12,6 +12,7 @@
 	<link href="Bubbles.css" rel="stylesheet"/>
 	<link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
 	<link rel="manifest" href="./manifest.json"/>
+	<script src="../Assets/JS/Global.js"></script>
 <style>
 Body {
 	Color: #FFFFFF;
diff --git a/public/MBViewer/index.html b/public/MBViewer/index.html
index 7daff17..75c99bd 100644
--- a/public/MBViewer/index.html
+++ b/public/MBViewer/index.html
@@ -38,6 +38,7 @@
 		<link rel="stylesheet" media="screen" href="css/telegram-web.css"/>
 		<link rel="stylesheet" media="screen" href="css/MBViewer.css"/>
 		<link rel="stylesheet" media="print" href="css/print.css"/>
+		<script src="../Assets/JS/Global.js"></script>
 	</head>
 	<body class="widget_frame_base tgme_webpreview emoji_image thin_box_shadow tme_mode no_transitions">
 		<div class="tgme_background_wrap">
diff --git a/public/MatrixStickerHelper/index.html b/public/MatrixStickerHelper/index.html
index 76863ba..0a3915d 100644
--- a/public/MatrixStickerHelper/index.html
+++ b/public/MatrixStickerHelper/index.html
@@ -3,8 +3,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>🃏️ [Matrix] Sticker Helper</title>
 
-<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
-<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
+<script src="../Assets/JS/Global.js"></script>
+<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- offline -->
+<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- online -->
 <link rel="stylesheet" href="./paper.min.css"/>
 
 <!--
diff --git a/public/ServiceWorker.js b/public/ServiceWorker.js
new file mode 100644
index 0000000..e69de29
diff --git a/public/Userscripts/index.html b/public/Userscripts/index.html
index f7673e3..7948193 100644
--- a/public/Userscripts/index.html
+++ b/public/Userscripts/index.html
@@ -13,6 +13,7 @@
 	<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
 	<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="../Assets/JS/RandomGIF.js"></script>
+	<script src="../Assets/JS/Global.js"></script>
 </head>
 <body>
 	<div class="Content" style="text-align: center;">
diff --git a/public/index.html b/public/index.html
index 4e549db..67169e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
 	<link href="./Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="./Assets/JS/RandomGIF.js"></script>
 	<script src="./Assets/JS/CurrentAge.js"></script>
+	<script src="./Assets/JS/Global.js"></script>
 </head>
 <body>
 	<div id="ConfettiCanvas"></div>
@@ -44,29 +45,31 @@
 			<!--<h4><del><a href="https://octtspacc.gitlab.io/bachecoctt">🔖️ bachecoctt</a> (my WebPinBoard)</del></h4>-->
 			<br/>
 			<h4><!--
-				--><a href="./HashyMagnet">🧲 HashyMagnet</a>
+				--><a href="./HashyMagnet/">🧲 HashyMagnet</a>
 				<small>(BitTorrent Hash to Magnet)</small><!--
 			--></h4>
 			<h4><!--
-				--><a href="./Ecoji">🦜 Ecoji v1</a>
+				--><a href="./Ecoji/">🦜 Ecoji v1</a>
 				<small>(webapp fork)</small><!--
 			--></h4>
 			<h4><!--
-				--><a href="./FramesBrowser">🪟️ Frames Browser</a>
+				--><a href="./FramesBrowser/">🪟️ Frames Browser</a>
 				<small>(<i>yo dawg, i heard you...</i>)</small><!--
 			--></h4>
-			<h4><a href="./MatrixStickerHelper">🃏️ [Matrix] Sticker Helper</a></h4>
+			<h4><a href="./MatrixStickerHelper/">🃏️ [Matrix] Sticker Helper</a></h4>
 			<h4><!--
-				--><a href="./MBViewer">👁️‍🗨️️ MBViewer</a>
+				--><a href="./MBViewer/">👁️‍🗨️️ MBViewer</a>
 				<small>(WordPress/RSS/... chat-like UI)</small><!--
 			--></h4>
 			<h4><!--
-				--><a href="./WuppiMini">☘️ WuppìMini</a>
+				--><a href="./WuppiMini/">☘️ WuppìMini</a>
 				<small>(basic-HTML posting client)</small><!--
 			--></h4>
 			<br/>
 			<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
-			<h4><a href="./Userscripts">⚙️ My Userscripts</a></h4>
+			<h4><a href="./Collections/">🎀 My Collections</a> <small>(of posts/pages)</small></h4>
+			<h4><a href="./Userscripts/">⚙️ My Userscripts</a></h4>
+			<h4>Some <a href="https://addons.mozilla.org/firefox/collections/18049170/octollection/">🦊 Firefox Add-ons</a> <small>(mine + suggestions)</small></h4>
 		</div></div>
 		<br/><br/><br/>
 		<div id="OcttAgeView">
