249 lines
10 KiB
HTML
249 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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"/>
|
|
<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="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; }
|
|
#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/>
|
|
<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">
|
|
<li>✨ <a href="https://sitoctt.octt.eu.org/Categories/"
|
|
data-platform="staticoso"
|
|
data-categories-blacklist="Blog MicroBlog Note"
|
|
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"
|
|
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>
|
|
</div>
|
|
</div>
|
|
<div class="Footer">
|
|
<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 domParser = new DOMParser();
|
|
PostsListAppend.textContent = '...';
|
|
|
|
// fetch posts
|
|
for (var refElem of document.querySelectorAll('ul#SitesList > li > a')) {
|
|
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(' '),
|
|
staticosoAssetsRoot: refElem.dataset.staticosoAssetsRoot,
|
|
mediaUrlsReplace: (refElem.dataset.mediaUrlsReplace || ' ').split(' '),
|
|
});
|
|
if (postsReq.status !== 200) {
|
|
throw '';
|
|
}
|
|
globalPosts = globalPosts.concat(postsData);
|
|
} catch (err) {
|
|
displayError();
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
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);
|
|
categoryElem.onclick = onSelectCategory;
|
|
CategoriesList.appendChild(categoryElem);
|
|
}
|
|
globalCategories[category].push(post);
|
|
}
|
|
}
|
|
globalCategories = Object.keys(globalCategories);
|
|
|
|
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();
|
|
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');
|
|
if (!postUrl || !postUrl.startsWith('../Posts/') || postUrl === '../Posts/index.html') {
|
|
continue;
|
|
}
|
|
if (!postsData[postUrl]) {
|
|
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.slice(3)}"] img[src]`) || {}).src
|
|
),
|
|
categories: [] };
|
|
}
|
|
postsData[postUrl].categories.push(categoryName);
|
|
}
|
|
}
|
|
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){
|
|
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>
|