···

       
152
       
152
       
 
       
  line-height: 1.5;

     

       
153
       
153
       
 
       
  color: #333;

     

       
154
       
154
       
 
       
  background: #fff;

     

       
155
       
155
       
-
       
  display: flex;

     

       
156
       
156
       
-
       
  flex-direction: column;

     

       
157
       
157
       
-
       
}

     

       
158
       
158
       
-
       


     

       
159
       
159
       
-
       
.site-container {

     

       
160
       
160
       
-
       
  display: flex;

     

       
161
       
161
       
-
       
  max-width: 1200px;

     

       
155
       
155
       
+
       
  max-width: 900px;

     

       
162
       
156
       
 
       
  margin: 0 auto;

     

       
163
       
163
       
-
       
  width: 100%;

     

       
164
       
164
       
-
       
}

     

       
165
       
165
       
-
       


     

       
166
       
166
       
-
       
.date-tracker {

     

       
167
       
167
       
-
       
  position: sticky;

     

       
168
       
168
       
-
       
  top: 20px;

     

       
169
       
169
       
-
       
  width: 120px;

     

       
170
       
170
       
-
       
  padding: 20px 15px;

     

       
171
       
171
       
-
       
  height: fit-content;

     

       
172
       
172
       
-
       
  flex-shrink: 0;

     

       
173
       
173
       
-
       
}

     

       
174
       
174
       
-
       


     

       
175
       
175
       
-
       
.date-tracker-content {

     

       
176
       
176
       
-
       
  text-align: right;

     

       
177
       
177
       
-
       
  border-right: 3px solid #e1e4e8;

     

       
178
       
178
       
-
       
  padding-right: 15px;

     

       
179
       
179
       
-
       
}

     

       
180
       
180
       
-
       


     

       
181
       
181
       
-
       
.date-year {

     

       
182
       
182
       
-
       
  font-size: 24px;

     

       
183
       
183
       
-
       
  font-weight: 700;

     

       
184
       
184
       
-
       
  color: #0366d6;

     

       
185
       
185
       
-
       
  margin-bottom: 4px;

     

       
186
       
186
       
-
       
}

     

       
187
       
187
       
-
       


     

       
188
       
188
       
-
       
.date-month {

     

       
189
       
189
       
-
       
  font-size: 14px;

     

       
190
       
190
       
-
       
  font-weight: 600;

     

       
191
       
191
       
-
       
  color: #586069;

     

       
192
       
192
       
-
       
  margin-bottom: 2px;

     

       
193
       
193
       
-
       
}

     

       
194
       
194
       
-
       


     

       
195
       
195
       
-
       
.date-day {

     

       
196
       
196
       
-
       
  font-size: 13px;

     

       
197
       
197
       
-
       
  color: #959da5;

     

       
198
       
198
       
-
       
}

     

       
199
       
199
       
-
       


     

       
200
       
200
       
-
       
.main-content {

     

       
201
       
201
       
-
       
  flex: 1;

     

       
202
       
202
       
-
       
  min-width: 0;

     

       
203
       
157
       
 
       
  padding: 15px;

     

       
204
       
158
       
 
       
}

     

       
205
       
159
       
 
       


     
···

       
234
       
188
       
 
       
  color: #0366d6;

     

       
235
       
189
       
 
       
}

     

       
236
       
190
       
 
       


     

       
237
       
237
       
-
       
@media (max-width: 768px) {

     

       
238
       
238
       
-
       
  .site-container {

     

       
239
       
239
       
-
       
    flex-direction: column;

     

       
240
       
240
       
-
       
  }

     

       
241
       
241
       
-
       


     

       
242
       
242
       
-
       
  .date-tracker {

     

       
243
       
243
       
-
       
    position: relative;

     

       
244
       
244
       
-
       
    top: 0;

     

       
245
       
245
       
-
       
    width: 100%;

     

       
246
       
246
       
-
       
    padding: 10px 15px;

     

       
247
       
247
       
-
       
    border-bottom: 1px solid #e1e4e8;

     

       
248
       
248
       
-
       
  }

     

       
249
       
249
       
-
       


     

       
250
       
250
       
-
       
  .date-tracker-content {

     

       
251
       
251
       
-
       
    text-align: left;

     

       
252
       
252
       
-
       
    border-right: none;

     

       
253
       
253
       
-
       
    border-bottom: 2px solid #e1e4e8;

     

       
254
       
254
       
-
       
    padding-right: 0;

     

       
255
       
255
       
-
       
    padding-bottom: 10px;

     

       
256
       
256
       
-
       
  }

     

       
257
       
257
       
-
       


     

       
258
       
258
       
-
       
  .main-content {

     

       
259
       
259
       
-
       
    padding: 15px;

     

       
260
       
260
       
-
       
  }

     

       
261
       
261
       
-
       
}

     

       
262
       
