Assemble world news

2026-01-13 08:36:55 -05:00 · 2026-01-13 08:36:55 -05:00 · 569e3dc8d0
commit 569e3dc8d0
parent 2073730a10
4 changed files with 1443 additions and 5 deletions
--- a/build.ts
+++ b/build.ts
@ -0,0 +1,92 @@
+#!/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");
--- a/index.html
+++ b/index.html
--- a/index.ts
+++ b/index.ts
@ -1 +0,0 @@
-console.log("Hello via Bun!");
--- a/style.css
+++ b/style.css
@ -6,8 +6,24 @@ body {
  line-height: 1.5;
 }

+header {
+  margin-bottom: 2rem;
+}
+
 h1 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.intro {
+  margin: 0.5rem 0 0 0;
+  font-style: italic;
+  color: #555;
 }

 h2 {
@ -67,3 +83,20 @@ nav a {
 nav a:hover {
  background: #e5e7eb;
 }
+
+h3 {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+footer {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid #ddd;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+footer p {
+  margin: 0.25rem 0;
+}