From 5e3b7c54e7263f3d3ab659b35302489d161a5392 Mon Sep 17 00:00:00 2001
From: Luke Smith <Luke Smith>
Date: Sat, 2 Jul 2022 09:37:26 -0400
Subject: [PATCH] show only most recent if not searching, visibility

---
 config.toml                     |  1 +
 content/_index.md               |  7 ++++++-
 layouts/shortcodes/artlist.html |  8 +++++---
 static/style.css                | 18 ++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/config.toml b/config.toml
index e35ba87..1e0668c 100644
--- a/config.toml
+++ b/config.toml
@@ -6,6 +6,7 @@ theme = 'lugo'
 [params]
   favicon = "/favicon.svg"
   stylesheet = "/style.css"
+  indexarticles = 50
 
 [markup]
   [markup.goldmark]
diff --git a/content/_index.md b/content/_index.md
index 107959c..5783cef 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -6,7 +6,7 @@ description: 'The fast-loading recipe site with cooking only and no ads.'
 ## What do you want to cook?
 
 <div class="search js-only">
-  <input type="text" id="search" placeholder="Search...">
+  <input type="text" id="search" placeholder="Search ALL Recipes...">
   <button id="clear-search">
     <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
   </button>
@@ -22,6 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const recipes = document.querySelectorAll("#artlist li");
   const search = document.getElementById("search");
+  const oldheading = document.getElementById("newest-recipes");
   const clearSearch = document.getElementById("clear-search");
   const artlist = document.getElementById("artlist");
 
@@ -32,6 +33,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const hasFilter = searchText.length > 0;
 
     artlist.classList.toggle("list-searched", hasFilter);
+    oldheading.classList.toggle("hidden", hasFilter);
 
     // for each recipe hide all but matched
     recipes.forEach(recipe => {
@@ -51,11 +53,14 @@ document.addEventListener("DOMContentLoaded", () => {
     })
 
     artlist.classList.remove("list-searched");
+    oldheading.classList.remove("hidden");
   })
 })
 // @license-end
 </script>
 
+## Newest Recipes
+
 {{< artlist >}}
 
 ## Or Browse by Category...
diff --git a/layouts/shortcodes/artlist.html b/layouts/shortcodes/artlist.html
index d1e3206..5d27c08 100644
--- a/layouts/shortcodes/artlist.html
+++ b/layouts/shortcodes/artlist.html
@@ -1,5 +1,7 @@
 <ul id=artlist>
-{{range.Site.RegularPages}}
-<li data-tags="{{.Params.Tags}}"><a href="{{.Permalink}}">{{.Title}}</a></li>
-{{end}}
+{{ $number := 0 -}}
+{{- range.Site.RegularPages -}}
+{{- $number = add $number 1 -}}
+<li data-tags="{{.Params.Tags}}" {{ if gt $number .Site.Params.indexarticles }}class="older-article"{{ end }}><a href="{{.Permalink}}">{{.Title}}</a></li>
+{{ end -}}
 </ul>
diff --git a/static/style.css b/static/style.css
index 6d7fa78..20ae794 100644
--- a/static/style.css
+++ b/static/style.css
@@ -20,6 +20,7 @@ body {
 
 a {
 	color: gold ;
+	text-decoration: none ;
 }
 
 #tagcloud {
@@ -111,6 +112,22 @@ img[alt="XMR Logo"] {
 
 }
 
+.older-article {
+	display: none ;
+}
+
+.hidden {
+	display: none !important ;
+}
+
+#artlist {
+	font-size: large ;
+}
+
+#artlist li {
+	padding: .25em ;
+}
+
 @media (min-width: 55em) {
 	#artlist { column-count: 2 ;}
 }
@@ -155,6 +172,7 @@ button#clear-search:hover {
 
 .matched-recipe {
 	font-size: x-large ;
+	display: block !important ;
 }
 
 .list-searched {