type-on-strap 2.4.13 → 2.5.0

data/_sass/layouts/_posts.scss

@@ -3,6 +3,12 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   float: left;
   width: 100%;
+
+  iframe {
+    width: 100%;
+    border: none;
+    min-height: 500px;
+  }
 }
 
 article {

data/_sass/layouts/_search.scss

@@ -56,3 +56,13 @@
     text-decoration: none;
   }
 }
+
+.search-highlight {
+  background-color: rgba(255, 221, 76, 0.5);
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+[data-theme="dark"] .search-highlight {
+  background-color: rgba(167, 139, 250, 0.5);  /* #a78bfa - violet with blue undertones */
+}

data/_sass/layouts/_tags.scss

@@ -1,6 +1,17 @@
-.tag-list {
+.tag-category-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 1em;
   width: 100%;
   padding-bottom: $padding-x-small;
+}
+
+.tag-list,
+.category-list {
+  flex: 0 1 auto;
+  padding-bottom: 0;
 
   a.button {
     margin: 0.1em;

data/assets/js/comments-lazy-load.js

@@ -0,0 +1,123 @@
+/**
+ * Generic Comments Lazy Loader
+ * Loads comment widgets (Cusdis, Disqus, Giscus, Utterances) only when they're about to become visible
+ * This prevents blocking Mermaid and other critical scripts
+ */
+(function() {
+  'use strict';
+
+  /**
+   * Generic lazy loader for any comment system
+   * @param {string} containerId - The ID of the container element
+   * @param {function} loadCallback - Function to call when loading should happen
+   */
+  function createLazyLoader(containerId, loadCallback) {
+    const container = document.getElementById(containerId);
+    if (!container || container.getAttribute('data-lazy-load') !== 'true') return;
+
+    let loaded = false;
+
+    function load() {
+      if (loaded) return;
+      loaded = true;
+      loadCallback(container);
+    }
+
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting) {
+            load();
+            observer.unobserve(container);
+          }
+        });
+      }, {
+        rootMargin: '400px' // Load 400px before it comes into view
+      });
+      
+      observer.observe(container);
+    } else {
+      // Fallback for browsers without IntersectionObserver
+      if (document.readyState === 'complete') {
+        load();
+      } else {
+        window.addEventListener('load', load);
+      }
+    }
+  }
+
+  // Cusdis loader
+  createLazyLoader('cusdis_thread', function(container) {
+    const lang = container.getAttribute('data-lang');
+    
+    if (lang) {
+      const langScript = document.createElement('script');
+      langScript.src = 'https://cusdis.com/js/widget/lang/' + lang + '.js';
+      langScript.async = true;
+      document.body.appendChild(langScript);
+    }
+
+    const mainScript = document.createElement('script');
+    mainScript.src = 'https://cusdis.com/js/cusdis.es.js';
+    mainScript.async = true;
+    document.body.appendChild(mainScript);
+  });
+
+  // Disqus loader
+  createLazyLoader('disqus_thread', function(container) {
+    const shortname = container.getAttribute('data-shortname');
+    if (!shortname) {
+      console.error('Disqus shortname not provided');
+      return;
+    }
+
+    window.disqus_shortname = shortname;
+    
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = '//' + shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
+  });
+
+  // Giscus loader
+  createLazyLoader('giscus_thread', function(container) {
+    const script = document.createElement('script');
+    script.src = 'https://giscus.app/client.js';
+    script.async = true;
+    script.crossOrigin = 'anonymous';
+    
+    // Transfer all data attributes from the container to the script
+    const attributes = container.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+      const attr = attributes[i];
+      if (attr.name.startsWith('data-') && attr.name !== 'data-lazy-load') {
+        script.setAttribute(attr.name, attr.value);
+      }
+    }
+    
+    container.appendChild(script);
+  });
+
+  // Utterances loader
+  createLazyLoader('utterances_thread', function(container) {
+    const script = document.createElement('script');
+    script.src = 'https://utteranc.es/client.js';
+    script.async = true;
+    script.crossOrigin = 'anonymous';
+    
+    // Transfer data attributes to script attributes (Utterances doesn't use 'data-' prefix)
+    const repo = container.getAttribute('data-repo');
+    const issueTerm = container.getAttribute('data-issue-term');
+    const theme = container.getAttribute('data-theme');
+    const label = container.getAttribute('data-label');
+    
+    if (repo) script.setAttribute('repo', repo);
+    if (issueTerm) script.setAttribute('issue-term', issueTerm);
+    if (theme) script.setAttribute('theme', theme);
+    if (label) script.setAttribute('label', label);
+    
+    container.appendChild(script);
+  });
+})();
+

data/assets/js/comments-lazy-load.min.js

@@ -0,0 +1 @@
+!function(){"use strict";function t(t,e){const s=document.getElementById(t);if(!s||"true"!==s.getAttribute("data-lazy-load"))return;let n=!1;function c(){n||(n=!0,e(s))}if("IntersectionObserver"in window){const t=new IntersectionObserver((function(e){e.forEach((function(e){e.isIntersecting&&(c(),t.unobserve(s))}))}),{rootMargin:"400px"});t.observe(s)}else"complete"===document.readyState?c():window.addEventListener("load",c)}t("cusdis_thread",(function(t){const e=t.getAttribute("data-lang");if(e){const t=document.createElement("script");t.src="https://cusdis.com/js/widget/lang/"+e+".js",t.async=!0,document.body.appendChild(t)}const s=document.createElement("script");s.src="https://cusdis.com/js/cusdis.es.js",s.async=!0,document.body.appendChild(s)})),t("disqus_thread",(function(t){const e=t.getAttribute("data-shortname");if(!e)return void console.error("Disqus shortname not provided");window.disqus_shortname=e;const s=document.createElement("script");s.type="text/javascript",s.async=!0,s.src="//"+e+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(s)})),t("giscus_thread",(function(t){const e=document.createElement("script");e.src="https://giscus.app/client.js",e.async=!0,e.crossOrigin="anonymous";const s=t.attributes;for(let t=0;t<s.length;t++){const n=s[t];n.name.startsWith("data-")&&"data-lazy-load"!==n.name&&e.setAttribute(n.name,n.value)}t.appendChild(e)})),t("utterances_thread",(function(t){const e=document.createElement("script");e.src="https://utteranc.es/client.js",e.async=!0,e.crossOrigin="anonymous";const s=t.getAttribute("data-repo"),n=t.getAttribute("data-issue-term"),c=t.getAttribute("data-theme"),a=t.getAttribute("data-label");s&&e.setAttribute("repo",s),n&&e.setAttribute("issue-term",n),c&&e.setAttribute("theme",c),a&&e.setAttribute("label",a),t.appendChild(e)}))}();