blogroll works nicely; table works; neither are pretty yet.
This commit is contained in:
parent
e021d5df4b
commit
5754e2a40a
2 changed files with 398 additions and 0 deletions
181
blogroll.html
Normal file
181
blogroll.html
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
<!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="main-container" class="container">
|
||||||
|
<div id="content" class="container">
|
||||||
|
<h1>Collected blogs from Gaza</h1>
|
||||||
|
</div>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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(
|
||||||
|
'<h2><a href="' +
|
||||||
|
record.link +
|
||||||
|
'">' +
|
||||||
|
record.title +
|
||||||
|
"</a></h2>" +
|
||||||
|
"<p><author>" +
|
||||||
|
record.author +
|
||||||
|
"</author> on " +
|
||||||
|
record.dateString +
|
||||||
|
"</p>" +
|
||||||
|
"<p>" +
|
||||||
|
record.description +
|
||||||
|
"</p>" +
|
||||||
|
'<p><a href="' +
|
||||||
|
record.link +
|
||||||
|
'">Read more...</a></p>' +
|
||||||
|
"<hr>",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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(),
|
||||||
|
description: el.find("description").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("#content");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
217
table.html
Normal file
217
table.html
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue