jekyll-theme-amethyst 1.1.0 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d266106998f837dc87b9400d550b909e8d3c34d57bd3b4f0b1f38e3dc5c3d03b
-  data.tar.gz: e5b5cd9501161c5221b4bd43b336202e0b0b22a77a6b2fcc77a5177e50e93d93
+  metadata.gz: dd713f104c3f11d0bbf936b256059ac16abed6d63e3bfe4d3641cf1d7bd0cf9d
+  data.tar.gz: 9eb9b32ecd778b4a10ffa708c3ef3176bc574b4a540dd90682a404aec69aaa9f
 SHA512:
-  metadata.gz: 0e4fa532ac951cbec039e6611db5924e57b50baea29fd8deaa7fc9d24568d3db18cbec26e2bcfe158dd1a46be5b52aad730a748ea2ba66f50e0be9c5f40d927d
-  data.tar.gz: 70e27c6890f693c2b9c10fc0bf3d13915d2ca0146a916058ddafac5bf82809bc398ea270df69019a98cfde33d5ef38854c47d4f5fa060c3b8ccab57abb58d80d
+  metadata.gz: 88ea9945ef9a71a0f3bdb14cfdf932c90a5a6c7209e687fcd19377be5b3099eb74fcea5d066cf23b20964bdee42b683a3e06ba332cd92f9b9523aa1a064b7241
+  data.tar.gz: ca19314005d3446128363a3c5b24475a1cbf1f8443f6c98dd5928ebc10d25b54a584dce38e4e2fa8318b76438057a945e0f9f94fa68bfdabcf7e46116da49ad7

data/_includes/search.html

@@ -1,6 +1,6 @@
-<form role="search" class="tsmb-form"{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %} action="https://duckduckgo.com">
+<typesense-minibar{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %}>
+<form role="search" action="https://duckduckgo.com">
     <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
     <input type="hidden" name="sites" value="{{ site.url | remove_first: 'http://' | remove_first: 'https://' }}">
 </form>
-
-
+</typesense-minibar>

data/_layouts/wrapper.html

@@ -49,7 +49,7 @@
                 </button>
                 <script type="module">
                 const searchToggle = document.querySelector('.search-toggle');
