Added filter functionality to list

src/dynamic/posthume_ausgaben.njk

@@ -11,8 +11,10 @@ eleventyNavigation:
     <p class="max-w-[80ch]">Neben den selbständig erschienenen Einzel- und Werkausgaben sind in Auswahl auch Textsammlungen zum Sturm und Drang mit umfangreicheren Lenz-Abteilungen aufgeführt.
 </div>
 
-<div class="flex flex-row sticky top-0">
-<div class="z-10 border-r-2 border-slate-400 bg-emerald-100 px-4 py-2 self-start w-full">
+<div class="sticky top-0 z-20">
+  <div class="flex flex-row">
+    <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
+    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
     {% set jahr = "" %}
     {% set count = 1 %}
     <a href="#top">↑</a>&nbsp;&nbsp;
@@ -24,10 +26,10 @@ eleventyNavigation:
         {% set count = count + 1 %}
     {%- endfor -%}
     </div>
-<div class="text-xl pl-4 pr-1 grow-0 min-w-[4rem] font-bold order-2"></div>
+  </div>
 </div>
 
-<div class="mt-4">
+<div class="mt-4" id="list">
   {% set jahr = "" %}
   {%- for post in collections.posthumeausgaben -%}
     {% if post.data.Jahr !== jahr %}
@@ -36,11 +38,11 @@ eleventyNavigation:
         </div>
       {% endif %}
       {% set jahr = post.data.Jahr %}
-      <div class="flex flex-row w-full" id="{{ jahr }}">
-      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-0 order-2" >{{ jahr }}</div>
+      <div class="flex flex-row w-full category" id="{{ jahr }}">
+      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-20 order-2" >{{ jahr }}</div>
       <div class="px-4 border-r-2 grow py-2 border-slate-400">
     {% endif %}
-    <div class="mb-3 pl-6 -indent-6 max-w-[90ch]">{{ post.content | safe }}</div>
+    <div class="mb-3 pl-6 -indent-6 max-w-[90ch] searchable">{{ post.content | safe }}</div>
   {%- endfor -%}
   </div>
   </div>

src/dynamic/sekundaerliteratur.njk

@@ -16,8 +16,11 @@ eleventyNavigation:
     <p class="max-w-[80ch]">Hinweise auf neue Lenz-Publikationen werden dankbar aufgenommen; ebenso Ergänzungen und Korrekturen zur älteren Literatur. Das Lenz Archiv Heidelberg arbeitet daran, eine Forschungsbibliothek einzurichten, die möglichst alle hier verzeichneten Titel in Original oder Kopie umfasst. 
 </div>
 
-<div class="flex flex-row sticky top-0">
-<div class="z-10 border-r-2 border-slate-400 bg-emerald-100 px-4 py-2 self-start w-full">
+
+<div class="sticky top-0 z-20">
+  <div class="flex flex-row">
+    <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
+    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
     {% set jahr = "" %}
     {% set count = 1 %}
     <a href="#top">↑</a>&nbsp;&nbsp;
@@ -29,10 +32,10 @@ eleventyNavigation:
         {% set count = count + 1 %}
     {%- endfor -%}
     </div>
-<div class="text-xl pl-4 pr-1 grow-0 min-w-[4rem] font-bold order-2"></div>
+  </div>
 </div>
 
-<div class="mt-4">
+<div class="mt-4" id="list">
   {% set jahr = "" %}
   {%- for post in collections.sekundaer -%}
     {% if post.data.Jahr !== jahr %}
@@ -41,11 +44,11 @@ eleventyNavigation:
         </div>
       {% endif %}
       {% set jahr = post.data.Jahr %}
-      <div class="flex flex-row w-full" id="{{ jahr }}">
-      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-0 order-2" >{{ jahr }}</div>
+      <div class="flex flex-row w-full category" id="{{ jahr }}">
+      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-20 order-2" >{{ jahr }}</div>
       <div class="px-4 border-r-2 grow py-2 border-slate-400">
     {% endif %}
