Misc Updates and new feature to hide Topics

I'm never interested in sports/entertainment/Asian games news
so this lets me hide useless news.

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.4)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
     concurrent-ruby (1.2.2)
@@ -10,9 +10,9 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.5)
+    ffi (1.16.2)
     forwardable-extended (2.6.0)
-    google-protobuf (3.23.2-x86_64-linux)
+    google-protobuf (3.24.3-x86_64-linux)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -49,22 +49,22 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
-    nokogiri (1.15.3-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.1)
+    public_suffix (5.0.3)
     racc (1.7.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (4.1.2)
+    rexml (3.2.6)
+    rouge (4.1.3)
     safe_yaml (1.0.5)
-    sanitize (6.0.2)
+    sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sass-embedded (1.63.3-x86_64-linux-gnu)
+    sass-embedded (1.68.0-x86_64-linux-gnu)
       google-protobuf (~> 3.23)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
@@ -81,4 +81,4 @@ DEPENDENCIES
   sanitize (~> 6.0)
 
 BUNDLED WITH
-   2.4.13
+   2.4.20

TODO.md

@@ -5,17 +5,18 @@ title: Roadmap
 ---
 
 ### In Progress
-- [ ] Drop empty sections in homepage
-- [ ] **settings** Pick topics for home-page
+
 ### Planned
 
-- [ ] Font adjustments in settings
+- [ ] Font adjustments in settings.
+- [ ] Custom trigger words in settings.
 - [ ] Check color accessibility for viewed-grey-color.
 - [ ] **Blocked** Use upstream as canonical page if it ever becomes stable and fast
 	- [ ] **Stable**: Old links stop working on upstream. We break them intentionally, since this is a "daily news"  site, but upstream ought not to break. See [this link](https://app.beatrootnews.com/#article-5773) for eg.
 	- [ ] **Fast**: Current upstream is too slow. See [this report](https://pagespeed.web.dev/analysis/https-app-beatrootnews-com/scbmz1pf5r?form_factor=mobile).
 
 ### Completed
+- [x] Pick topics for home-page
 - [x] Fix top margin/whitespace in topic pages
 - [x] Grey out read articles. Keep track using localstorage.
 - [x] Un-grey articles that were updated. Use combination of article_id + last_updated

_includes/app.js

@@ -96,4 +96,32 @@ document.addEventListener('DOMContentLoaded', function () {
       return false;
     });
   }
+
+  // Set checkboxes from local storage in settings.html
+  let x = localStorage.getItem('hiddenTopics');
+  let hiddenTopics = x ? JSON.parse(x) : [];
+  for (let topic of hiddenTopics) {
+    let topicCheckbox = document.querySelector(`#checkbox-hide-${topic}`);
+    if (topicCheckbox) {
+      topicCheckbox.checked = true;
+    }
+  }
+
+  // On clicking checkbox, add it to localstorage
+  let checkboxes = document.querySelectorAll('.checkbox-hide');
+  for (let checkbox of checkboxes) {
+    checkbox.addEventListener('click', function (e) {
+      let topic = e.target.value;
+      let x = JSON.parse(localStorage.getItem('hiddenTopics'));
+      hiddenTopics = new Set(x)
+      
+      if (e.target.checked) {
+        hiddenTopics.add(topic);
+      } else {
+        hiddenTopics.delete(topic);
+      }
+      localStorage.setItem('hiddenTopics', JSON.stringify(Array.from(hiddenTopics)));
+    });
+  }
+
 });

_includes/header.html

@@ -4,3 +4,6 @@
 <style>
 {% include style.css %}
 </style>
+<script type="text/javascript">
+{% include hide.js %}
+</script>

_includes/hide.js

@@ -0,0 +1,10 @@
+let x = localStorage.getItem('hiddenTopics');
+let hiddenTopics = x ? JSON.parse(x) : [];
+// Create  a new style element that hides all 
+// elements with the data-topic=$topic attribute
+innerStyle = "";
+for (let topic of hiddenTopics) {
+  innerStyle += `.topic-${topic} {display:none} `;
+}
+console.log(innerStyle)
+document.head.insertAdjacentHTML("beforeend", `<style>${innerStyle}</style>`)

settings.html

@@ -15,6 +15,21 @@ noindex: true
 
 	<input type=button id="btn-settings-save" value=Save>
 </form>
+
+<form>
+	<h2>Hide These Topics</h2>
+	<fieldset>
+		<legend>Topics are only hidden on the home screen</legend>
+	{% for topic in site.topics %}
+
+	<label for="checkbox-hide-{{topic}}">
+		<input type=checkbox class="checkbox-hide" id="checkbox-hide-{{topic}}" value="{{topic}}">
+		{{topic | capitalize}}
+	</label>
+	{% endfor %}
+	</fieldset>
+</form>
+
 <form>	
 	<label for=btn-settings-reset>Reset Read Articles</label>
 	<input type=button id="btn-settings-reset" value=Reset>