262
       
-
       


     

       
263
       
191
       
 
       
.post {

     

       
264
       
264
       
-
       
  margin-bottom: 25px;

     

       
265
       
265
       
-
       
  padding-bottom: 20px;

     

       
192
       
192
       
+
       
  margin-bottom: 30px;

     

       
193
       
193
       
+
       
  padding-bottom: 25px;

     

       
266
       
194
       
 
       
  border-bottom: 1px solid #e1e4e8;

     

       
195
       
195
       
+
       
  overflow: hidden;

     

       
267
       
196
       
 
       
}

     

       
268
       
197
       
 
       


     

       
269
       
198
       
 
       
.post:last-child {

     

       
270
       
199
       
 
       
  border-bottom: none;

     

       
271
       
200
       
 
       
}

     

       
272
       
201
       
 
       


     

       
202
       
202
       
+
       
.author-thumbnail {

     

       
203
       
203
       
+
       
  float: right;

     

       
204
       
204
       
+
       
  width: 48px;

     

       
205
       
205
       
+
       
  height: 48px;

     

       
206
       
206
       
+
       
  border-radius: 50%;

     

       
207
       
207
       
+
       
  object-fit: cover;

     

       
208
       
208
       
+
       
  margin-left: 15px;

     

       
209
       
209
       
+
       
  margin-bottom: 10px;

     

       
210
       
210
       
+
       
  border: 2px solid #e1e4e8;

     

       
211
       
211
       
+
       
  transition: transform 0.2s, box-shadow 0.2s;

     

       
212
       
212
       
+
       
}

     

       
213
       
213
       
+
       


     

       
214
       
214
       
+
       
.author-thumbnail:hover {

     

       
215
       
215
       
+
       
  transform: scale(1.05);

     

       
216
       
216
       
+
       
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

     

       
217
       
217
       
+
       
}

     

       
218
       
218
       
+
       


     

       
273
       
219
       
 
       
.post-title {

     

       
274
       
220
       
 
       
  font-size: 18px;

     

       
275
       
221
       
 
       
  font-weight: 600;

     

       
276
       
276
       
-
       
  margin-bottom: 5px;

     

       
222
       
222
       
+
       
  margin-bottom: 4px;

     

       
277
       
223
       
 
       
  line-height: 1.3;

     

       
278
       
224
       
 
       
}

     

       
279
       
225
       
 
       


     
···

       
286
       
232
       
 
       
  text-decoration: underline;

     

       
287
       
233
       
 
       
}

     

       
288
       
234
       
 
       


     

       
289
       
289
       
-
       
