worldnews/build.ts
2026-01-13 08:37:34 -05:00

92 lines
2.9 KiB
TypeScript

#!/usr/bin/env bun
import data from "./sources.json";
const leaningLabels: Record<string, string> = {
left: "left",
"center-left": "center-left",
center: "center",
"center-right": "center-right",
right: "right",
state: "state-controlled",
};
function escapeHtml(str: string): string {
return str
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
function generateNav(): string {
const links = data.regions
.map((r) => `<a href="#${r.name.toLowerCase()}">${r.name}</a>`)
.join("\n ");
return `<nav>\n ${links}\n </nav>`;
}
function generateCountry(country: { name: string; sources: Array<{ name: string; url: string; leaning: string; description: string }> }): string {
const sources = country.sources
.map((s) => {
const leaningClass = s.leaning.replace("-", "-");
const leaningText = leaningLabels[s.leaning] || s.leaning;
return ` <div class="source">
<a href="${escapeHtml(s.url)}" target="_blank" rel="noopener">${escapeHtml(s.name)}</a>
<span class="leaning ${leaningClass}">${leaningText}</span>
<div class="description">${escapeHtml(s.description)}</div>
</div>`;
})
.join("\n");
return ` <div class="country">
<h3>${escapeHtml(country.name)}</h3>
${sources}
</div>`;
}
function generateRegion(region: { name: string; countries: Array<{ name: string; sources: Array<{ name: string; url: string; leaning: string; description: string }> }> }): string {
const countries = region.countries.map(generateCountry).join("\n");
return ` <section id="${region.name.toLowerCase()}">
<h2>${escapeHtml(region.name)}</h2>
${countries}
</section>`;
}
function generateHtml(): string {
const nav = generateNav();
const regions = data.regions.map(generateRegion).join("\n\n");
const totalSources = data.regions.reduce(
(acc, r) => acc + r.countries.reduce((a, c) => a + c.sources.length, 0),
0
);
const totalCountries = data.regions.reduce((acc, r) => acc + r.countries.length, 0);
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>world news sources</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>world news sources</h1>
<p class="subtitle">${totalSources} sources from ${totalCountries} countries</p>
<p class="intro">news from journalists in their own countries, not filtered through us media</p>
</header>
${nav}
${regions}
<footer>
<p>political leanings are approximations based on media bias research. state-controlled outlets are labeled clearly.</p>
<p>sources: media bias/fact check, reuters institute, allsides, ad fontes media</p>
</footer>
</body>
</html>`;
}
const html = generateHtml();
await Bun.write("index.html", html);
console.log("built index.html");