-    <div class="mb-3 pl-6 -indent-6 max-w-[90ch]">{{ post.content | safe }}</div>
+    <div class="mb-3 pl-6 -indent-6 max-w-[90ch] searchable">{{ post.content | safe }}</div>
   {%- endfor -%}
   </div>
   </div>

src/dynamic/selbstaendige_drucke.njk

@@ -12,8 +12,10 @@ eleventyNavigation:
     <p class="max-w-[80ch]">Neben den selbständig erschienenen Einzel- und Werkausgaben sind in Auswahl auch Textsammlungen zum Sturm und Drang mit umfangreicheren Lenz-Abteilungen aufgeführt.
 </div>
 
-<div class="flex flex-row sticky top-0">
-<div class="z-10 border-r-2 border-slate-400 bg-emerald-100 px-4 py-2 self-start w-full">
+<div class="sticky top-0 z-20">
+  <div class="flex flex-row">
+    <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
+    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
     {% set jahr = "" %}
     {% set count = 1 %}
     <a href="#top">↑</a>&nbsp;&nbsp;
@@ -25,10 +27,10 @@ eleventyNavigation:
         {% set count = count + 1 %}
     {%- endfor -%}
     </div>
-<div class="text-xl pl-4 pr-1 grow-0 min-w-[4rem] font-bold order-2"></div>
+  </div>
 </div>
 
-<div class="mt-4">
+<div class="mt-4" id="list">
   {% set jahr = "" %}
   {%- for post in collections.selbststaendigedrucke -%}
     {% if post.data.Jahr !== jahr %}
@@ -37,11 +39,11 @@ eleventyNavigation:
         </div>
       {% endif %}
       {% set jahr = post.data.Jahr %}
-      <div class="flex flex-row w-full" id="{{ jahr }}">
-      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-0 order-2" >{{ jahr }}</div>
+      <div class="flex flex-row w-full category" id="{{ jahr }}">
+      <div class="text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-20 order-2" >{{ jahr }}</div>
       <div class="px-4 border-r-2 grow py-2 border-slate-400">
     {% endif %}
-    <div class="mb-3 pl-6 -indent-6 max-w-[90ch]">{{ post.content | safe }}</div>
+    <div class="mb-3 pl-6 -indent-6 max-w-[90ch] searchable">{{ post.content | safe }}</div>
   {%- endfor -%}
   </div>
   </div>

src/dynamic/unselbststaendige_drucke.njk

@@ -16,7 +16,47 @@ eleventyNavigation:
     <p class="max-w-[80ch]"> Aufgenommen sind auch solche Texte, bei denen Lenz’ Autorschaft unsicher ist (gekennzeichnet mit „UZ“: Unsichere Zuschreibung). Dies betrifft – neben der Sammlung „Jupiter und Schinznach“ – zum einen Richard Daunichts Zuschreibungen für die „Frankfurter gelehrten Anzeigen“ und den „Teutschen Merkur“ (Richard Daunicht: J. M. R. Lenz und Wieland. Dresden 1942, S. 32-46, 99-105), zum anderen Beiträge in den beiden Mitauer Zeitschriften „Für Leser und Leserinnen“ und „Liefländisches Magazin der Lektüre“, für die seit dem 19. Jahrhundert von verschiedenen Seiten Lenz als Autor vermutet wird. Als Nachweis für die Zuschreibung in den beiden baltischen Periodika wird jeweils nur eine Referenz (nach Möglichkeit mit Abdruck des Textes) angeführt, ohne Berücksichtigung der Genealogie der Zuschreibungen und Wertung der Argumente. Die mit „UZ“ bezeichneten Einträge umfassen folglich auch ohne weitere Differenzierung Zuschreibungen mit verschieden hoher resp. niedriger Wahrscheinlichkeit.
 </div>
 