.post-meta {

     

       
235
       
235
       
+
       
.post-meta-line {

     

       
290
       
236
       
 
       
  font-size: 12px;

     

       
291
       
237
       
 
       
  color: #586069;

     

       
292
       
292
       
-
       
  margin-bottom: 8px;

     

       
293
       
293
       
-
       
  display: flex;

     

       
294
       
294
       
-
       
  align-items: center;

     

       
295
       
295
       
-
       
  gap: 8px;

     

       
238
       
238
       
+
       
  margin-bottom: 10px;

     

       
296
       
239
       
 
       
}

     

       
297
       
240
       
 
       


     

       
298
       
298
       
-
       
.post-meta a {

     

       
241
       
241
       
+
       
.post-meta-line a {

     

       
299
       
242
       
 
       
  color: #586069;

     

       
300
       
243
       
 
       
  text-decoration: none;

     

       
244
       
244
       
+
       
  font-weight: 600;

     

       
301
       
245
       
 
       
}

     

       
302
       
246
       
 
       


     

       
303
       
303
       
-
       
.post-meta a:hover {

     

       
247
       
247
       
+
       
.post-meta-line a:hover {

     

       
304
       
248
       
 
       
  color: #0366d6;

     

       
305
       
249
       
 
       
}

     

       
306
       
250
       
 
       


     

       
307
       
307
       
-
       
.author-thumbnail {

     

       
308
       
308
       
-
       
  width: 48px;

     

       
309
       
309
       
-
       
  height: 48px;

     

       
310
       
310
       
-
       
  border-radius: 50%;

     

       
311
       
311
       
-
       
  object-fit: cover;

     

       
312
       
312
       
-
       
  flex-shrink: 0;

     

       
313
       
313
       
-
       
}

     

       
314
       
314
       
-
       


     

       
315
       
315
       
-
       
.post-meta-text {

     

       
316
       
316
       
-
       
  flex: 1;

     

       
317
       
317
       
-
       
  display: flex;

     

       
318
       
318
       
-
       
  flex-direction: column;

     

       
319
       
319
       
-
       
  justify-content: center;

     

       
320
       
320
       
-
       
}

     

       
321
       
321
       
-
       


     

       
322
       
322
       
-
       
.author-name {

     

       
323
       
323
       
-
       
  font-size: 14px;

     

       
324
       
324
       
-
       
  font-weight: 600;

     

       
325
       
325
       
-
       
  color: #24292e;

     

       
326
       
326
       
-
       
  margin-bottom: 2px;

     

       
327
       
327
       
-
       
}

     

       
328
       
328
       
-
       


     

       
329
       
329
       
-
       
.post-date {

     

       
330
       
330
       
-
       
  font-size: 12px;

     

       
331
       
331
       
-
       
  color: #586069;

     

       
251
       
251
       
+
       
@media (max-width: 768px) {

     

       
252
       
252
       
+
       
  .author-thumbnail {

     

       
253
       
253
       
+
       
    float: none;

     

       
254
       
254
       
+
       
    display: block;

     

       
255
       
255
       
+
       
    margin: 0 auto 10px auto;

     

       
256
       
256
       
+
       
  }

     

       
332
       
257
       
 
       
}

     

       
333
       
258
       
 
       


     

       
334
       
259
       
 
       
.post-excerpt {

     
···

       
851
       
776
       
 
       
  <style>%s</style>

     

       
852
       
777
       
 
       
</head>

     

       
853
       
778
       
 
       
<body>

     

       
854
       
854
       
-
       
  <div class="site-container">

     

       
855
       
855
       
-
       
    <aside class="date-tracker" id="date-tracker">

     

       
856
       
856
       
-
       
      <div class="date-tracker-content">

     

       
857
       
857
       
-
       
        <div class="date-year" id="current-year">2025</div>

     

       
858
       
858
       
-
       
        <div class="date-month" id="current-month">January</div>

     

       
859
       
859
       
-
       
        <div class="date-day" id="current-day">1</div>

     

       
860
       
860
       
-
       
      </div>

     

       
861
       
861
       
-
       
    </aside>

     

       
862
       
862
       
-
       
    <div class="main-content">

     

       
863
       
863
       
-
       
      <header>

     

       
864
       
864
       
-
       
        <h1><a href="index.html">River Feed</a></h1>

     

       
865
       
865
       
-
       
        <nav>

     

       
866
       
866
       
-
       
          <a href="index.html"%s>Posts</a>

     

       
867
       
867
       
-
       
          <a href="authors/index.html"%s>Authors</a>

     

       
868
       
868
       
-
       
          <a href="categories/index.html"%s>Categories</a>

     

       
869
       
869
       
-
       
          <a href="links.html"%s>Links</a>

     

       
870
       
870
       
-
       
        </nav>

     

       
871
       
871
       
-
       
      </header>

     

       
872
       
872
       
-
       
      <main>

     

       
779
       
779
       
+
       
  <header>

     

       
780
       
780
       
+
       
    <h1><a href="index.html">River Feed</a></h1>

     

       
781
       
781
       
+
       
    <nav>

     

       
782
       
782
       
+
       
      <a href="index.html"%s>Posts</a>

     

       
783
       
783
       
+
       
      <a href="authors/index.html"%s>Authors</a>

     

       
784
       
784
       
+
       
      <a href="categories/index.html"%s>Categories</a>

     

       
785
       
785
       
+
       
      <a href="links.html"%s>Links</a>

     

       
786
       
786
       
+
       
    </nav>

     

       
787
       
787
       
+
       
  </header>

     

       
788
       
788
       
+
       
  <main>

     

       
873
       
789
       
 
       
%s

     

       
874
       
874
       
-
       
      </main>

     

       
875
       
875
       
-
       
      <footer>

     

       
876
       
876
       
-
       
        Generated by River Feed Aggregator

     

       
877
       
877
       
-
       
      </footer>

     

       
878
       
878
       
-
       
    </div>

     

       
879
       
879
       
-
       
  </div>

     

       
790
       
790
       
+
       
  </main>

     

       
791
       
791
       
+
       
  <footer>

     

       
792
       
792
       
+
       
    Generated by River Feed Aggregator

     

       
793
       
793
       
+
       
  </footer>

     

       
880
       
794
       
 
       
  <div class="lightbox" id="lightbox">

     

       
881
       
795
       
 
       
    <img id="lightbox-img" src="" alt="">

     

       
882
       
796
       
 
       
  </div>

     
···

       
930
       
844
       
 
       
          }

     

       
931
       
845
       
 
       
        }

     

       
932
       
846
       
 
       
      });

     

       
933
       
933
       
-
       


     

       
934
       
934
       
-
       
      // Date tracker scroll update

     

       
935
       
935
       
-
       
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',

     

       
936
       
936
       
-
       
                          'July', 'August', 'September', 'October', 'November', 'December'];

     

       
