simon/scaffie-lite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

blogroll works nicely; table works; neither are pretty yet.

Browse source
This commit is contained in:
Simon Brooke 2026-08-27 18:29:31 +01:00
parent e021d5df4b
commit 5754e2a40a
2 changed files with 398 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

217
table.html Normal file
View file

@ -0,0 +1,217 @@
<!doctype html>
<html>
<head>
<title>Experimental RSS integrator: Delayed loading version</title>
<style>
table {
border: thin solid black;
}
td {
padding: 0.25em 0.5em;
}
</style>
<script
src="https://code.jquery.com/jquery-4.0.0.min.js"
integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
crossorigin="anonymous"
></script>
<script
src="https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/table/examples/js/sortable-table.js"
type="text/javascript"
></script>
<link href="/blog/css/structure.css" rel="stylesheet" type="text/css" />
<link
href="/blog/css/colour.adaptive.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="content">
<h1>Collected blogs from Gaza</h1>
<table class="sortable" id="results">
<caption>
News from Gaza
<span class="sr-only">
(column headers with buttons are sortable).
</span>
</caption>
<thead>
<tr>
<th class="no-sort">
Date
</th>
<th>
<button>
Title
<!-- span aria-hidden="true"></span -->
</button>
</th>
<th>
<button>
Author
<span aria-hidden="true"></span>
</button>
</th>
<!-- <th class="no-sort">
Address
</th> -->
<th class="num">
<button>
Blog
<span aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody id="posts"></tbody>
</table>
</div>
<script type="text/javascript">
const accumulator = new Array();
const dateOptions = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const feeds = [
// "https://www.journeyman.cc/blog/feed.xml",
"https://www.journeyman.cc/layan/feed.xml",
"https://www.journeyman.cc/voices-from-gaza/feed.xml",
];
var feedsRead = 0;
function sortByDate(a, b) {
console.log(
"Sorting: a: " +
typeof a.date +
", " +
a.date +
"; " +
typeof b.date +
", " +
b.date,
);
const r = a.date - b.date;
console.log("\t<== ", r);
return r;
}
// document
// .querySelector("#dateSorter")
// .addEventListener("click", sortByDate);
function display(target) {
console.log("display() called");
var x = accumulator[0];
accumulator.sort(sortByDate);
var y = accumulator.sort(sortByDate)[0];
console.log( "x = " + JSON.stringify(x) + "; y = " + JSON.stringify(y));
for (record of accumulator.sort(sortByDate).reverse()) {
// console.log("Adding post '" + record.title + "'");
$(target).append(
'<tr d="' +
record.date +
'"><td>' +
record.dateString +
"</td><td>" +
'<a href="' +
record.link +
'">' +
record.title +
"</a>" +
"</td><td>" +
record.author +
"</td><td>" +
'<a href="' +
record.blogLink +
'">' +
record.blogTitle +
"</a>" +
"</td></tr>",
);
}
}
function getRSSFeed(feed) {
console.log("Fetching data from: " + feed);
$.ajax(feed, {
accepts: {
xml: "application/rss+xml",
},
dataType: "xml",
success: function (data) {
const channel = $(data).find("channel").first();
$(data)
.find("item")
.each(function (i, element) {
const el = $(this);
const dt = Date.parse(
el.find("pubDate").text(),
);
const record = {
date: dt,
dateString: new Date(dt).toLocaleDateString(
undefined,
dateOptions,
),
link: el.find("link").text(),
title: el.find("title").text(),
author: el.find("author").text(),
blogLink: channel
.find("link")
.first()
.text(),
blogTitle: channel
.find("title")
.first()
.text(),
};
// console.log(
// "Assembled record " +
// JSON.stringify(record),
// );
accumulator.push(record);
return true;
});
feedsRead++;
console.log( "Read " + feedsRead + " of " + feeds.length);
if (feedsRead == feeds.length) {
display("#posts");
}
},
});
}
for (const f of feeds) {
getRSSFeed(f);
}
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
// const sortTable = async () => {
// await delay(10000);
// console.log("Waited 10s");
// display("#posts");
// };
// window.onload = (event) => {
// console.log("page is fully loaded");
// console.log(JSON.stringify(accumulator));
// sortTable();
// };
</script>
</body>
</html>