-<div class="z-10 bg-emerald-100 px-4 py-2 mb-4 w-full">
+<div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
+  {% set jahr = "" %}
+  {% set count = 1 %}
+  Veröffentlichungen in:&nbsp;&nbsp;
+  {%- for post in collections.unselbststaendigedrucke -%}
+      {% if count % 1 == 0 and jahr !== post.data.Werk %}
+          <a class="underline decoration-dotted" href="#{{ post.data.Werk }}">{{ post.data.Werk }}</a>&nbsp;&nbsp;
+          {% set jahr = post.data.Werk %}
+      {% endif %}
+      {% set count = count + 1 %}
+  {%- endfor -%}
+</div>
+
+<div class="sticky top-0 z-20">
+  <div class="flex flex-row z-10 bg-slate-100 px-4 py-2 self-start w-full items-baseline">
+    <a class="block" href="#top">↑</a>
+    <input class="grow ml-2 p-0.5 pl-1 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+  </div>
+</div>
+
+<div class="mt-4" id="list">
+  {% set jahr = "" %}
+  {%- for post in collections.unselbststaendigedrucke -%}
+    {% if post.data.Werk !== jahr %}
+      {% if jahr !== "" %}
+        </div>
+        </div>
+      {% endif %}
+      {% set jahr = post.data.Werk %}
+      <div class="flex flex-row mb-8 w-full category" id="{{ jahr }}">
+      <div class="text-xl pl-3 pr-1 grow font-bold self-start z-0 sticky top-16 order-2" >{{ jahr }}</div>
+      <div class="px-4 border-r-2 grow-0 shrink-0 w-[90ch] border-slate-400">
+    {% endif %}
+    <div class="mb-3 pl-6 -indent-6 max-w-[90ch] searchable">{{ post.content | safe }}</div>
+  {%- endfor -%}
+  </div>
+  </div>
+</div>
+
+
+{# <div class="z-10 bg-emerald-100 px-4 py-2 mb-4 w-full">
 {% set jahr = "" %}
 {% set count = 1 %}
 Veröffentlichungen in:&nbsp;&nbsp;
@@ -48,4 +88,4 @@ Veröffentlichungen in:&nbsp;&nbsp;
   {%- endfor -%}
   </div>
   </div>
-</div>
+</div> #}

src/includes/footer.njk

@@ -1,13 +1,16 @@
-<div class="bg-emerald-600 self-stretch grow pt-4 pb-1.5 px-3 flex flex-col">
+<div class="flex flex-col">
     <div class="grow">
+        <div class="bg-slate-50 border-t border-slate-600 py-5 px-4">
             <form class="text-lg flex flex-row w-full">
-        <input class="px-1.5 italic grow" type="text" placeholder="Suchbegriff..."/>
-        <button class="inline-block ml-2 px-2 border border-white text-white">Suche</button>
+            <input class="px-1.5 italic border border-slate-600 grow" type="text" placeholder="Suchbegriff..."/>
+            <button class="inline-block ml-2 px-2 border border-slate-600 ">Suche</button>
             </form>
         </div>
-    <div class="text-base text-center text-white">
+    </div>
+</div>
+<div class="grow bg-white"></div>
+<footer class="text-base text-center py-1 px-4 grow-0 shrink-0">
     Stand: 30.1.2023
     | <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="https://github.com/schnulller/jacoblenz">Code</a> | 
         <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="/datenschutz/">Datenschutz & Impressum</a>
-    </div>
-</div>
+</footer>

src/includes/header.njk

@@ -1,11 +1,11 @@
 
-<div class="pt-28 bg-slate-200">
-	<img class="px-12 pb-4 pt-8 bg-slate-50" src="/images/JLA.png" alt="jla-Logo">
-	<h1 class="px-3 py-2 text-5xl font-bold bg-slate-50 text-center">
+<header>
+	<img class="px-12 pb-4 pt-8" src="/images/JLA.png" alt="jla-Logo">
+	<h1 class="px-3 py-2 pb-4 text-5xl font-bold text-center">
 		{{ config.title }}
 	</h1>
-	<h2 class="pt-2  border-t-gray-200 pb-2 px-3 text-2xl text-white bg-emerald-600">
+	<h2 class="py-2 border-t-gray-200 px-5 text-2xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
 		{{ config.shortdescription }}
 		{# <br> Forschungsstelle zum Schriftsteller Jacob Michael Reinhold Lenz. #}
 	</h2>
-</div>
+</header>

src/includes/sidebar.njk

@@ -0,0 +1,3 @@
+{% include "header.njk" %}
+{% include "sidenav.njk" %}
+{% include "footer.njk" %}

src/includes/sidenav.njk

@@ -21,6 +21,8 @@
 </li>
 {%- endmacro %}
 
-<ul class="py-4 text-xl sidebar-nav">
+<nav class="py-4 text-xl sidebar-nav px-2">
+<ul>
 {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
 </ul>
+</nav>

src/layouts/base.njk

@@ -13,6 +13,8 @@
     <link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#}
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
     <link rel="apple-touch-icon" type="image/png" href="/favicon.png" />
+    <script src="/js/jquery.min.js"></script>
+    <script src="/js/jquery.mark.min.js"></script>
 
     <!-- Meta -->
     <meta name="description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
@@ -41,13 +43,12 @@
   </head>
   <body class="w-full h-full">
     <div class="
+      px-12
       max-w-screen-2xl
       mx-auto
       flex flex-row">
-      <aside class="shrink-0 grow-0 basis-[26rem] sticky -top-40 flex flex-col">
-          {% include "header.njk" %}
-          {% include "sidenav.njk" %}
-          {% include "footer.njk" %}
+      <aside class="shrink-0 grow-0 basis-[26rem] sticky top-0  max-h-screen min-h-screen flex flex-col bg-slate-50">
+          {% include "sidebar.njk" %}
       </aside>
 
       <main class="px-8 pt-[7.5rem] min-h-full">
@@ -63,5 +64,58 @@
       {% include "footer.njk" %}
       </div> #}
     </div>
+
+  <script>
+    let dictionary = [];
+    function createIndex(id){
+      $("#" + id + " .searchable").each( (ind, el) => {
+        dictionary.push({
+          category: $(el).parents(".category"),
+          element: el,
+          searchitem: $(el).text().toLowerCase()
+        });
+      });
+    }
+
+    function findWord(word){
+      var sw = word.trim().toLowerCase();
+      return dictionary.filter(function(e){
+        if (e.searchitem.indexOf(sw) !== -1) {
+          return true;
+        } else {
+          return false;
+        };
+      })
+    }
+
+
+  $(document).ready(function( $ ) {
+    if (document.getElementById("list")) {
+      let found = [];
+      createIndex("list");
+      $("input[name='keyword']").keyup(function() {
+        var term = $(this).val() || '';
+        if( term ) {
+          for (let item of found) {
+            $(item.element).unmark();
+          }
+          $("#list .category").hide();
+          $("#list .searchable").hide();
+          found = findWord( term );
+          for (let item of found) {
+              $(item.category).addClass("search-expanded").show();
+              $(item.element).show();
+              if (term.length >= 3) {
+                $(item.element).mark(term);
+              } 
+          }
+        } else {
+          $("#list .category").show().removeClass("search-expanded").unmark();
+          $("#list .searchable").show();
+        }
+      });
+    }
+  });
+  </script>
   </body>
 </html>

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,njk,yml,md}"],
+  content: ["./src/**/*.{html,js,njk,yml,md}", "./.eleventy.js"],
   theme: {
     fontFamily: {
       sans: ['Sofia Sans', 'sans-serif'],
@@ -34,7 +34,7 @@ module.exports = {
         'print': { 'raw': 'print' },
       },
       colors: {
-        'hamannHighlight': '#d80000',
+        'lenzHighlight': '#c00902',
         'hamannLightHighlight': '#cc7878',
         'hamannSlate': {
           50: '#6A829E',