937
       
937
       
-
       


     

       
938
       
938
       
-
       
      function updateDateTracker() {

     

       
939
       
939
       
-
       
        const posts = document.querySelectorAll('.post[data-date]');

     

       
940
       
940
       
-
       
        if (posts.length === 0) return;

     

       
941
       
941
       
-
       


     

       
942
       
942
       
-
       
        // Find the post currently in the middle of the viewport

     

       
943
       
943
       
-
       
        const viewportMiddle = window.scrollY + (window.innerHeight / 2);

     

       
944
       
944
       
-
       
        let closestPost = posts[0];

     

       
945
       
945
       
-
       
        let closestDistance = Math.abs(posts[0].offsetTop - viewportMiddle);

     

       
946
       
946
       
-
       


     

       
947
       
947
       
-
       
        posts.forEach(post => {

     

       
948
       
948
       
-
       
          const distance = Math.abs(post.offsetTop - viewportMiddle);

     

       
949
       
949
       
-
       
          if (distance < closestDistance) {

     

       
950
       
950
       
-
       
            closestDistance = distance;

     

       
951
       
951
       
-
       
            closestPost = post;

     

       
952
       
952
       
-
       
          }

     

       
953
       
953
       
-
       
        });

     

       
954
       
954
       
-
       


     

       
955
       
955
       
-
       
        const dateStr = closestPost.getAttribute('data-date');

     

       
956
       
956
       
-
       
        if (dateStr) {

     

       
957
       
957
       
-
       
          const date = new Date(dateStr);

     

       
958
       
958
       
-
       
          const yearEl = document.getElementById('current-year');

     

       
959
       
959
       
-
       
          const monthEl = document.getElementById('current-month');

     

       
960
       
960
       
-
       
          const dayEl = document.getElementById('current-day');

     

       
961
       
961
       
-
       


     

       
962
       
962
       
-
       
          if (yearEl) yearEl.textContent = date.getFullYear();

     

       
963
       
963
       
-
       
          if (monthEl) monthEl.textContent = monthNames[date.getMonth()];

     

       
964
       
964
       
-
       
          if (dayEl) dayEl.textContent = date.getDate();

     

       
965
       
965
       
-
       
        }

     

       
966
       
966
       
-
       
      }

     

       
967
       
967
       
-
       


     

       
968
       
968
       
-
       
      // Update on scroll and initial load

     

       
969
       
969
       
-
       
      let scrollTimeout;

     

       
970
       
970
       
-
       
      window.addEventListener('scroll', function() {

     

       
971
       
971
       
-
       
        clearTimeout(scrollTimeout);

     

       
972
       
972
       
-
       
        scrollTimeout = setTimeout(updateDateTracker, 50);

     

       
973
       
973
       
-
       
      });

     

       
974
       
974
       
-
       


     

       
975
       
975
       
-
       
      // Initial update

     

       
976
       
976
       
-
       
      updateDateTracker();

     

       
977
       
847
       
 
       
    })();

     

       
978
       
848
       
 
       
  </script>

     

       
979
       
849
       
 
       
</body>

     

···

       
563
       
563
       
 
       
        i >= start_idx && i < start_idx + posts_per_page

     

       
564
       
564
       
 
       
      ) html_data in

     

       
565
       
565
       
 
       


     

       
566
       
566
       
