Fixes youtube embeds and improves Lightouse audits (#24)

ngeorger · web-flow · commit 3b77c4004d2d · 2024-12-31T05:10:54.000-03:00
diff --git a/assets/built/main.js b/assets/built/main.js
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -232,15 +232,6 @@ p {
   margin-left: auto;
 }
 
-/* Embed */
-
-.kg-embed-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-
 /* Gallery */
 
 .kg-image[width][height],
@@ -601,4 +592,12 @@ figcaption a {
 }
 #post-list {
   @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;
+}
+
+/* Embed */
+.kg-embed-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -102,4 +102,20 @@ document.addEventListener("keydown", function (e) {
     // Trigger Ghost search
     document.querySelector("[data-ghost-search]").click();
   }
-});
+});
+
+/* Reframe */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).reframe=t()}(this,function(){"use strict";function t(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;for(var i=Array(e),o=0,t=0;t<n;t++)for(var r=arguments[t],f=0,d=r.length;f<d;f++,o++)i[o]=r[f];return i}return function(e,s){return void 0===s&&(s="js-reframe"),("string"==typeof e?t(document.querySelectorAll(e)):"length"in e?t(e):[e]).forEach(function(e){var t,n,i,o,r,f,d,l;-1!==e.className.split(" ").indexOf(s)||-1<e.style.width.indexOf("%")||(i=e.getAttribute("height")||e.offsetHeight,o=e.getAttribute("width")||e.offsetWidth,r=("string"==typeof i?parseInt(i):i)/("string"==typeof o?parseInt(o):o)*100,(f=document.createElement("div")).className=s,(d=f.style).position="relative",d.width="100%",d.paddingTop=r+"%",(l=e.style).position="absolute",l.width="100%",l.height="100%",l.left="0",l.top="0",null!==(t=e.parentNode)&&void 0!==t&&t.insertBefore(f,e),null!==(n=e.parentNode)&&void 0!==n&&n.removeChild(e),f.appendChild(e))})}});
+
+/* Responsive video in post content */
+(function () {
+    const sources = [
+        'figure iframe[src*="youtube.com"]',
+        'figure iframe[src*="youtube-nocookie.com"]',
+        'figure iframe[src*="player.vimeo.com"]',
+        'figure iframe[src*="kickstarter.com"][src*="video.html"]',
+        'figure object',
+        'figure embed',
+    ];
+    reframe(document.querySelectorAll(sources.join(',')));
+})();
diff --git a/default.hbs b/default.hbs
@@ -12,7 +12,12 @@
 
     {{!-- {{> "typography/noto"}} --}}
 
-    {{ghost_head}}
+    {{#is "home, tag, author, index"}}
+        {{ghost_head exclude="card_assets,cta_styles,comment_counts,announcement"}}
+    {{else}}
+        {{ghost_head}}
+    {{/is}}
+
 </head>
 
 <body class="{{body_class}} bg-gradient-to-r from-darker via-darker to-dark">
@@ -26,7 +31,7 @@
     {{!-- Footer --}}
     {{> "components/footer"}}
 
-<script src="{{asset "built/main.js"}}"></script>
+<script src="{{asset "built/main.js"}}" defer></script>
 {{ghost_foot}}
 
 </body>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "sredevopsorg-ghost-theme",
     "description": "Ghost v5 Theme made for SREDevOps.org (https://sredevops.org) based on Tailwind CSS v3, responsive, dark color schema, SVG icons, sidebar + footer navgation, customized tags and recommendations pages.",
     "demo": "https://sredevops.org",
-    "version": "1.1.7",
+    "version": "1.1.8",
     "engines": {
         "ghost": ">=5.0.0"
     },
diff --git a/partials/posts-list.hbs b/partials/posts-list.hbs
@@ -5,6 +5,7 @@
             <a href="{{url absolute="true"}}" alt="{{title}}">
             <img alt="{{title}}"
                 src="{{img_url feature_image size='s' format='webp'}}"
+                width="220px"
                 {{#if @custom.lazy_images}} loading="lazy"{{/if}} />
             </a>
             <div>
@@ -20,7 +21,7 @@
                 </p>
 
                 <a href="{{url absolute="true"}}" class="inline-flex items-center gap-1 mt-4 text-sm font-medium group" alt="{{title}}" rel="bookmark">
-                    <h2 id="{{slug}}" class="block transition-all group-hover:ms-0.5" alt="{{title}}">
+                    <h2 class="block transition-all group-hover:ms-0.5" alt="{{title}}">
                         Read the full post &rarr;
                     </h2>
                 </a>
