2024-04-11 00:48:38 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2024-04-13 23:59:52 +02:00
< title > My Collections 🎀 | OctoSpacc Place< / title >
< meta property = "og:title" content = "My Collections 🎀 | OctoSpacc Place" / >
2024-04-11 00:48:38 +02:00
< 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/" / >
2024-04-13 23:59:52 +02:00
< 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!" / >
2024-04-11 00:48:38 +02:00
< 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 >
2024-04-13 23:59:52 +02:00
< script src = "../Assets/JS/Global.js" > < / script >
2024-04-11 00:48:38 +02:00
< style >
.form > * { margin: 4px; }
2024-04-13 23:59:52 +02:00
#SitesList, #PostsListMain { text-align: left; }
2024-04-11 00:48:38 +02:00
#PostsListMain div { display: inline; }
#PostsListMain h4 { display: inline-block; margin: 4px; }
2024-04-13 23:59:52 +02:00
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; }
2024-04-11 00:48:38 +02:00
< / style >
2024-04-13 23:59:52 +02:00
< style id = "StyleToggleThumbs" data-data = "4em" > ul # PostsListMain > li > a > img { height : 4 em ; } < / style >
2024-04-11 00:48:38 +02:00
< / head >
< body >
< div class = "Content" style = "text-align: center;" >
2024-04-13 23:59:52 +02:00
< h2 > My Collections 🎀< / h2 > < br / >
2024-04-11 00:48:38 +02:00
< div style = "max-width: 80%; margin: auto;" >
< p >
🇬🇧 This page is an attempt to centralize my personal collections of thematic pages and posts,
which are otherwise contained on totally isolated sites and hard to search by topic.
< br / >
This doesn't contain everything, however, but only my top picks (no particular criteria).
< / p > < p >
🇮🇹 Questa pagina è un tentativo di centralizzare le mie collezioni personali di pagine tematiche e post,
che sono altrimenti contenuti su siti completamente isolati e difficili da ricercare per argomento.
< br / >
Non contiene proprio tutto, tuttavia, solo le mie scelte principali (senza particolare criterio).
< / p >
< / div >
< br / >
< p id = "LoadingInfo" > Loading data, hang on...< / p >
< 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" >
2024-04-13 23:59:52 +02:00
< li > ✨ < a href = "https://sitoctt.octt.eu.org/Categories/"
2024-04-11 00:48:38 +02:00
data-platform="staticoso"
data-categories-blacklist="Blog MicroBlog Note"
2024-04-13 23:59:52 +02:00
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/"
2024-04-11 00:48:38 +02:00
data-platform="wordpress"
data-categories-blacklist="Senza-categoria"
data-dump="https://octospacc.github.io/microblog-mirror/search.json"
2024-04-13 23:59:52 +02:00
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 >
2024-04-11 00:48:38 +02:00
< / ul >
< br / > < hr / > < br / >
2024-04-13 23:59:52 +02:00
< a name = "..." > < / a >
2024-04-11 00:48:38 +02:00
< div id = "CategoriesList" class = "form" > < / div >
2024-04-13 23:59:52 +02:00
< div id = "ActionsBar" class = "form" style = "display: none;" >
< button id = "BtnToggleThumbs" > Toggle Thumbnails Small/Large 🖼️< / button >
< br / > < br / >
< / div >
2024-04-11 00:48:38 +02:00
< div id = "PostsList" >
< ul id = "PostsListMain" > < / ul >
< p id = "PostsListAppend" > < / p >
< / div >
< / div >
< div class = "Footer" >
< span class = "FlexItem FooterLeft" >
< a href = ".." > ↩️ Go Back Home< / a >
< / span >
2024-04-13 23:59:52 +02:00
< span class = "FlexItem FooterRight" >
< a href = "#..." > 🔝 Scroll to Options< / a >
< / span >
2024-04-11 00:48:38 +02:00
< / div >
< script > ( a s y n c f u n c t i o n ( ) {
2024-04-13 23:59:52 +02:00
var [globalPosts, globalCategories] = [[], {}];
2024-04-11 00:48:38 +02:00
var domParser = new DOMParser();
PostsListAppend.textContent = '...';
2024-04-13 23:59:52 +02:00
// fetch posts
2024-04-11 00:48:38 +02:00
for (var refElem of document.querySelectorAll('ul#SitesList > li > a')) {
2024-04-13 23:59:52 +02:00
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;
2024-04-11 00:48:38 +02:00
}
try {
var postsReq = await fetch(fetchUrl);
2024-04-13 23:59:52 +02:00
var postsData = await fetchParser(postsReq, {
href: refElem.href,
categoriesBlacklist: refElem.dataset.categoriesBlacklist.split(' '),
staticosoAssetsRoot: refElem.dataset.staticosoAssetsRoot,
mediaUrlsReplace: (refElem.dataset.mediaUrlsReplace || ' ').split(' '),
});
2024-04-11 00:48:38 +02:00
if (postsReq.status !== 200) {
throw '';
}
2024-04-13 23:59:52 +02:00
globalPosts = globalPosts.concat(postsData);
2024-04-11 00:48:38 +02:00
} catch (err) {
displayError();
console.error(err);
}
}
2024-04-13 23:59:52 +02:00
// reorder all by date and display them, newest first
globalPosts.sort(function(a, b) { return (b.date - a.date) });
for (var post of globalPosts) {
2024-04-11 00:48:38 +02:00
for (var categoryIndex in post.categories) {
var category = normalizeCategory(post.categories[categoryIndex]);
post.categories[categoryIndex] = category;
if (!globalCategories[category]) {
globalCategories[category] = [];
var categoryElem = document.createElement('button')//('li');
//categoryElem.innerHTML = `< label > < input type = "radio" name = "CategoryList" > ${humanizeCategory(category)}< / label > `;
categoryElem.textContent = humanizeCategory(category);
2024-04-13 23:59:52 +02:00
categoryElem.onclick = onSelectCategory;
2024-04-11 00:48:38 +02:00
CategoriesList.appendChild(categoryElem);
}
globalCategories[category].push(post);
}
}
globalCategories = Object.keys(globalCategories);
LoadingInfo.textContent = null;
PostsListAppend.textContent = null;
2024-04-13 23:59:52 +02:00
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);
}
}
}
2024-04-11 00:48:38 +02:00
async function staticosoFetchParser (req, extra) {
var postsData = {};
var html = await req.text();
var doc = domParser.parseFromString(html, 'text/html');
extra.categoriesBlacklist.push('index');
for (var categoryElem of doc.querySelectorAll('div.staticoso-HtmlSearch-Pages > div.staticoso-HtmlSearch-Page[data-staticoso-htmlsearch-href^="Categories/"]')) {
var categoryName = normalizeCategory(categoryElem.dataset.staticosoHtmlsearchHref.split('/').slice(1).join('/').split('.').slice(0, -1).join('.'));
if (extra.categoriesBlacklist.includes(categoryName)) {
continue;
}
for (postElem of categoryElem.querySelectorAll('div ul.staticoso-PagesList > li')) {
var postLinkElem = postElem.querySelector('a');
var postUrl = (postLinkElem || postElem).getAttribute('href');
2024-04-13 23:59:52 +02:00
if (!postUrl || !postUrl.startsWith('../Posts/') || postUrl === '../Posts/index.html') {
2024-04-11 00:48:38 +02:00
continue;
}
if (!postsData[postUrl]) {
2024-04-13 23:59:52 +02:00
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)
2024-04-14 00:40:11 +02:00
: (doc.querySelector(`div.staticoso-HtmlSearch-Pages > div.staticoso-HtmlSearch-Page[data-staticoso-htmlsearch-href="${postUrl.slice(3)}"] img[src]`) || {}).src
2024-04-13 23:59:52 +02:00
),
categories: [] };
2024-04-11 00:48:38 +02:00
}
postsData[postUrl].categories.push(categoryName);
}
}
return Object.values(postsData);
}
2024-04-13 23:59:52 +02:00
// 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}`) }
2024-04-11 00:48:38 +02:00
function normalizeCategory (category) { return category.toLowerCase().replaceAll(' ', '-') }
function humanizeCategory (category) { return category.split('-').map(function(word){
return (word[0].toUpperCase() + word.slice(1));
}).join(' ') }
function displayError() {
LoadingInfo.textContent = 'An error occured trying to load remote data! Please refresh the page to retry.';
}
})();< / script >
< / body >
< / html >
