Reset button for marking read articles

Makefile

@@ -0,0 +1,2 @@
+css:
+	sassc _includes/form.scss > _includes/form.css

TODO.md

@@ -10,12 +10,12 @@ title: Roadmap
 ### Planned
 
 - [ ] Check color accessibility for viewed-grey-color.
-- [ ] Create a /settings page
+- [x] Create a /settings page
 	- [ ] Show syndicated articles in home page (default OFF)
 	- [ ] Pick sections for home-page
-	- [ ] Highlight words
+	- [x] Highlight words
 	- [ ] Font adjustments
-	- [ ] Clear "read articles"
+	- [x] Clear "read articles"
 - [ ] **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).

_includes/_defs.scss

@@ -0,0 +1,41 @@
+// The MIT License (MIT)
+//
+// Copyright (c) 2015-2023 Yegor Bugayenko
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// sizes
+$em: (18 / 16) * 1rem;
+$spacing: 18px;
+
+// fonts
+$sans-serif: system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// colors
+$beatroot: #660033;
+$background: #eee8d5;
+$white: white;
+%sans-serif {
+  font-family: $sans-serif;
+  font-size: $em;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.65 * $em;
+}

_includes/app.js

@@ -43,14 +43,31 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Set highlight words
   if(hw = document.getElementById('highlight-words')) {
-    hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join("\n");
+    hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join(",");
+
+    // Dealing with Textarea Height
+    function calcHeight(value) {
+      let numberOfLineBreaks = (value.match(/\n/g) || []).length;
+      let newHeight = Math.max(50,50+numberOfLineBreaks * 20);
+      return newHeight;
+    }
+
+    hw.style.height = calcHeight(hw.value) + "px";
+    hw.addEventListener("keyup", () => {
+      hw.style.height = calcHeight(hw.value) + "px";
+    });
+
   }
 
   // Save settings
   if(document.getElementById('btn-settings-save')) {
     document.getElementById('btn-settings-save').addEventListener('click', function (e) {
-      val = document.getElementById('highlight-words').value.split("\n").map(function(x){return x.trim()});
+      val = document.getElementById('highlight-words').value.split(",").map(function(x){return x.trim()});
       localStorage.setItem('highlightWords', JSON.stringify(val));
+      // Flash save
+      document.getElementById('btn-settings-save').value='Saved';
+      setTimeout(function(){document.getElementById('btn-settings-save').value='Save';}, 500);
+      // Don't refresh page
       return false;
     });
   }
@@ -66,4 +83,17 @@ document.addEventListener('DOMContentLoaded', function () {
       markInstance.mark(JSON.parse(words), {});
     }
   }
+
+  // Reset read articles
+  if(reset = document.getElementById('btn-settings-reset')){
+    reset.addEventListener('click', function (e) {
+      localStorage.setItem('eventHashes', JSON.stringify([]));
+      // Flash reset
+      e.target.value='All articles marked unread';
+      e.target.disabled=true;
+      setTimeout(function(){e.target.value='Reset';e.target.disabled=false;}, 500);
+      // Don't refresh page
+      return false;
+    });
+  }
 });

_includes/form.css

