Add greying out for viewed articles

.gitignore

@@ -1 +1,2 @@
-vendor
+vendor
+_site

TODO.md

@@ -10,4 +10,6 @@
 	- [ ] Font adjustments
 	- [ ] Clear "read articles"
 - [ ] Redirect 404 articles to upstream
-- [ ] Add sign for "developing story"
+- [ ] Add sign for "developing story"
+- [ ] Fix tap target size in bottom footer.
+- [ ] Make "/" in bottom footer using CSS after

_includes/header.html

@@ -105,4 +105,8 @@ h6 {
   border: 1px dashed;
   border-radius: 3px;
 }
+
+details.viewed>summary {
+  color: #999;
+}
 </style>

_layouts/default.html

@@ -22,5 +22,6 @@
 {% include topics.html %}
 {% include footer.html %}
 
+<script src="/app.js"></script>
 </body>
 </html>

_layouts/topic.html

@@ -11,7 +11,7 @@ layout: default
 
 {% for post in site.pages %}
 {% if post.topics contains page.topic %}
-<details>
+<details data-hash="{{post.id}}-{{post.date | date: '%s'}}">
 	<summary>
 		<h2>{{post.title | strip}} </h2>
 		<a class="topic-title" href="{{post.url}}">🔗</a>

_plugins/fetch_posts.rb

@@ -81,23 +81,25 @@ class BeatrootNews < Jekyll::Generator
     now = DateTime.new(n.year, n.month, n.day, 23, 59, 59, "+0530")
     PageWithoutAFile.new(@site, __dir__, article['id'], "index.html").tap do |file|
       html = article['body_json']['blocks'].map{ |t| t['data']['text']}.join(" ")
+      html = Sanitize.fragment(html, SANITIZE_CONFIG)
       topics = article['topic'].map { |topic| topic.split('-').first }
       if article['trigger_warning']
         html = "<p><b>#{article['trigger_warning_text']}</b></p>" + html
       end
 
-      file.content = Sanitize.fragment(html, SANITIZE_CONFIG)
+      file.content = html
       
       date = timestamp(article['updated_on'])
       file.data.merge!(
         'sources'  => article['sources'],
         "date"     => date,
-        
+        "id"       => article['id'],
+        "slug"     => article['slug'],
         "title"    => article['title'],
         "layout"   => 'article',
         "topics"   => topics,
         "days_ago" => (now - date).floor,
-        # Limit to 200 characters
+        # Limit to 200 characters and no tags
         "description" => Sanitize.fragment(html)[0..200],
         "seo" => {
           "type" => "NewsArticle",

app.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Get the list of hashes from local storage
+  var storedHashes = localStorage.getItem('eventHashes');
+  var eventHashes = storedHashes ? JSON.parse(storedHashes) : [];
+
+  // Get all <details> elements on the page
+  var detailsElements = document.querySelectorAll('details');
+
+  // Add event listeners to track open/click events
+  detailsElements.forEach(function (detailsElement) {
+    detailsElement.addEventListener('toggle', function (e) {
+      // Add viewed class to the target:
+      // TODO: Fix if we use multiple classes.
+      e.target.setAttribute('class', 'viewed');
+      // Get the data-hash attribute value
+      var hash = detailsElement.getAttribute('data-hash');
+
+      // Check if the hash already exists in eventHashes array
+      if (!eventHashes.includes(hash)) {
+        // Add the hash to the eventHashes array
+        eventHashes.push(hash);
+
+        // Limit the eventHashes array to store only the last 100 events
+        if (eventHashes.length > 100) {
+          eventHashes.shift();
+        }
+
+        // Store the updated eventHashes array in local storage
+        localStorage.setItem('eventHashes', JSON.stringify(eventHashes));
+      }
+    });
+  });
+
+  // Add "viewed" class to <details> elements with matching hashes
+  detailsElements.forEach(function (detailsElement) {
+    var hash = detailsElement.getAttribute('data-hash');
+    if (eventHashes.includes(hash)) {
+      detailsElement.classList.add('viewed');
+    }
+  });
+});

index.html

@@ -13,7 +13,7 @@ layout: default
 	{% if post.topics and post.days_ago < 2 and post.topics.first == topic %}
 
 		{% unless post.sources contains "PTI" %}
-		<details><summary><h3>{{post.title | strip}}</h3></summary>
+		<details data-hash="{{post.id}}-{{post.date | date: '%s'}}"><summary><h3>{{post.title | strip}}</h3></summary>
 			<div class="details-content">{{post.content}}</div>
 		</details>
 		{% endunless %}