-
       
      let post_htmls = List.map (fun (username, title, author, date, link, content, tags) ->

     

       
567
       
567
       
-
       
        Log.debug (fun m -> m "    Processing post: %s by %s (@%s)" title author username);

     

       
568
       
568
       
-
       
        (* Create a temporary Post-like structure for rendering *)

     

       
569
       
569
       
-
       
        (* We'll need to adapt this since we're working with Atom entries *)

     

       
566
       
566
       
+
       
      let post_htmls = List.map (fun (username, title, _feed_author, date, link, content, tags) ->

     

       
567
       
567
       
+
       
        Log.debug (fun m -> m "    Processing post: %s by @%s" title username);

     

       
568
       
568
       
+
       


     

       
569
       
569
       
+
       
        (* Get author name from Sortal, fallback to username *)

     

       
570
       
570
       
+
       
        let author_name = match Sortal.lookup state.sortal username with

     

       
571
       
571
       
+
       
          | Some contact -> Sortal.Contact.name contact

     

       
572
       
572
       
+
       
          | None -> username

     

       
573
       
573
       
+
       
        in

     

       
574
       
574
       
+
       


     

       
570
       
575
       
 
       
        let post_html =

     

       
571
       
576
       
 
       
          let date_str = Format.Html.format_date date in

     

       
572
       
572
       
-
       
          (* Format date for data attribute (ISO 8601) *)

     

       
573
       
573
       
-
       
          let date_iso = Ptime.to_rfc3339 date in

     

       
574
       
577
       
 
       
          let link_html = match link with

     

       
575
       
578
       
 
       
            | Some uri ->

     

       
576
       
579
       
 
       
                Printf.sprintf {|<a href="%s">%s</a>|}

     
···

       
593
       
596
       
 
       
          in

     

       
594
       
597
       
 
       
          let thumbnail_html = match get_author_thumbnail username with

     

       
595
       
598
       
 
       
            | Some thumb_path ->

     

       
596
       
596
       
-
       
                Printf.sprintf {|<img src="%s" alt="%s" class="author-thumbnail">|}

     

       
599
       
599
       
+
       
                Printf.sprintf {|<a href="authors/%s.html"><img src="%s" alt="%s" class="author-thumbnail"></a>|}

     

       
600
       
600
       
+
       
                  (Format.Html.html_escape (sanitize_filename username))

     

       
597
       
601
       
 
       
                  (Format.Html.html_escape thumb_path)

     

       
598
       
598
       
-
       
                  (Format.Html.html_escape author)

     

       
599
       
599
       
-
       
            | None -> ""

     

       
602
       
602
       
+
       
                  (Format.Html.html_escape author_name)

     

       
603
       
603
       
+
       
            | None ->

     

       
604
       
604
       
+
       
                Printf.sprintf {|<a href="authors/%s.html"><div class="author-thumbnail" style="background: linear-gradient(135deg, #667eea 0%%, #764ba2 100%%); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;">%s</div></a>|}

     

       
605
       
605
       
+
       
                  (Format.Html.html_escape (sanitize_filename username))

     

       
606
       
606
       
+
       
                  (String.uppercase_ascii (String.sub author_name 0 1))

     

       
600
       
607
       
 
       
          in

     

       
601
       
601
       
-
       
          Printf.sprintf {|<article class="post" data-date="%s">

     

       
608
       
608
       
+
       
          Printf.sprintf {|<article class="post">

     

       
609
       
609
       
+
       
  %s

     

       
602
       
610
       
 
       
  <h2 class="post-title">%s</h2>

     

       
603
       
603
       
-
       
  <div class="post-meta">

     

       
604
       
604
       
-
       
    %s<div class="post-meta-text">

     

       
605
       
605
       
-
       
      <div class="author-name"><a href="authors/%s.html">%s</a></div>

     

       
606
       
606
       
-
       
      <div class="post-date">%s</div>

     

       
607
       
607
       
-
       
    </div>

     

       
608
       
608
       
-
       
  </div>

     

       
611
       
611
       
+
       
  <div class="post-meta-line">By <a href="authors/%s.html">%s</a> · %s</div>

     

       
609
       
612
       
 
       
  <div class="post-excerpt">

     

       
610
       
613
       
 
       
%s

     

       
611
       
614
       
 
       
  </div>

     
···

       
615
       
618
       
 
       
  <a href="#" class="read-more">Read more</a>

     

       
616
       
619
       
 
       
%s

     

       
617
       
620
       
 
       
</article>|}

     

       
618
       
618
       
-
       
            date_iso

     

       
621
       
621
       
+
       
            thumbnail_html

     

       
619
       
622
       
 
       
            link_html

     

       
620
       
620
       
-
       
            thumbnail_html

     

       
621
       
623
       
 
       
            (Format.Html.html_escape (sanitize_filename username))

     

       
622
       
622
       
-
       
            (Format.Html.html_escape author)

     

       
624
       
624
       
+
       
            (Format.Html.html_escape author_name)

     

       
623
       
625
       
 
       
            date_str

     

       
624
       
626
       
 
       
            excerpt

     

       
625
       
627
       
 
       
            full_content