custom styling, search & socials

- fuzzysort search instead of fuse.js
- add youtube + instagram socials
- paypal button styles
- column styles
- audio card styles

assets/js/app.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

assets/js/helpers.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[151],{769:(e,t,a)=>{a.d(t,{dZ:()=>n,e:()=>o,eS:()=>l,ej:()=>c,p6:()=>s,tq:()=>i});var n=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},s=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},o=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,a=e.length;t<a;t++){var n=e[t].closest(".kg-gallery-image"),i=e[t].attributes.width.value/e[t].attributes.height.value;n.style.flex="".concat(i," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},c=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},214:()=>{},550:()=>{},823:()=>{},140:()=>{},521:()=>{},305:()=>{},672:()=>{}},e=>{var t=t=>e(e.s=t);e.O(0,[459,698,724,449,170,87,882],(()=>(t(769),t(823),t(140),t(521),t(305),t(672),t(214),t(550))));e.O()}]);
+"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[151],{769:(e,t,a)=>{a.d(t,{dZ:()=>i,e:()=>n,eS:()=>l,ej:()=>o,tq:()=>s});var i=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},s=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},n=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,a=e.length;t<a;t++){var i=e[t].closest(".kg-gallery-image"),s=e[t].attributes.width.value/e[t].attributes.height.value;i.style.flex="".concat(s," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},o=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},214:()=>{},550:()=>{},823:()=>{},140:()=>{},521:()=>{},305:()=>{},672:()=>{}},e=>{var t=t=>e(e.s=t);e.O(0,[459,698,724,449,170,87,882],(()=>(t(769),t(823),t(140),t(521),t(305),t(672),t(214),t(550))));e.O()}]);

