Undo print view after printing, a11y, styling and prettier

proxychain/responsemodifiers/vendor/generate_readable_outline.html

@@ -23,6 +23,26 @@
         }
       };
       handleThemeChange();
+      function prepareForPrint() {
+        document.getElementById("readingtime").innerText =
+          "Date Accessed: " +
+          new Date().toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          });
+        [...document.querySelectorAll(".noprint")].forEach((e) =>
+          e.classList.toggle("hidden")
+        );
+        window.addEventListener("afterprint", handleAfterPrint);
+        window.print();
+      }
+      function handleAfterPrint() {
+        [...document.querySelectorAll(".noprint")].forEach((e) =>
+          e.classList.toggle("hidden")
+        );
+        window.removeEventListener("afterprint", handleAfterPrint);
+      }
     </script>
     <title>ladder | {{.Title}}</title>
   </head>
@@ -35,7 +55,6 @@
         <div
           class="hover:drop-shadow-[0_0px_4px_rgba(122,167,209,.3)] transition-colors duration-300 focus:outline-none focus:ring focus:border-[#7AA7D1] ring-offset-2"
         >
-
           <div class="flex">
             <a
               href="/"
@@ -62,10 +81,11 @@
               href="/https://{{.Hostname}}"
               class="flex ml-1 h-8 font-extrabold tracking-tight no-underline focus:outline-none focus:ring focus:border-[#7AA7D1] ring-offset-2"
             >
-            <span class="text-3xl mr-1 text-[#7AA7D1] leading-8 align-middle">{{.Sitename}}</span>
+              <span class="text-3xl mr-1 text-[#7AA7D1] leading-8 align-middle"
+                >{{.Sitename}}</span
+              >
             </a>
           </div>
-
         </div>
 
         <div class="noprint flex justify-center z-10">
@@ -73,10 +93,10 @@
             <button
               aria-expanded="false"
               id="dropdownButton"
-              aria-label="Toggle dropdown menu"
+              aria-label="Toggle preferences menu"
               onclick="toggleDropdown()"
               type="button"
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
+              class="inline-flex items-center justify-center align-middle whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -96,12 +116,22 @@
             </button>
 
             <button
-              aria-expanded="closed"
+              aria-expanded="false"
-              onclick="document.getElementById('readingtime').innerText = 'Date Accessed: '+(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })); [...document.querySelectorAll('.noprint')].forEach(e => e.remove()); window.print()"
+              title="Print"
+              onclick="prepareForPrint()"
               type="button"
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
+              class="inline-flex items-center justify-center align-middle whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
             >
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512"><path d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 512 512"
+                class="h-4 w-4"
+              >
+                <path
+                  d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
+                />
+              </svg>
             </button>
 
             <div
@@ -327,29 +357,29 @@
 
       <main class="flex flex-col space-y-3">
         {{if not .Success}}
-        <h1>
+        <h1>Error</h1>
-          Error
-        </h1>
         <p>
           There was a problem querying
           <a href="{{.Params}}">{{.Params}}</a>
         </p>
-        <code class="text-red-500 dark:text-red-400">
+        <code class="text-red-500 dark:text-red-400"> {{.Error}} </code>
-          {{.Error}}
-        </code>
         {{else}}
 
         <div class="flex flex-col gap-1 mt-3">
           <h1>
-            <a href="{{.Url}}" class="text-slate-900 dark:text-slate-200 no-underline hover:underline"> {{.Title}} </a>
+            <a
+              href="{{.Url}}"
+              class="text-slate-900 dark:text-slate-200 no-underline hover:underline"
+            >
+              {{.Title}}
+            </a>
           </h1>
           {{if ne .Date ""}}
           <small
             class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
             >{{.Date}}</small
           >
-          {{end}} 
+          {{end}} {{if ne .Author ""}}
-          {{if ne .Author ""}}
           <small
             class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
             >{{.Author}}</small
@@ -358,31 +388,49 @@
         </div>
 
         <h2>
-          <a href="{{.Url}}" class="text-slate-900 dark:text-slate-200"> {{.Title}} </a>
+          <a
+            href="{{.Url}}"
+            class="text-slate-900 dark:text-slate-200 no-underline hover:underline"
+          >
+            {{.Title}}
+          </a>
         </h2>
 
         <div class="flex justify-between items-center gap-1 mt-3">
-
-
           <div>
             {{if ne .Author ""}}
-            <small class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">{{.Author}} | </small>
+            <small
-            {{end}}
+              class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
-
+              >{{.Author}} |
-            {{if ne .Date ""}}
+            </small>
-            <small class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">{{.Date}}</small>
+            {{end}} {{if ne .Date ""}}
+            <small
+              class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
+              >{{.Date}}</small
+            >
             {{end}}
           </div>
 
           <div>
-            <small id="readingtime" class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">Reading Time: {{.ReadingTime}}</small>
+            <small
+              id="readingtime"
+              class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
+              >Reading Time: {{.ReadingTime}}</small
+            >
           </div>
         </div>
         <div class="flex flex-col space-y-3">
-          <div>
           <div class="grid grid-cols-1 justify-items-center">
-            <div><img src="{{.Image}}" alt="{{.Description}}" class="h-auto w-auto object-cover max-w-full mx-auto rounded-md shadow-md dark:shadow-slate-700"/></div>
+            <div>
-            <div class="mt-2 text-sm text-slate-600 dark:text-slate-400">{{.Description}}</div>
+              <img
+                src="{{.Image}}"
+                alt="{{.Description}}"
+                class="h-auto w-auto object-cover max-w-full mx-auto rounded-md shadow-md dark:shadow-slate-700"
+              />
+            </div>
+            <div class="mt-2 text-sm text-slate-600 dark:text-slate-400">
+              {{.Description}}
+            </div>
           </div>
         </div>
 
@@ -390,9 +438,9 @@
         {{end}}
       </main>
 
-      <div class="my-2"></div>
+      <footer
-      <footer class="noprint mx-4 my-2 pt-2 border-t border-gray-300 dark:border-gray-700 text-center text-slate-600 dark:text-slate-400">
+        class="noprint mx-4 my-2 pt-2 border-t border-gray-300 dark:border-gray-700 text-center text-slate-600 dark:text-slate-400"
-
+      >
         <small>
           <a
             href="https://github.com/everywall"
@@ -408,8 +456,6 @@
           | Code Licensed Under GPL v3.0
         </small>
       </footer>
-      <div class="my-2"></div>
     </div>
-
   </body>
 </html>