refactor: Update npm dependencies and improve image lazy loading

Author: ngeorger

package.json

@@ -2,7 +2,7 @@
     "name": "ghost-source-theme",
     "description": "Fork of the default theme of Ghost publishing platform, customized for sredevops.org",
     "demo": "https://sredevops.org",
-    "version": "1.5.3",
+    "version": "1.5.6",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -42,7 +42,7 @@
     ],
     "devDependencies": {
         "autoprefixer": "10.4.19",
-        "cssnano": "7.0.3",
+        "cssnano": "7.0.4",
         "gulp": "5.0.0",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",

partials/components/header-content.hbs

@@ -21,17 +21,17 @@
                 {{/foreach}}
             </div>
             <div class="gh-header-middle">
-                {{#foreach posts from="2" limit="2"}}
-                    {{> "post-card"}}
+                {{#foreach posts from="2" limit="3"}}
+                    {{> "post-card" imageSizes="s"}}
                 {{/foreach}}
             </div>
             <div class="gh-header-right">
                 {{#if @custom.show_featured_posts}}
                     {{> "components/featured" showFeatured=@custom.show_featured_posts limit=4}}
                 {{else}}
                     <div class="gh-featured-feed">
-                        {{#foreach posts from="4" limit="5"}}
-                            {{> "post-card" imageSizes="80px"}}
+                        {{#foreach posts from="4" limit="4"}}
+                            {{> "post-card" imageSizes="s"}}
                         {{/foreach}}
                     </div>
                 {{/if}}

partials/components/navigation.hbs

@@ -37,11 +37,11 @@
                         {{#unless @site.members_invite_only}}
                             {{#unless hideSubscribeButton}}
                                 {{!-- <span><a class="sign-google" href="https://login.spectralwebservices.com/auth/google?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Google">Google</a></span> --}}
-                                <span class="gh-button">Login with &nbsp;<a class="sign-github" href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Github</a></span>
+                                <span class="gh-button"><a href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Login with &nbsp;</a><a class="sign-github" href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Github</a></span>
                             {{/unless}}
                         {{else}}
                                 {{!-- <span><a class="sign-google" href="https://login.spectralwebservices.com/auth/google?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Google">Google</a></span> --}}
-                                <span class="gh-button">Login with &nbsp;<a class="sign-github" href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Github</a></span>
+                                <span class="gh-button"><a href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Login with &nbsp;</a><a class="sign-github" href="https://login.spectralwebservices.com/auth/github?inbound=b89c0c7a-1b79-4c68-b75e-32060012d7ca" alt="Sign in with Github">Github</a></span>
                         {{/unless}}
                     {{else}}
                         <a class="gh-button" href="#/portal/account" data-portal="account">Settings</a>

partials/components/post-list.hbs

@@ -23,8 +23,8 @@
                     {{#match @custom.header_style "Highlight"}}
                         {{#if @custom.show_featured_posts}}
                             {{#match posts.length ">=" 4}}
-                                {{#get "posts" include="authors" limit="16"}}
-                                    {{#foreach posts from="5" limit="12"}}
+                                {{#get "posts" include="authors" limit="24"}}
+                                    {{#foreach posts from="4" limit="24"}}
                                         {{> "post-card" lazyLoad=true}}
                                     {{/foreach}}
                                 {{/get}}

partials/feature-image.hbs

@@ -1,12 +1,13 @@
 {{#if feature_image}}
     <figure class="gh-article-image">
         <img
-            srcset="{{img_url feature_image size="s"}} 320w,
-                    {{img_url feature_image size="m"}} 600w,
-                    {{img_url feature_image size="l"}} 960w,
-                    {{img_url feature_image size="xl"}} 1200w,
-                    {{img_url feature_image size="xxl"}} 2000w"
-            src="{{img_url feature_image size="s"}}"
+            srcset="{{img_url feature_image size="xs" format="webp"}} 120w,
+                    {{img_url feature_image size="s" format="webp"}} 320w,
+                    {{img_url feature_image size="m" format="webp"}} 600w,
+                    {{img_url feature_image size="l" format="webp"}} 960w,
+                    {{img_url feature_image size="xl" format="webp"}} 1200w,
+                    {{img_url feature_image size="xxl" format="webp"}} 2000w"
+            src="{{img_url feature_image size="s" format="webp"}}"
             alt="{{title}}"
         >
         {{#if feature_image_caption}}