assets/js/page.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[321],{769:(e,t,n)=>{n.d(t,{dZ:()=>a,e:()=>s,eS:()=>l,ej:()=>r,p6:()=>o,tq:()=>i});var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},o=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),i=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(i," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},r=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},209:(e,t,n)=>{var a=n(755),i=n.n(a),o=n(729),s=n.n(o),l=n(557),r=n(769);i()((function(){s()(".js-post-content"),(0,r.e)(),(0,r.eS)(i()),(0,r.ej)(i(),l.Z)}))}},e=>{e.O(0,[898],(()=>{return t=209,e(e.s=t);var t}));e.O()}]);
+"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[321],{769:(e,t,a)=>{a.d(t,{dZ:()=>n,e:()=>i,eS:()=>o,ej:()=>l,tq:()=>s});var n=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},s=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,a=e.length;t<a;t++){var n=e[t].closest(".kg-gallery-image"),s=e[t].attributes.width.value/e[t].attributes.height.value;n.style.flex="".concat(s," 1 0%")}},o=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},209:(e,t,a)=>{var n=a(755),s=a.n(n),i=a(729),o=a.n(i),l=a(557),r=a(769);s()((function(){o()(".js-post-content"),(0,r.e)(),(0,r.eS)(s()),(0,r.ej)(s(),l.Z)}))}},e=>{e.O(0,[898],(()=>{return t=209,e(e.s=t);var t}));e.O()}]);

assets/js/post.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>a,e:()=>s,eS:()=>r,ej:()=>l,p6:()=>i,tq:()=>o});var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},r=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},717:(e,t,n)=>{var a=n(755),o=n.n(a),i=n(557),s=n(729),r=n.n(s),l=n(433),c=n(911),u=(n(350),n(769)),d=null,m=null,h=window.pageYOffset,f=0,g=0,p=0,w=!1,v=function(){h=window.pageYOffset,b()},y=function(e){(0,u.tq)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-animate")}),e)):o()("body").removeClass("share-menu-displayed")},k=function(){C(),y(100),setTimeout((function(){x(),b()}),200)},b=function(){w||requestAnimationFrame(j),w=!0},j=function(){var e=g-f,t=Math.ceil(h/e*100);t<=100&&T(t),w=!1},C=function(){f=window.innerHeight,g=o()(document).height()},x=function(){var e=m.parent().width(),t=e/2,n=(0,u.tq)()?2:3;m.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),m.attr("stroke-width",n),m.attr("r",t-(n-1)),m.attr("cx",t),m.attr("cy",t),p=2*t*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p},T=function(e){if(e<=100){var t=p-e/100*p;m[0].style.strokeDashoffset=t}};o()((function(){d=o()(".js-animation-wrapper");var e=o()(".js-scrolltop"),t=o()(".js-recommended-slider");if(r()(".js-post-content"),(0,u.e)(),y(1e3),t.length>0)new c.ZP(".js-recommended-slider",{modules:[c.W_,c.s5],navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},slidesPerView:1,allowTouchMove:!0,loop:!0,a11y:!0,breakpoints:{720:{slidesPerView:2,allowTouchMove:!0,loop:!0},1024:{slidesPerView:3,allowTouchMove:!1,loop:!1}},on:{init:function(){(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250)}}});(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250),e.on("click",(function(){o()("html, body").animate({scrollTop:0},500)})),(0,u.eS)(o()),(0,u.ej)(o(),i.Z),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),o()(window).on("load",(function(){m=o()(".js-progress"),C(),x(),j(),setTimeout((function(){m.parent().css("opacity",1)}),300)}))}},e=>{e.O(0,[898],(()=>{return t=717,e(e.s=t);var t}));e.O()}]);
+"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>a,e:()=>o,eS:()=>s,ej:()=>r,tq:()=>i});var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},o=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),i=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(i," 1 0%")}},s=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},r=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},717:(e,t,n)=>{var a=n(755),i=n.n(a),o=n(557),s=n(729),r=n.n(s),l=n(433),c=n(911),u=(n(350),n(769)),d=null,h=null,f=window.pageYOffset,m=0,p=0,g=0,w=!1,v=function(){f=window.pageYOffset,y()},k=function(e){(0,u.tq)("1023px")?(i()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-animate")}),e)):i()("body").removeClass("share-menu-displayed")},b=function(){C(),k(100),setTimeout((function(){x(),y()}),200)},y=function(){w||requestAnimationFrame(j),w=!0},j=function(){var e=p-m,t=Math.ceil(f/e*100);t<=100&&T(t),w=!1},C=function(){m=window.innerHeight,p=i()(document).height()},x=function(){var e=h.parent().width(),t=e/2,n=(0,u.tq)()?2:3;h.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),h.attr("stroke-width",n),h.attr("r",t-(n-1)),h.attr("cx",t),h.attr("cy",t),g=2*t*Math.PI,h[0].style.strokeDasharray="".concat(g," ").concat(g),h[0].style.strokeDashoffset=g},T=function(e){if(e<=100){var t=g-e/100*g;h[0].style.strokeDashoffset=t}};i()((function(){d=i()(".js-animation-wrapper");var e=i()(".js-scrolltop"),t=i()(".js-recommended-slider");if(r()(".js-post-content"),(0,u.e)(),k(1e3),t.length>0)new c.ZP(".js-recommended-slider",{modules:[c.W_,c.s5],navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},slidesPerView:1,allowTouchMove:!0,loop:!0,a11y:!0,breakpoints:{720:{slidesPerView:2,allowTouchMove:!0,loop:!0},1024:{slidesPerView:3,allowTouchMove:!1,loop:!1}},on:{init:function(){(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250)}}});(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250),e.on("click",(function(){i()("html, body").animate({scrollTop:0},500)})),(0,u.eS)(i()),(0,u.ej)(i(),o.Z),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",b,{passive:!0})})),i()(window).on("load",(function(){h=i()(".js-progress"),C(),x(),j(),setTimeout((function(){h.parent().css("opacity",1)}),300)}))}},e=>{e.O(0,[898],(()=>{return t=717,e(e.s=t);var t}));e.O()}]);

assets/js/vendor.js.LICENSE.txt

@@ -0,0 +1,35 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * headroom.js v0.12.0 - Give your page some headroom. Hide your header until you need it
+ * Copyright (c) 2020 Nick Williams - http://wicky.nillia.ms/headroom.js
+ * License: MIT
+ */
+
+/*!
+ * jQuery JavaScript Library v3.7.0
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-05-11T18:29Z
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! medium-zoom 1.0.8 | MIT License | https://github.com/francoischalifour/medium-zoom */
+
+/**
+  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
+  @version v2.5.10
+  @link https://github.com/yowainwright/shave#readme
+  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
+  @license MIT
+**/

package.json

@@ -58,6 +58,12 @@
         "type": "text",
         "default": "/newsletter",
         "group": "homepage"
+      },
+      "youtube_url": {
+        "type": "text"
+      },
+      "instagram_url": {
+        "type": "text"
       }
     }
   },

