@abreen/tada 1.8.1 → 1.10.1

package/src/question/style.scss

@@ -17,21 +17,23 @@
 
 .question-label,
 .question-a-label {
-  color: var(--theme-color-text);
-  font-weight: 700;
   flex-shrink: 0;
   margin: 0;
+  font-weight: 700;
+  color: var(--theme-color-text);
+
   @include user-select(none);
 }
 
 .question-q > span:last-child {
-  color: var(--fg-color);
   font-weight: var(--font-weight);
+  color: var(--fg-color);
 }
 
 .question-a-body {
   flex: 1;
   cursor: pointer;
+
   @include user-select(none);
 }
 
@@ -68,10 +70,10 @@
 
 .question-a-body:not([data-revealed]) > * {
   color: transparent;
+  pointer-events: none;
   background-color: var(--bg2-color);
   border-color: transparent;
   box-shadow: none;
-  pointer-events: none;
 }
 
 .question-a-body:not([data-revealed]) > * * {
@@ -82,13 +84,13 @@
 }
 
 .question-a-body::after {
-  content: 'Click to reveal';
   display: block;
   font-size: var(--font-size-small);
   font-style: italic;
   color: var(--fg2-color);
   text-align: center;
   pointer-events: none;
+  content: 'Click to reveal';
 
   @media (prefers-reduced-motion: no-preference) {
     transition: opacity 0.25s;
@@ -107,18 +109,20 @@
 
 .question-a-body[data-revealed] {
   cursor: unset;
+
   @include user-select(text);
 }
 
 @media print {
   .question-a-body {
     cursor: default;
+
     @include user-select(text);
 
     &:not([data-revealed]) > * {
       color: inherit;
-      background-color: transparent;
       pointer-events: auto;
+      background-color: transparent;
     }
 
     &:not([data-revealed]) > * * {

package/src/search/index.ts

@@ -1,6 +1,11 @@
 import { getElement, applyBasePath } from '../util';
 import { getPdfPageNumber, groupPdfResults } from './pdf-utils';
 import type { Result } from './pdf-utils';
+import {
+  getResponseValidators,
+  hasResponseValidatorsChanged,
+  type ResponseValidators,
+} from '../validators';
 
 const MAX_RESULTS = 24;
 
@@ -281,8 +286,7 @@ export default (window: Window) => {
   // Unhide (hidden via inline style in template to prevent FOUC)
   resultsDiv.style.display = '';
 
-  let entryETag: string | null = null;
-  let entryLastModified: string | null = null;
+  let entryValidators: ResponseValidators = { etag: null, lastModified: null };
   let lastIndexCheck = 0;
   let indexCheckInFlight = false;
 
@@ -302,8 +306,7 @@ export default (window: Window) => {
     });
 
     if (res.ok) {
-      entryETag = res.headers.get('ETag');
-      entryLastModified = res.headers.get('Last-Modified');
+      entryValidators = getResponseValidators(res);
     }
   }
 
@@ -321,14 +324,8 @@ export default (window: Window) => {
       if (!res.ok) {
         return;
       }
-      const newETag = res.headers.get('ETag');
-      const newLastModified = res.headers.get('Last-Modified');
-      const changed =
-        (newETag !== null && newETag !== entryETag) ||
-        (newETag === null &&
-          newLastModified !== null &&
-          newLastModified !== entryLastModified);
-      if (changed) {
+      const newValidators = getResponseValidators(res);
+      if (hasResponseValidatorsChanged(entryValidators, newValidators)) {
         pagefind = null;
         await loadPagefind();
         await update();

package/src/search/style.scss

@@ -4,8 +4,8 @@ header {
   .search-controls {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
     gap: 0.5rem;
+    align-items: center;
 
     input.search {
       flex: 1;
@@ -13,8 +13,8 @@ header {
   }
 
   .results-container.is-showing .results {
-    opacity: 1;
     pointer-events: all;
+    opacity: 1;
   }
 
   @media (hover: hover) {
@@ -25,45 +25,47 @@ header {
   }
 
   .results {
-    opacity: 0;
-    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+    max-height: 66vh;
     margin: 0 auto;
-    background: var(--bg-color);
+    overflow: hidden;
     color: var(--fg-color);
+    pointer-events: none;
+    background: var(--bg-color);
     border: var(--control-border-width) solid var(--fg2-color);
-    box-shadow: var(--box-shadow);
     border-radius: var(--border-radius);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    max-height: 66vh;
-    min-height: 80px;
+    box-shadow: var(--box-shadow);
+    opacity: 0;
+
     @include user-select(none);
 
     .results-info {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 8px;
       color: var(--fg2-color);
+
       @include user-select(none);
-      padding: 8px 8px 8px 8px;
-      position: relative;
 
       &.loading::after {
-        content: '';
         position: absolute;
+        right: 0;
         bottom: 0;
         left: 0;
-        right: 0;
         height: 2px;
+        content: '';
         background-image: linear-gradient(
           90deg,
           transparent 25%,
           var(--theme-color) 50%,
           transparent 75%
         );
-        background-size: 200% 100%;
         background-repeat: no-repeat;
+        background-size: 200% 100%;
         animation: shimmer 3s ease-in-out infinite;
       }
 
@@ -72,25 +74,25 @@ header {
         color: var(--fg2-color);
 
         kbd {
+          line-height: 1.4;
           border-color: var(--fg2-color);
           box-shadow: 0 2px 0 var(--fg2-color);
-          line-height: 1.4;
         }
       }
     }
 
     ol {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
       display: grid;
+      flex: 1;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       gap: 0;
-      overflow-y: auto;
-      flex: 1;
       min-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow-y: auto;
+      list-style-type: none;
 
-      @media (max-width: 580px) {
+      @media (width <= 580px) {
         grid-template-columns: minmax(0, 1fr);
       }
 
@@ -101,18 +103,18 @@ header {
       }
 
       a.result:focus {
-        background: var(--bg2-color);
         outline-offset: -2px;
+        background: var(--bg2-color);
       }
     }
 
     ol a {
-      text-decoration: none;
-      display: grid;
-      border: none;
       position: relative;
-      color: var(--fg-color);
+      display: grid;
       padding: 8px;
+      color: var(--fg-color);
+      text-decoration: none;
+      border: none;
 
       &:focus {
         outline-offset: -2px;
@@ -130,38 +132,38 @@ header {
     }
 
     ol a .title.code-page code {
-      background: none;
       padding: 0;
+      background: none;
     }
 
     ol li .excerpt {
       grid-row-start: 3;
-      font-size: var(--font-size-small);
-      color: var(--fg2-color);
-      line-height: 2.5ex;
       height: 7.5ex;
       overflow: hidden;
+      font-size: var(--font-size-small);
+      line-height: 2.5ex;
+      color: var(--fg2-color);
 
       mark {
-        background: transparent;
         font-weight: 600;
         color: var(--theme-color-text);
+        background: transparent;
       }
     }
 
     ol li .sub-results {
-      list-style-type: none;
-      margin: 0;
-      padding: 0 8px 6px 8px;
       display: flex;
       flex-direction: column;
       gap: 2px;
+      padding: 0 8px 6px;
+      margin: 0;
+      list-style-type: none;
 
       a.sub-result {
         display: block;
         padding: 4px 8px;
-        text-decoration: none;
         color: var(--fg2-color);
+        text-decoration: none;
         border-left: 2px solid var(--bg2-color);
 
         &:hover {
@@ -169,8 +171,8 @@ header {
         }
 
         &:focus {
-          background: var(--bg2-color);
           outline-offset: -2px;
+          background: var(--bg2-color);
         }
 
         .title {
@@ -180,16 +182,16 @@ header {
         }
 
         .excerpt {
-          font-size: var(--font-size-small);
-          color: var(--fg2-color);
-          line-height: 2.5ex;
           height: 2.5ex;
           overflow: hidden;
+          font-size: var(--font-size-small);
+          line-height: 2.5ex;
+          color: var(--fg2-color);
 
           mark {
-            background: transparent;
             font-weight: 600;
             color: var(--theme-color-text);
+            background: transparent;
           }
         }
       }