@@ -0,0 +1,117 @@
+form option {
+  font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1.125rem;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.85625rem; }
+
+form fieldset label,
+form fieldset legend {
+  display: block; }
+
+form fieldset legend {
+  margin: 1.125rem 0; }
+
+form input,
+form textarea,
+form select,
+form button {
+  display: inline-block;
+  padding: 0.61875rem; }
+  form input + label,
+  form input + input[type="checkbox"],
+  form input + input[type="radio"],
+  form textarea + label,
+  form textarea + input[type="checkbox"],
+  form textarea + input[type="radio"],
+  form select + label,
+  form select + input[type="checkbox"],
+  form select + input[type="radio"],
+  form button + label,
+  form button + input[type="checkbox"],
+  form button + input[type="radio"] {
+    page-break-before: always; }
+
+form input,
+form select,
+form label {
+  margin-right: 0.225rem; }
+
+form textarea {
+  min-height: 5.625rem;
+  min-width: 22.5rem; }
+
+form label {
+  display: inline-block;
+  margin-bottom: 0.7875rem; }
+  form label + * {
+    page-break-before: always; }
+  form label > input {
+    margin-bottom: 0; }
+
+form input[type="submit"],
+form input[type="reset"],
+form button {
+  background: #660033;
+  color: white;
+  cursor: pointer;
+  display: inline;
+  margin-bottom: 1.125rem;
+  margin-right: 0.45rem;
+  padding: 0.4078125rem 1.4625rem;
+  text-align: center; }
+  form input[type="submit"]:hover,
+  form input[type="reset"]:hover,
+  form button:hover {
+    background: #d9d9d9; }
+
+form input[type="submit"],
+form button[type="submit"] {
+  background: #660033;
+  color: white; }
+  form input[type="submit"]:hover,
+  form button[type="submit"]:hover {
+    background: #1a000d;
+    color: #bfbfbf; }
+
+form input,
+form select,
+form textarea {
+  margin-bottom: 1.125rem; }
+
+form input[type="text"],
+form input[type="password"],
+form input[type="email"],
+form input[type="url"],
+form input[type="phone"],
+form input[type="tel"],
+form input[type="number"],
+form input[type="datetime"],
+form input[type="date"],
+form input[type="month"],
+form input[type="week"],
+form input[type="color"],
+form input[type="time"],
+form input[type="search"],
+form input[type="range"],
+form input[type="file"],
+form input[type="datetime-local"],
+form select,
+form textarea {
+  border: 1px solid #660033;
+  padding: 0.3375rem 0.39375rem; }
+
+form input[type="checkbox"],
+form input[type="radio"] {
+  flex-grow: 0;
+  height: 1.85625rem;
+  margin-left: 0;
+  margin-right: 9px;
+  vertical-align: middle; }
+  form input[type="checkbox"] + label,
+  form input[type="radio"] + label {
+    page-break-before: avoid; }
+
+form select[multiple] {
+  min-width: 270px; }

_includes/form.scss

@@ -0,0 +1,133 @@
+// Generated Automatically from form.scss
+// Run sassc form.scss > form.css
+@import 'defs';
+
+form{
+  fieldset {
+    label,
+    legend {
+      display: block;
+    }
+
+    legend {
+      margin: $em 0;
+    }
+  }
+
+  input,
+  textarea,
+  select,
+  button {
+    display: inline-block;
+    padding: .55 * $em;
+
+    + label,
+    + input[type="checkbox"],
+    + input[type="radio"] {
+      page-break-before: always;
+    }
+  }
+
+  input,
+  select,
+  label {
+    margin-right: .2 * $em;
+  }
+
+  option {
+    @extend %sans-serif;
+  }
+
+  textarea {
+    min-height: 5 * $em;
+    min-width: 20 * $em;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: .7 * $em;
+
+    + * {
+      page-break-before: always;
+    }
+
+    > input {
+      margin-bottom: 0;
+    }
+  }
+
+  input[type="submit"],
+  input[type="reset"],
+  button {
+    background: $beatroot;
+    color: white;
+    cursor: pointer;
+    display: inline;
+    margin-bottom: $em;
+    margin-right: .4 * $em;
+    padding: .3625 * $em 1.3 * $em;
+    text-align: center;
+
+    &:hover {
+      background: darken($white, 15);
+    }
+
+  }
+
+  input[type="submit"],
+  button[type="submit"] {
+    background: $beatroot;
+    color: $white;
+
+    &:hover {
+      background: darken($beatroot, 15);
+      color: darken($white, 25);
+    }
+  }
+
+  input,
+  select,
+  textarea {
+    margin-bottom: $em;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="phone"],
+  input[type="tel"],
+  input[type="number"],
+  input[type="datetime"],
+  input[type="date"],
+  input[type="month"],
+  input[type="week"],
+  input[type="color"],
+  input[type="time"],
+  input[type="search"],
+  input[type="range"],
+  input[type="file"],
+  input[type="datetime-local"],
+  select,
+  textarea {
+    border: 1px solid $beatroot;
+    padding: .3 * $em .35 * $em;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    flex-grow: 0;
+    height: 1.65 * $em;
+    margin-left: 0;
+    margin-right: .5 * $spacing;
+    vertical-align: middle;
+
+    + label {
+      page-break-before: avoid;
+    }
+  }
+
+  select[multiple] {
+    min-width: 15 * $spacing;
+  }
+}

settings.html

@@ -6,11 +6,16 @@ permalink: /settings/
 # https://github.com/jekyll/jekyll-seo-tag/issues/100
 noindex: true
 ---
-
+<style type="text/css">
+	{% include form.css %}
+</style>
 <form>
-	<section>
-		<label for="highlight-words">Highlight Words (comma-separated):</label><br>
-		<textarea oninput="this.parentNode.dataset.value = this.value" rows="1" id="highlight-words" style="width:100%" rows=3></textarea>
-	</section>
+	<label for="highlight-words">Highlight Words (comma-separated):</label><br>
+	<textarea cols=20 wrap=hard oninput="this.parentNode.dataset.value = this.value" rows="1" id="highlight-words" style="width:100%" rows=3></textarea>
+
 	<input type=button id="btn-settings-save" value=Save>
+</form>
+<form>	
+	<label for=btn-settings-reset>Reset Read Articles</label>
+	<input type=button id="btn-settings-reset" value=Reset>
 </form>