https://sharkbytez.com/assets/js/newspaper-theme.js

1/* ============================================================================
2   SHARKBYTEZ — HOMEPAGE "OLDER ISSUES" GRID (rebuilt)
3   ============================================================================
4   Runs only on pages with a #newspaper-archive-grid element — currently
5   just index.html. Fetches data/posts.json, excludes whatever's already
6   baked in above the fold (the featured post + the 2 excerpt cards — always
7   the 3 newest posts, per buildIndexPageHtml in admin.js), and fills this
8   grid with a random selection of the rest — so the homepage keeps showing
9   fresh content on every visit/reload without needing a re-publish.
10
11   NOTE: this file was rebuilt from scratch, not recovered. By the time this
12   was diagnosed, assets/js/newspaper-theme.js had somehow become a copy of
13   the CSS from assets/css/newspaper-theme.css, so nothing populated this
14   grid anymore — whatever the original logic was is gone. If you have an
15   older backup lying around, it's worth diffing against this one to make
16   sure nothing else was lost along with it.
17   ============================================================================ */
18
19(function () {
20  "use strict";
21
22  var GRID_SIZE = 8; // how many "older issues" cards to show on the homepage
23
24  function escapeHtml(str) {
25    return String(str == null ? "" : str)
26      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
27  }
28
29  // Fisher-Yates shuffle — doesn't mutate the input array.
30  function shuffle(arr) {
31    var a = arr.slice();
32    for (var i = a.length - 1; i > 0; i--) {
33      var j = Math.floor(Math.random() * (i + 1));
34      var tmp = a[i]; a[i] = a[j]; a[j] = tmp;
35    }
36    return a;
37  }
38
39  function cardHtml(post) {
40    return (
41      '<a class="newspaper-archive-card" href="' + (post.url || '#') + '">' +
42      '<div class="thumb" style="background-image:url(\'' + post.image + '\');"></div>' +
43      '<span class="card-tag">' + escapeHtml(post.tag) + '</span>' +
44      '<h3>' + escapeHtml(post.title) + '</h3>' +
45      '</a>'
46    );
47  }
48
49  document.addEventListener('DOMContentLoaded', function () {
50    var grid = document.getElementById('newspaper-archive-grid');
51    if (!grid) return; // not on a page that has this section
52
53    fetch('data/posts.json')
54      .then(function (res) { return res.json(); })
55      .then(function (data) {
56        var posts = Array.isArray(data) ? data : [];
57
58        var sorted = posts.slice().sort(function (a, b) {
59          return new Date(b.publishedAt || b.date) - new Date(a.publishedAt || a.date);
60        });
61
62        // The 3 newest posts are always the ones already baked into
63        // index.html above the fold (featured + 2 excerpts) — see
64        // buildIndexPageHtml in admin.js. Everything else is fair game
65        // for this grid.
66        var rest = sorted.slice(3);
67
68        if (!rest.length) {
69          grid.innerHTML = '<p style="color:var(--text-dim);font-family:var(--font-mono);font-size:0.85rem;">No older issues yet.</p>';
70          return;
71        }
72
73        var picks = shuffle(rest).slice(0, GRID_SIZE);
74        grid.innerHTML = picks.map(cardHtml).join('\n');
75      })
76      .catch(function () {
77        grid.innerHTML = '<p style="color:var(--text-dim);font-family:var(--font-mono);font-size:0.85rem;">Couldn\'t load older issues right now — try refreshing.</p>';
78      });
79  });
80})();