partials/footer.hbs

@@ -10,6 +10,18 @@ This footer template is shared across all the pages.
       </nav>
     {{/if}}
     <nav class="m-footer-social">
+      {{!-- pyv --}}
+      {{#if @custom.youtube_url}}
+        <a href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube">
+          <span class="icon-youtube" aria-hidden="true"></span>
+        </a>
+      {{/if}}
+      {{#if @custom.instagram_url}}
+        <a href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram">
+          <span class="icon-instagram" aria-hidden="true"></span>
+        </a>
+      {{/if}}
+      {{!-- /pyv --}}
       {{#if @site.facebook}}
         <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
           <span class="icon-facebook" aria-hidden="true"></span>
@@ -26,11 +38,14 @@ This footer template is shared across all the pages.
     </nav>
     <p class="m-footer-copyright">
       <span>{{@site.title}} &copy; {{date format="YYYY"}}</span>
-      <span>&nbsp; &bull; &nbsp;</span>
+      {{!-- pyv --}}
-      <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a></span>
+      {{!-- <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a></span> --}}
+      {{!-- /pyv --}}
     </p>
-    <p class="m-footer-copyright jslicense">
+    {{!-- pyv --}}
+    {{!-- <p class="m-footer-copyright jslicense">
       <a href="{{asset "html/javascript.html"}}" rel="jslicense">{{t "JavaScript license information"}}</a>
-    </p>
+    </p> --}}
+    {{!-- /pyv --}}
   </div>
 </footer>

partials/header.hbs

@@ -53,6 +53,9 @@ This header template is shared across all the pages.
                 {{navigation}}
               {{/if}}
               {{#if @site.secondary_navigation}}
+                {{!-- pyv: concatenate primary & secondary nav on mobile --}}
+                {{navigation type="secondary"}}
+                {{!-- /pyv --}}
                 <li class="more">
                   <span>
                     <a href="javascript:void(0);" class="js-open-secondary-menu">
@@ -118,6 +121,26 @@ This header template is shared across all the pages.
             </ul>
           </nav>
           <div class="m-nav__right">
+            {{!-- pyv --}}
+            {{#if @custom.youtube_url}}
+              <a href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube"
+                class="m-icon-button in-menu-main">
+                <span class="icon-youtube" aria-hidden="true"></span>
+              </a>
+            {{/if}}
+            {{#if @custom.instagram_url}}
+              <a href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram"
+                class="m-icon-button in-menu-main">
+                <span class="icon-instagram" aria-hidden="true"></span>
+              </a>
+            {{/if}}
+            {{#if @site.facebook}}
+              <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook"
+                class="m-icon-button in-menu-main">
+                <span class="icon-facebook" aria-hidden="true"></span>
+              </a>
+            {{/if}}
+            {{!-- /pyv --}}
             <button class="m-icon-button in-menu-main {{^if @custom.enable_native_search}}js-open-search{{/if}}" {{#if @custom.enable_native_search}}data-ghost-search{{/if}} aria-label="{{t "Open search"}}">
               <span class="icon-search" aria-hidden="true"></span>
             </button>

src/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: "node-modules"

src/js/app.js

@@ -4,7 +4,9 @@ import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import shave from 'shave';
 import GhostContentAPI from '@tryghost/content-api';
-import Fuse from 'fuse.js/dist/fuse.basic.esm.min.js';
+/* pyv */
+import fuzzysort from 'fuzzysort';
+/* /pyv */
 import Swiper, { FreeMode, A11y } from 'swiper';
 import 'swiper/css';
 import { isRTL, formatDate, isMobile } from './helpers';
@@ -40,7 +42,9 @@ $(() => {
   const $nativeComments = $('.js-native-comments > div > iframe')[0];
   const currentSavedTheme = localStorage.getItem('theme');
 
-  let fuse = null;
+  /* pyv */
+  let allPages = null;
+  /* /pyv */
   let submenuIsOpen = false;
   let secondaryMenuTippy = null;
 
@@ -76,38 +80,30 @@ $(() => {
     }
   };
 
-  const getAllPosts = (host, key) => {
+  const getAllPosts = async (host, key) => {
     const api = new GhostContentAPI({
       url: host,
       key,
-      version: 'v5.0'
+      version: 'v5.0',
     });
-    const allPosts = [];
-    const fuseOptions = {
-      shouldSort: true,
-      ignoreLocation: true,
-      findAllMatches: true,
-      includeScore: true,
-      minMatchCharLength: 2,
-      keys: ['title', 'custom_excerpt', 'tags.name']
-    };
 
-    api.posts
+    /* pyv */
-      .browse({
+    try {
-        limit: 'all',
+      const posts = await api.posts.browse({
-        include: 'tags',
+          limit: 'all',
-        fields: 'id, title, url, published_at, custom_excerpt'
+          include: 'tags',
-      })
+          fields: 'id, title, url, published_at, plaintext',
-      .then(posts => {
+        }),
-        for (let i = 0, len = posts.length; i < len; i++) {
+        pages = await api.pages.browse({
-          allPosts.push(posts[i]);
+          limit: 'all',
-        }
+          include: 'tags',
-
+          fields: 'id, title, url, published_at, plaintext',
-        fuse = new Fuse(allPosts, fuseOptions);
+        });
-      })
+      allPages = [...pages, ...posts];
-      .catch(err => {
+    } catch (err) {
-        console.log(err);
+      console.log(err);
-      });
+    }
+    /* /pyv */
   };
 
   const toggleDesktopTopbarOverflow = disableOverflow => {
@@ -159,28 +155,51 @@ $(() => {
   });
 
   $inputSearch.on('keyup', () => {
-    if ($inputSearch.val().length > 0 && fuse) {
+    /* pyv */
-      const results = fuse.search($inputSearch.val());
+    if ($inputSearch.val().length > 0 && allPages) {
-      const bestResults = results.filter(result => {
+      const results = fuzzysort.go($inputSearch.val(), allPages, {
-        if (result.score <= 0.5) {
+        keys: ['title', 'plaintext'],
-          return result;
+        limit: 4,
-        }
       });
 
       let htmlString = '';
-
+      if (results.length > 0) {
-      if (bestResults.length > 0) {
+        for (let i = 0, len = results.length; i < len; i++) {
-        for (let i = 0, len = bestResults.length; i < len; i++) {
+          const title =
+              fuzzysort.highlight(results[i][0]) || results[i].obj.title,
+            previewLength = 192;
+          let preview = fuzzysort.highlight(results[i][1]),
+            appendTrailing = false;
+          if (preview) {
+            const highlightIndex = preview.indexOf('<b>'),
+              startIndex = highlightIndex - previewLength / 4;
+            if (startIndex > 0) {
+              preview = '...' + preview.slice(startIndex);
+            }
+            if (preview.length > previewLength) {
+              preview = preview.slice(0, previewLength);
+              appendTrailing = true;
+            }
+          } else {
+            preview = results[i].obj.plaintext.slice(0, previewLength);
+            if (results[i].obj.plaintext.length > previewLength) {
+              preview = preview.split(' ').slice(0, -1).join(' ');
+              appendTrailing = true;
+            }
+          }
+          const openingTags = preview.match(/<b>/g)?.length,
+            closingTags = preview.match(/<\/b>/g)?.length;
+          if (openingTags > closingTags) preview += '</b>';
+          if (appendTrailing) preview += '...';
           htmlString += `
           <article class="m-result">\
-            <a href="${bestResults[i].item.url}" class="m-result__link">\
+          <a href="${results[i].obj.url}" class="m-result__link">\
-              <h3 class="m-result__title">${bestResults[i].item.title}</h3>\
+          <h3 class="m-result__title">${title}</h3>\
-              <span class="m-result__date">${formatDate(
+          <span class="m-result__date">${preview}</span>\
-                bestResults[i].item.published_at
+          </a>\
-              )}</span>\
-            </a>\
           </article>`;
         }
+        /* /pyv */
 
         $searchNoResults.hide();
         $searchResults.html(htmlString);

src/package.json

@@ -50,6 +50,7 @@
     "@tryghost/content-api": "^1.11.1",
     "fitvids": "^2.0.0",
     "fuse.js": "^6.4.6",
+    "fuzzysort": "^2.0.4",
     "headroom.js": "^0.12.0",
     "jquery": "^3.6.0",
     "medium-zoom": "^1.0.6",

src/sass/app.scss

@@ -45,3 +45,5 @@
 @import "components/search/icon";
 @import "components/search/result";
 @import "components/footer";
+
+@import "pyv";

src/sass/pyv.scss

@@ -0,0 +1,170 @@
+/* wrap content in columns on desktop */
+@media only screen and (min-width: 64rem) {
+  .columns {
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .columns > *:empty {
+    display: contents;
+  }
+  .columns > .kg-image-card:first-child,
+  .columns > * > .kg-image-card:first-child {
+    padding-top: 0;
+  }
+}
+@media only screen and (min-width: 48rem) {
+  .columns .kg-image-card img {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+}
+.columns > * > h3:first-child,
+.columns > * > .kg-embed-card + h3,
+.columns > * > .kg-image-card + h3,
+.columns > * > .kg-audio-card + h3 {
+  margin-bottom: 0;
+  & ~ p {
+    margin-bottom: 1em;
+  }
+}
+.columns > * > .kg-embed-card + h3,
+.columns > * > .kg-image-card + h3 {
+  margin-top: -40px;
+}
+.columns > * > .kg-embed-card + .kg-embed-card {
+  margin-top: -50px;
+}
+
+/* default to light mode site icon until load is complete */
+html:not([data-theme]) {
+  --toggle-darkmode-button-display-moon: block;
+  --toggle-darkmode-button-display-sun: none;
+}
+
+/* concat primary & secondary nav on mobile */
+@media only screen and (min-width: 48rem) {
+  .m-nav__left .m-secondary-menu {
+    display: none;
+  }
+}
+@media only screen and (max-width: 48rem) {
+  .m-nav__left .m-secondary-menu + .more {
+    display: none;
+  }
+  .m-nav__left .m-secondary-menu li {
+    font-size: 1.125rem;
+  }
+  .m-nav__left .m-secondary-menu li a {
+    padding: 0;
+  }
+  .m-nav__right {
+    justify-content: flex-start;
+  }
+  .m-nav__right .m-icon-button:first-child {
+    margin-left: -6px;
+  }
+}
+
+/* social media icons */
+.m-nav__right .m-icon-button:not([data-ghost-search]) {
+  display: flex;
+  height: 32px;
+  width: 32px;
+}
+.m-nav__right .m-icon-button:not(:first-child) {
+  margin-left: 4px;
+}
+
+/* payment buttons */
+.kg-button-card a .paypal-btn {
+  height: 42px;
+  width: 115.94px;
+  display: inline-block;
+  padding: 11px 23px 11px 13px;
+  margin: -13px -26px -15px 13px;
+  background-color: #fff;
+  background-image: url(https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_150x38.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
+}
+.kg-button-card a:focus .paypal-btn {
+  box-shadow: 2px 0 0 2px white;
+  margin-right: -24px;
+  padding-right: 21px;
+  width: 113.94px;
+}
+
+/* page cover readability */
+.m-hero__picture img {
+  filter: blur(2px);
+}
+
+/* hide "recent articles" and "tags" modal trigger */
+.js-submenu-option {
+  display: none;
+}
+.js-main-nav-left::-webkit-scrollbar {
+  display: none;
+}
+
+/* restyle audio cards: make them rounder + more compact */
+.m-header,
+.kg-audio-card {
+  box-shadow: 0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
+}
+.kg-audio-card {
+  position: relative;
+  min-height: 64px;
+  margin-bottom: 20px !important;
+  box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25),
+    0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
+}
+.kg-audio-title {
+  margin: 0 !important;
+  min-height: 58px;
+  padding: 8px 12px 8px 56px !important;
+}
+.kg-audio-title a {
+  text-decoration: none !important;
+}
+.kg-audio-player {
+  padding-bottom: 12px;
+  padding-right: 14px;
+}
+.kg-audio-seek-slider {
+  width: 100%;
+}
+.kg-audio-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 42px !important;
+  width: 42px !important;
+}
+.kg-audio-thumbnail.placeholder {
+  background: transparent !important;
+}
+.kg-file-card-icon:before,
+.kg-audio-thumbnail.placeholder::before {
+  background: currentColor;
+  opacity: 0.06;
+  transition: opacity ease-in-out 0.35s;
+  position: absolute;
+  display: block;
+  content: "";
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 5px;
+}
+.kg-file-card-icon svg,
+.kg-audio-thumbnail.placeholder svg {
+  fill: currentColor !important;
+  color: currentColor !important;
+}