-                const searchForm = document.querySelector('form[role=search]');
+                const searchForm = document.querySelector('typesense-minibar');
                 const searchInput = searchForm.querySelector('input[type=search]');
                 function searchFn(newState) {
                     searchToggle.setAttribute('aria-expanded', String(newState));

data/_sass/amethyst.scss

@@ -464,7 +464,7 @@ table {
 
 /* Search */
 
-.tsmb-form {
+typesense-minibar {
     --tsmb-color-base-background: #{lighten($color-accent, 12%)};
     --tsmb-color-primary30: #{$color-accent};
     --tsmb-color-primary50: #{$color-vibrant};
@@ -473,22 +473,26 @@ table {
     --tsmb-color-base50: #{change-color($color-bright, $alpha: 0.6)}; // #a98dc1
     --tsmb-color-base90: #{change-color($color-bright, $alpha: 0.6)};
 
-    width: auto;
     flex: 1;
     align-self: center;
 }
-.tsmb-form:not(:focus-within)::before {
+typesense-minibar form {
+    width: auto;
+}
+typesense-minibar form:not(:focus-within)::before {
   filter: unquote("invert()");
 }
-.tsmb-form input[type="search"] {
+typesense-minibar input[type="search"] {
   border: none;
 }
 @media (max-width: $screen-m) {
-    .tsmb-form {
-        display: none;
+    typesense-minibar {
+        --tsmb-size-input: calc( var(--tsmb-size-base) * 2.0 );
+
         flex: 100%;
         order: 10;
-        --tsmb-size-input: calc( var(--tsmb-size-base) * 2.0 );
+        /* changed by button.search-toggle in wrapper.html */
+        display: none;
     }
 }
 

data/_sass/typesense-minibar.css

@@ -1,5 +1,6 @@
-/*! https://github.com/jquery/typesense-minibar 1.2.0 */
-.tsmb-form {
+/*! https://github.com/jquery/typesense-minibar 1.3.2 */
+.tsmb-form,
+typesense-minibar {
   --tsmb-size-edge: 1px;
   --tsmb-size-radius: 3px;
   --tsmb-size-highlight: 2px;
@@ -23,7 +24,10 @@
   --tsmb-color-primary30: #390f39;
   --tsmb-color-primary50: #9c3493;
   --tsmb-color-primary90: #fbdbfb;
+}
 
+.tsmb-form,
+typesense-minibar form {
   position: relative;
   width: 20rem;
   max-width: 100%;
@@ -31,7 +35,8 @@
   color: var(--tsmb-color-base30);
 }
 
-.tsmb-form input[type=search] {
+.tsmb-form input[type=search],
+typesense-minibar input[type=search] {
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -46,31 +51,40 @@
   line-height: var(--tsmb-size-input);
 }
 
-.tsmb-form input[type=search]::placeholder {
+.tsmb-form input[type=search]::placeholder,
+typesense-minibar input[type=search]::placeholder {
   color: var(--tsmb-color-base50);
   opacity: 1;
 }
 
-.tsmb-form:focus-within {
+.tsmb-form:focus-within,
+typesense-minibar form:focus-within {
   color: var(--tsmb-color-focus30);
 }
 
-.tsmb-form:focus-within input[type=search] {
+.tsmb-form:focus-within input[type=search],
+typesense-minibar:focus-within input[type=search] {
   background: var(--tsmb-color-focus-background);
 }
 
-.tsmb-form:focus-within input[type=search]::placeholder {
+.tsmb-form:focus-within input[type=search]::placeholder,
+typesense-minibar:focus-within input[type=search]::placeholder {
   color: var(--tsmb-color-focus50);
 }
 
 .tsmb-form input[type=search]::-webkit-search-decoration,
 .tsmb-form input[type=search]::-webkit-search-cancel-button,
 .tsmb-form input[type=search]::-webkit-search-results-button,
-.tsmb-form input[type=search]::-webkit-search-results-decoration {
+.tsmb-form input[type=search]::-webkit-search-results-decoration,
+typesense-minibar input[type=search]::-webkit-search-decoration,
+typesense-minibar input[type=search]::-webkit-search-cancel-button,
+typesense-minibar input[type=search]::-webkit-search-results-button,
+typesense-minibar input[type=search]::-webkit-search-results-decoration {
   display: none;
 }
 
-.tsmb-form::before {
+.tsmb-form::before,
+typesense-minibar form::before {
   content: '';
   background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='654 -372 1664 1664' width='20' height='20'><path d='M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z'/></svg>") 0 50% / contain no-repeat;
   position: absolute;
@@ -128,7 +142,8 @@
   color: var(--tsmb-color-base90);
 }
 
-.tsmb-form [role=listbox] {
+.tsmb-form [role=listbox],
+typesense-minibar [role=listbox] {
   position: absolute;
   z-index: 10;
   right: var(--tsmb-size-listbox-right);
@@ -149,29 +164,35 @@
   border-bottom: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
 
-.tsmb-form [role=option] a {
+.tsmb-form [role=option] a,
+typesense-minibar [role=option] a {
   display: block;
   padding: var(--tsmb-size-base);
   text-decoration: none;
   border-left: var(--tsmb-size-highlight) solid transparent;
 }
 
-.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a {
+.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a,
+typesense-minibar:not([data-group=true]) [role=option]:not(:first-child) a {
   border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
 
-.tsmb-form[data-group=true] [role=option] a {
+.tsmb-form[data-group=true] [role=option] a,
+typesense-minibar[data-group=true] [role=option] a {
   margin: 0 var(--tsmb-size-base);
   padding: var(--tsmb-size-sm);
 }
 
 .tsmb-form [role=option] a:hover,
-.tsmb-form [role=option][aria-selected=true] a {
+.tsmb-form [role=option][aria-selected=true] a,
+typesense-minibar [role=option] a:hover,
+typesense-minibar [role=option][aria-selected=true] a {
   background: var(--tsmb-color-primary90);
   border-left-color: var(--tsmb-color-primary50);
 }
 
-.tsmb-form [role=option] mark {
+.tsmb-form [role=option] mark,
+typesense-minibar [role=option] mark {
   background: none;
   color: inherit;
   font-style: normal;
@@ -189,7 +210,8 @@
 .tsmb-suggestion_title {
   color: var(--tsmb-color-primary30);
 }
-.tsmb-form[data-group=true] .tsmb-suggestion_title {
+.tsmb-form[data-group=true] .tsmb-suggestion_title,
+typesense-minibar[data-group=true] .tsmb-suggestion_title {
   font-weight: bold;
   font-size: var(--tsmb-size-sm);
 }

data/assets/typesense-minibar.js

@@ -1,7 +1,5 @@
-/*! https://github.com/jquery/typesense-minibar 1.2.0 */
-globalThis.tsminibar = function tsminibar (form) {
-  const { origin, collection } = form.dataset;
-  const group = !!form.dataset.group;
+/*! https://github.com/jquery/typesense-minibar 1.3.2 */
+globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
   const cache = new Map();
   const state = { query: '', cursor: -1, open: false, hits: [] };
   const searchParams = new URLSearchParams({
@@ -14,10 +12,10 @@ globalThis.tsminibar = function tsminibar (form) {
     sort_by: 'item_priority:desc',
     snippet_threshold: '8',
     highlight_affix_num_tokens: '12',
-    'x-typesense-api-key': form.dataset.key,
-    ...Object.fromEntries(new URLSearchParams(form.dataset.searchParams))
+    'x-typesense-api-key': dataset.key,
+    ...Object.fromEntries(new URLSearchParams(dataset.searchParams))
   });
-  const noResults = form.dataset.noResults || "No results for '{}'.";
+  const noResults = dataset.noResults || "No results for '{}'.";
 
   const input = form.querySelector('input[type=search]');
   const listbox = document.createElement('div');
@@ -31,7 +29,7 @@ globalThis.tsminibar = function tsminibar (form) {
       preconnect = document.createElement('link');
       preconnect.rel = 'preconnect';
       preconnect.crossOrigin = 'anonymous'; // match fetch cors,credentials:omit
-      preconnect.href = origin;
+      preconnect.href = dataset.origin;
       document.head.append(preconnect);
     }
     if (!state.open && state.hits.length) {
@@ -42,7 +40,7 @@ globalThis.tsminibar = function tsminibar (form) {
   input.addEventListener('input', async function () {
     const query = state.query = input.value;
     if (!query) {
-      state.hits = []; // don't leak old hits on focus
+      state.hits = [];
       state.cursor = -1;
       return close();
     }
@@ -72,7 +70,7 @@ globalThis.tsminibar = function tsminibar (form) {
     }
   });
   form.addEventListener('submit', function (e) {
-    e.preventDefault(); // disable fallback
+    e.preventDefault();
   });
   form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" class="tsmb-icon-close" style="display: none;"><path d="M9 3L3 9M3 3L9 9"/></svg>');
   form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
@@ -92,7 +90,7 @@ globalThis.tsminibar = function tsminibar (form) {
 
   function connect () {
     document.addEventListener('click', onDocClick);
-    if (form.dataset.slash !== 'false') {
+    if (dataset.slash !== 'false') {
       document.addEventListener('keydown', onDocSlash);
       form.classList.add('tsmb-form--slash');
     }
@@ -124,9 +122,10 @@ globalThis.tsminibar = function tsminibar (form) {
     }
     searchParams.set('q', query);
     const resp = await fetch(
-      `${origin}/collections/${collection}/documents/search?` + searchParams,
+      `${dataset.origin}/collections/${dataset.collection}/documents/search?` + searchParams,
       { mode: 'cors', credentials: 'omit', method: 'GET' }
     );
+    const group = !!dataset.group;
     const data = await resp.json();
     hits = data?.grouped_hits?.map(ghit => {
       const hit = ghit.hits[0];
@@ -151,14 +150,11 @@ globalThis.tsminibar = function tsminibar (form) {
   function render () {
     listbox.hidden = !state.open;
     form.classList.toggle('tsmb-form--open', state.open);
-    if (state.open) {
-      listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
-    }
+    listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
   }
 
   function moveCursor (offset) {
     state.cursor += offset;
-    // -1 refers to input field
     if (state.cursor >= state.hits.length) state.cursor = -1;
     if (state.cursor < -1) state.cursor = state.hits.length - 1;
     render();
@@ -166,4 +162,10 @@ globalThis.tsminibar = function tsminibar (form) {
 
   return { form, connect, disconnect };
 };
+window.customElements.define('typesense-minibar', class extends HTMLElement {
+  connectedCallback () {
+    const form = this.querySelector('form');
+    if (form && this.dataset.origin) tsminibar(form, this.dataset);
+  }
+});
 document.querySelectorAll('.tsmb-form[data-origin]').forEach(form => tsminibar(form));

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-amethyst
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.1
 platform: ruby
 authors:
 - Timo Tijhof
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-02 00:00:00.000000000 Z
+date: 2024-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll