assets/js/app.js.LICENSE.txt

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

assets/js/post.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>o,e:()=>s,eS:()=>r,ej:()=>l,p6:()=>a,tq:()=>i});var o=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},a=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 o=e[t].closest(".kg-gallery-image"),i=e[t].attributes.width.value/e[t].attributes.height.value;o.style.flex="".concat(i," 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 o=n(755),i=n.n(o),a=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,v=!1,w=function(){h=window.pageYOffset,b()},y=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")},k=function(){C(),y(100),setTimeout((function(){x(),b()}),200)},b=function(){v||requestAnimationFrame(j),v=!0},j=function(){var e=g-f,t=Math.ceil(h/e*100);t<=100&&T(t),v=!1},C=function(){f=window.innerHeight,g=i()(document).height()},x=function(){var e,t;if(null!==(e=m)&&void 0!==e&&null!==(t=e[0])&&void 0!==t&&t.style){var n=m.parent().width(),o=n/2,i=(0,u.tq)()?2:3;m.parent().attr("viewBox","0 0 ".concat(n," ").concat(n)),m.attr("stroke-width",i),m.attr("r",o-(i-1)),m.attr("cx",o),m.attr("cy",o),p=2*o*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p}},T=function(e){var t,n;if(null!==(t=m)&&void 0!==t&&null!==(n=t[0])&&void 0!==n&&n.style&&e<=100){var o=p-e/100*p;m[0].style.strokeDashoffset=o}};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)(),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(){i()("html, body").animate({scrollTop:0},500)})),(0,u.eS)(i()),(0,u.ej)(i(),a.Z),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),i()(window).on("load",(function(){(m=i()(".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:()=>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()}]);

assets/js/vendor.js.LICENSE.txt

@@ -1,35 +0,0 @@
-/*!
- * 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
-**/

default.hbs

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     {{!-- Base Meta --}}
-		<title>{{^is "home"}}{{meta_title}} - {{/is}}{{@site.title}}</title>
+    <title>{{meta_title}}</title>
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

featured.hbs

@@ -1,124 +0,0 @@
-{{#contentFor "preload"}}
-  {{!-- This block preloads specific assets for the post page --}}
-  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
-  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />
-  {{!-- This block preloads specific assets for the index page --}}
-  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
-  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
-  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
-{{/contentFor}}
-
-{{#contentFor "styles"}}
-  {{!-- This block loads specific styles for the post page --}}
-  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
-  {{!-- This block loads specific styles for the index page --}}
-  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
-{{/contentFor}}
-
-{{!-- The tag below means: insert everything in this file
-into the {body} of the default.hbs template --}}
-{{!< default}}
-
-{{!-- Special header.hbs partial to generate the <header> tag --}}
-{{#post}}
-  {{> header background=feature_image}}
-{{/post}}
-
-<main class="main-wrap">
-  {{!-- Everything inside the #post tags pulls data from the post --}}
-  {{#post}}
-    {{!-- Inject styles of the hero image to make it responsive --}}
-    {{> hero background=feature_image}}
-    <div class="m-hero__content" data-animate="fade-down">
-      <h1 class="m-hero-title bigger">{{title}}</h1>
-      {{#if custom_excerpt}}
-        <p class="m-hero-description">{{custom_excerpt}}</p>
-      {{/if}}
-    </div>
-    </section>
-  {{/post}}
-  <article>
-    <div class="l-content">
-      <div class="l-wrapper in-post" data-animate="fade-up">
-        <div class="l-post-content">
-          <div class="pos-relative js-post-content">
-            {{#post}}
-              {{content}}
-            {{/post}}
-          </div>
-        </div>
-        <div class="l-grid centered">
-          {{#get "posts" filter="featured:true" include="authors,tags" order="published_at asc" as |featured|}}
-            {{#if featured}}
-              <div class="m-featured-slider swiper js-featured-slider">
-                <div class="m-featured-slider__list swiper-wrapper">
-                  {{#foreach featured to="1"}}
-                    <div class="m-featured-slider__list__item swiper-slide">
-                      <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
-                        <div class="m-featured-article__picture">
-                          {{#if feature_image}}
-                            <img
-                              srcset="
-                                {{img_url feature_image size="s"}} 300w,
-                                {{img_url feature_image size="m"}} 600w,
-                                {{img_url feature_image size="l"}} 1000w,
-                                {{img_url feature_image size="xl"}} 2000w
-                              "
-                              sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
-                              src="{{img_url feature_image size="l"}}"
-                            />
-                          {{/if}}
-                        </div>
-                        {{#if primary_tag}}
-                          <div class="m-featured-article__ribbon">
-                            <span>{{primary_tag.name}}</span>
-                          </div>
-                        {{/if}}
-                        <a href="{{url}}" class="m-featured-article__content">
-                          <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
-                            {{title}}
-                          </h2>
-                        </a>
-                      </article>
-                    </div>
-                  {{/foreach}}
-                </div>
-              </div>
-              {{#foreach featured from="2"}}
-                <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
-                  <div class="m-article-card__picture">
-                    <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
-                    {{#if feature_image}}
-                      <img class="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
-                    {{/if}}
-                    {{#if primary_tag}}
-                      <div class="m-article-card__featured">
-                        <span>{{primary_tag.name}}</span>
-                      </div>
-                    {{/if}}
-                  </div>
-                  <div class="m-article-card__info no-tag">
-                    <a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
-                      <div>
-                        <h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
-                          {{title}}
-                        </h2>
-                      </div>
-                    </a>
-                  </div>
-                </article>
-              {{/foreach}}
-            {{/if}}
-          {{/get}}
-        </div>
-      </div>
-    </div>
-  </article>
-</main>
-
-{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
-{{#contentFor "scripts"}}
-  <script defer src="{{asset "js/page.js"}}"></script>
-  <script defer src="{{asset "js/home.js"}}"></script>
-{{/contentFor}}

index.hbs

@@ -1,12 +1,19 @@
-{{!-- This block preloads specific assets for the post page --}}
+{{!--
+This template is used for the index page.
+It can be used also as the home page or the default page.
+--}}
+
+{{!-- This block preloads specific assets for the index page --}}
 {{#contentFor "preload"}}
-  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
+  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
-  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />
+  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
+  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
 {{/contentFor}}
 
-{{!-- This block loads specific styles for the post page --}}
+{{!-- This block loads specific styles for the index page --}}
 {{#contentFor "styles"}}
-  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
 {{/contentFor}}
 
 {{!-- The tag below means: insert everything in this file
@@ -14,13 +21,10 @@ into the {body} of the default.hbs template --}}
 {{!< default}}
 
 {{!-- Special header.hbs partial to generate the <header> tag --}}
-{{#post}}
+{{> header background=@site.cover_image}}
-  {{> header background=@site.cover_image}}
-{{/post}}
 
-<main class="main-wrap{{#if @custom.use_custom_cta}} with-custom-cta{{/if}}{{#if @custom.use_wave_separator}} with-wave-separator{{/if}}">
+<main class="main-wrap">
-  {{!-- Everything inside the #post tags pulls data from the post --}}
+  {{!-- Inject styles of the hero image to make it responsive --}}
-    {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=@site.cover_image}}
   <div class="m-hero__content" data-animate="fade-down">
     <h1 class="m-hero-title bigger">{{@site.title}}</h1>
@@ -35,30 +39,81 @@ into the {body} of the default.hbs template --}}
       {{/if}}
     {{/if}}
   </div>
-  {{#if @custom.use_wave_separator}}
-    <div class="m-hero__waves">
-      <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
-        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"></path>
-      </svg>
-    </div>
-  {{/if}}
   </section>
-  {{#post}}
+  <div class="l-content">
-    <article>
+    <div class="l-wrapper" data-animate="fade-up">
-      <div class="l-content">
+      <div class="l-grid centered">
-        <div class="l-wrapper in-post" data-animate="fade-up">
+        {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
-          <div class="l-post-content">
+          {{#if featured}}
-            <div class="pos-relative js-post-content">
+            <div class="m-featured-slider swiper js-featured-slider">
-              {{content}}
+              <div class="m-featured-slider__list swiper-wrapper">
+                {{#foreach featured}}
+                  <div class="m-featured-slider__list__item swiper-slide">
+                    <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
+                      <div class="m-featured-article__picture">
+                        {{#if feature_image}}
+                          <style>
+                            #featured-bg-{{id}} {
+                              background-image: url({{{img_url feature_image size='l'}}});
+                            }
+                            @media(max-width: 768px) {
+                              #featured-bg-{{id}} {
+                                background-image: url({{{img_url feature_image size='m'}}});
+                              }
+                            }
+                          </style>
+                          <div id="featured-bg-{{id}}"></div>
+                        {{/if}}
+                      </div>
+                      <div class="m-featured-article__meta">
+                        <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
+                          {{#if primary_author.profile_image}}
+                            <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
+                          {{else}}
+                            <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
+                          {{/if}}
+                        </a>
+                        {{#if primary_tag}}
+                          <a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
+                        {{/if}}
+                      </div>
+                      <div class="m-featured-article__ribbon">
+                        <span class="icon-star"></span>
+                        <span>{{t "Featured"}}</span>
+                      </div>
+                      <a href="{{url}}" class="m-featured-article__content">
+                        <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
+                          {{title}}
+                        </h2>
+                        <div class="m-featured-article__timestamp">
+                          <span>{{date published_at timeago="true"}}</span>
+                          <span>&bull;</span>
+                          <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
+                        </div>
+                      </a>
+                    </article>
+                  </div>
+                {{/foreach}}
+              </div>
+              <button class="m-icon-button in-featured-articles swiper-button-prev js-featured-slider-button" aria-label="{{t "Previous"}}">
+                <span class="icon-arrow-left" aria-hidden="true"></span>
+              </button>
+              <button class="m-icon-button in-featured-articles swiper-button-next js-featured-slider-button" aria-label="{{t "Next"}}">
+                <span class="icon-arrow-right" aria-hidden="true"></span>
+              </button>
             </div>
-          </div>
+          {{/if}}
-        </div>
+        {{/get}}
+        {{!-- The tag below iterates over all the posts --}}
+        {{> "loop"}}
       </div>
-    </article>
+    </div>
-  {{/post}}
+    {{!-- Links to Previous/Next posts --}}
+    {{pagination}}
+  </div>
 </main>
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
-  <script defer src="{{asset "js/page.js"}}"></script>
+  <script defer src="{{asset "js/home.js"}}"></script>
 {{/contentFor}}

package.json

@@ -58,17 +58,6 @@
         "type": "text",
         "default": "/newsletter",
         "group": "homepage"
-      },
-      "use_wave_separator": {
-        "type": "boolean",
-        "default": true,
-        "group": "homepage"
-      },
-      "youtube_url": {
-        "type": "text"
-      },
-      "instagram_url": {
-        "type": "text"
       }
     }
   },
@@ -98,5 +87,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "2.1.7+2312"
+  "version": "2.1.7"
 }

page.hbs

@@ -25,16 +25,14 @@ into the {body} of the default.hbs template --}}
 <main class="main-wrap">
   {{!-- Everything inside the #post tags pulls data from the post --}}
   {{#post}}
-    {{#match @page.show_title_and_feature_image}}
+    {{!-- Inject styles of the hero image to make it responsive --}}
-      {{!-- Inject styles of the hero image to make it responsive --}}
+    {{> hero background=feature_image}}
-      {{> hero background=feature_image}}
+    <div class="m-hero__content" data-animate="fade-down">
-      <div class="m-hero__content" data-animate="fade-down">
+      <h1 class="m-hero-title bigger">{{title}}</h1>
-        <h1 class="m-hero-title bigger">{{title}}</h1>
+      {{#if custom_excerpt}}
-        {{#if custom_excerpt}}
+        <p class="m-hero-description">{{custom_excerpt}}</p>
-          <p class="m-hero-description">{{custom_excerpt}}</p>
+      {{/if}}
-        {{/if}}
+    </div>
-      </div>
-    {{/match}}
     </section>
     <article>
       <div class="l-content">

partials/footer.hbs

@@ -10,16 +10,6 @@ This footer template is shared across all the pages.
       </nav>
     {{/if}}
     <nav class="m-footer-social">
-      {{#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}}
       {{#if @site.facebook}}
         <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
           <span class="icon-facebook" aria-hidden="true"></span>
@@ -30,18 +20,17 @@ This footer template is shared across all the pages.
           <span class="icon-twitter" aria-hidden="true"></span>
         </a>
       {{/if}}
-      {{!-- <a href="{{@site.url}}/rss" aria-label="RSS">
+      <a href="{{@site.url}}/rss" aria-label="RSS">
         <span class="icon-rss" aria-hidden="true"></span>
-      </a> --}}
+      </a>
     </nav>
     <p class="m-footer-copyright">
-      <span>{{@site.title}} &copy; {{date format="YYYY"}}</span><br>
+      <span>{{@site.title}} &copy; {{date format="YYYY"}}</span>
-      <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+      <span>&nbsp; &bull; &nbsp;</span>
-      &amp; <a href="https://github.com/eddiesigner/liebling" target="_blank" rel="noopener">Liebling</a>
+      <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a></span>
-      &#x2022; {{t "by"}} <a href="https://dragonwocky.me/">Tom Vines</a></span>
     </p>
-    {{!-- <p class="m-footer-copyright jslicense">
+    <p class="m-footer-copyright jslicense">
       <a href="{{asset "html/javascript.html"}}" rel="jslicense">{{t "JavaScript license information"}}</a>
-    </p> --}}
+    </p>
   </div>
 </footer>

partials/header.hbs

@@ -53,7 +53,6 @@ This header template is shared across all the pages.
                 {{navigation}}
               {{/if}}
               {{#if @site.secondary_navigation}}
-                {{navigation type="secondary"}}
                 <li class="more">
                   <span>
                     <a href="javascript:void(0);" class="js-open-secondary-menu">
@@ -119,24 +118,6 @@ This header template is shared across all the pages.
             </ul>
           </nav>
           <div class="m-nav__right">
-            {{#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}}
             <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>

post.hbs

@@ -49,12 +49,45 @@ into the {body} of the default.hbs template --}}
               <h1 class="m-heading__title in-post">{{title}}</h1>
               <div class="m-heading__meta">
                 {{#if primary_tag}}
-                  <span class="m-heading__meta__tag">{{primary_tag.name}}</span>
+                  <a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
+                  <span class="m-heading__meta__divider" aria-hidden="true">&bull;</span>
                 {{/if}}
+                <span class="m-heading__meta__time">{{date published_at}}</span>
               </div>
             </header>
             <div class="pos-relative js-post-content">
+              <div class="m-share">
+                <div class="m-share__content js-sticky">
+                  <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}"
+                    class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Facebook">
+                    <span class="icon-facebook" aria-hidden="true"></span>
+                  </a>
+                  <a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}"
+                    class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
+                    <span class="icon-twitter" aria-hidden="true"></span>
+                  </a>
+                  <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="{{t "Scroll to top"}}">
+                    <span class="icon-arrow-top" aria-hidden="true"></span>
+                    <svg aria-hidden="true">
+                      <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
               {{content}}
+              {{!-- List of tags  --}}
+              {{#if tags}}
+                <section class="m-tags in-post">
+                  <h3 class="m-submenu-title">{{t "Tags"}}</h3>
+                  <ul>
+                    {{#foreach tags}}
+                      <li>
+                        <a href="{{url}}" title="{{name}}">{{name}}</a>
+                      </li>
+                    {{/foreach}}
+                  </ul>
+                </section>
+              {{/if}}
             </div>
           </div>
         </div>
@@ -76,6 +109,55 @@ into the {body} of the default.hbs template --}}
             </div>
           </section>
         {{/if}}
+        <section class="m-author">
+          <div class="m-author__content">
+            <div class="m-author__picture">
+              <a href="{{primary_author.url}}" class="m-author-picture" aria-label="{{primary_author.name}}">
+                {{#if primary_author.profile_image}}
+                  <div style="background-image: url({{primary_author.profile_image}});"></div>
+                {{else}}
+                  <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
+                {{/if}}
+              </a>
+            </div>
+            <div class="m-author__info">
+              <h4 class="m-author__name">
+                <a href="{{primary_author.url}}">{{primary_author.name}}</a>
+              </h4>
+              {{#has author="count:>1"}}
+                <p class="m-small-text in-author-along-with">
+                  {{authors separator=", " prefix=(t "Among with no break line") from="2"}}
+                </p>
+              {{/has}}
+              {{#if primary_author.bio}}
+                <p class="m-author__bio">{{primary_author.bio}}</p>
+              {{/if}}
+              <ul class="m-author-links">
+                {{#if primary_author.website}}
+                  <li>
+                    <a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
+                      <span class="icon-globe" aria-hidden="true"></span>
+                    </a>
+                  </li>
+                {{/if}}
+                {{#if primary_author.facebook}}
+                  <li>
+                    <a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
+                      <span class="icon-facebook" aria-hidden="true"></span>
+                    </a>
+                  </li>
+                {{/if}}
+                {{#if primary_author.twitter}}
+                  <li>
+                    <a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
+                      <span class="icon-twitter" aria-hidden="true"></span>
+                    </a>
+                  </li>
+                {{/if}}
+              </ul>
+            </div>
+          </div>
+        </section>
         {{!-- Native comments --}}
         {{#if comments}}
           <div class="m-comments">
@@ -93,6 +175,32 @@ into the {body} of the default.hbs template --}}
           </section>
         --}}
       {{/post}}
+      {{!-- Related posts --}}
+      {{#if post.tags.length}}
+        {{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" order="published_at desc" as |related|}}
+          {{#if related}}
+            <section class="m-recommended">
+              <div class="l-wrapper in-recommended">
+                <h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
+                <div class="m-recommended-articles">
+                  <div class="m-recommended-slider swiper js-recommended-slider">
+                    <div class="swiper-wrapper">
+                      {{!-- The tag below iterates over all the related posts --}}
+                      {{> "loop"}}
+                    </div>
+                    <button class="m-icon-button filled in-recommended-articles swiper-button-prev" aria-label="{{t "Previous"}}">
+                      <span class="icon-arrow-left" aria-hidden="true"></span>
+                    </button>
+                    <button class="m-icon-button filled in-recommended-articles swiper-button-next" aria-label="{{t "Next"}}">
+                      <span class="icon-arrow-right" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </section>
+          {{/if}}
+        {{/get}}
+      {{/if}}
     </div>
   </article>
 </main>

src/js/app.js

@@ -339,4 +339,4 @@ $(() => {
 
   tryToRemoveNewsletter();
   trySearchFeature();
-});
+});

src/js/post.js

@@ -70,7 +70,6 @@ const setHeights = () => {
 };
 
 const setCircleStyles = () => {
-  if (!$progressCircle?.[0]?.style) return;
   const svgWidth = $progressCircle.parent().width();
   const radiusCircle = svgWidth / 2;
   const borderWidth = isMobile() ? 2 : 3;
@@ -88,7 +87,6 @@ const setCircleStyles = () => {
 };
 
 const setProgress = percent => {
-  if (!$progressCircle?.[0]?.style) return;
   if (percent <= 100) {
     const offset = circumference - (percent / 100) * circumference;
     $progressCircle[0].style.strokeDashoffset = offset;
@@ -97,7 +95,6 @@ const setProgress = percent => {
 
 const prepareProgressCircle = () => {
   $progressCircle = $('.js-progress');
-  if (!$progressCircle) return;
 
   setHeights();
   setCircleStyles();

src/sass/app.scss

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

src/sass/common/_themes.scss

@@ -1,4 +1,3 @@
-html:not([data-theme]),
 [data-theme="light"] {
   --background-color: #fff;
   --primary-foreground-color: #4a4a4a;
@@ -6,7 +5,7 @@ html:not([data-theme]),
   --primary-subtle-color: #0470ee;
   --secondary-subtle-color: #f4f8fd;
   --titles-color: #333;
-  --link-color: #1d3c85;
+  --link-color: #133467;
   --primary-border-color: #9b9b9b;
   --secondary-border-color: aliceblue;
   --article-shadow-normal: 0 10px 10px rgba(0, 0, 0, 0.08);
@@ -33,7 +32,7 @@ html:not([data-theme]),
   --primary-subtle-color: #2c2fe6;
   --secondary-subtle-color: #141920;
   --titles-color: #b4b4b4;
-  --link-color: #5bbaeb;
+  --link-color: #b6b7f6;
   --primary-border-color: #1d1d1d;
   --secondary-border-color: #0f0f0f;
   --article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);

src/sass/pyv.scss

@@ -1,437 +0,0 @@
-/* wrap content in columns on desktop */
-@include respond-to("medium") {
-  .columns .kg-image-card img {
-    width: 100% !important;
-    margin: 0 !important;
-  }
-}
-@include respond-to("large") {
-  .columns {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .columns:not(.no-gap) {
-    grid-gap: 24px;
-  }
-  .columns > *:empty {
-    display: none;
-  }
-  .columns > :is(.kg-embed-card, .kg-image-card) {
-    &:nth-child(2n - 1 of :not(:empty)) {
-      padding-top: 0;
-      // & + p,
-      // & + * > p:first-child {
-      //   margin-top: -8px;
-      // }
-    }
-  }
-  .buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 24px;
-  }
-}
-.columns.no-gap > :not(:last-child) ul {
-  margin-bottom: 0;
-}
-.columns > * > .kg-embed-card + h3,
-.columns > * > .kg-image-card + h3,
-.columns > * > .kg-audio-card + h3 {
-  margin-bottom: 0;
-  & ~ p {
-    margin-bottom: 1em;
-  }
-}
-.columns > * > h3:first-child + p,
-.columns > * > .kg-embed-card + h3,
-.columns > * > .kg-image-card + h3 {
-  margin-top: -40px;
-}
-.columns > * > .kg-embed-card + .kg-embed-card {
-  margin-top: -50px;
-}
-.buttons {
-  .kg-button-card a {
-    width: 100%;
-  }
-  @media screen and (max-width: $break-large) {
-    & > *:not(:last-child) {
-      margin-bottom: 14px !important;
-    }
-  }
-}
-.kg-button-card {
-  padding: 0 !important;
-}
-
-/* transparent nav on homepage until scroll */
-.home-template {
-  .in-mobile-topbar {
-    --titles-color: white;
-  }
-  .m-header {
-    &,
-    .m-nav__right::before {
-      transition: background 200ms;
-    }
-    /* prefer :not() to default to transparent onload */
-    &:not(.headroom--not-top) {
-      &,
-      .m-nav__right::before {
-        background: transparent;
-      }
-      .m-logo__image-light {
-        display: none;
-      }
-      .m-logo__image-dark {
-        display: block;
-      }
-      @include respond-to("medium") {
-        --titles-color: white;
-      }
-    }
-  }
-}
-
-/* correctly position announcements bar */
-body:not(.home-template) {
-  --announcement-bar-height: 0 !important;
-}
-
-/* keep footer lines tight */
-.m-footer-copyright {
-  line-height: 1 !important;
-}
-
-/* disable fade down animation on nav */
-.m-header {
-  --show-fade-animation: 0;
-}
-
-/* hide nav shadow if at top of content */
-.m-header.headroom--top {
-  box-shadow: none !important;
-}
-
-/* sticky nav to avoid overlap with page cover */
-body:not(.home-template) {
-  .m-hero {
-    margin-top: 50px;
-  }
-  @include respond-to("medium") {
-    .m-header {
-      position: sticky;
-    }
-    .m-hero {
-      margin-top: 0;
-      &:not(.post-template .m-hero.with-picture) {
-        padding-top: 75px;
-      }
-    }
-  }
-}
-
-/* add "Home" to nav on mobile */
-@include respond-to("medium") {
-  .m-menu .nav-home {
-    display: none;
-  }
-}
-
-/* concat primary & secondary nav on mobile */
-.m-nav__left .m-secondary-menu {
-  @include respond-to("medium") {
-    display: none;
-  }
-}
-@media only screen and (max-width: $break-medium) {
-  .m-nav__left .m-secondary-menu + .more {
-    display: none;
-  }
-  .m-nav__left .m-secondary-menu li {
-    font-size: 1.125rem;
-    a {
-      padding: 0;
-      &:hover {
-        background: none;
-      }
-    }
-  }
-  .m-nav__right {
-    justify-content: flex-start;
-    .m-icon-button:first-child {
-      margin-left: -6px;
-    }
-  }
-}
-
-/* add wave shape divider to homepage */
-.m-hero__waves {
-  position: absolute;
-  bottom: -1.3px;
-  left: 0;
-  overflow: hidden;
-  z-index: 1;
-  width: 200%;
-  & svg {
-    position: relative;
-    display: block;
-    width: calc(100% + 1.3px);
-    height: 50px;
-    transform: rotateY(180deg);
-  }
-  & path {
-    fill: var(--background-color);
-  }
-  @include respond-to("medium") {
-    width: 150%;
-    & svg {
-      height: 100px;
-    }
-  }
-}
-.with-wave-separator {
-  &.with-custom-cta .m-hero__content {
-    margin-bottom: 25px;
-  }
-  @include respond-to("medium") {
-    .m-hero.with-picture {
-      height: 500px;
-    }
-    .m-hero__content {
-      margin-bottom: 80px;
-    }
-    &.with-custom-cta .m-hero__content {
-      margin-bottom: 100px;
-    }
-  }
-}
-
-/* newsletter signup form */
-@include respond-to("medium") {
-  .newsletter-subscription {
-    display: flex;
-    > div {
-      flex-grow: 1;
-      .m-input {
-        margin: 0 !important;
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-      }
-    }
-    .m-button {
-      width: 10rem !important;
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-    }
-  }
-}
-
-/* featured post cards with images: avoid cropping + hide titles */
-.m-featured-article:not(.no-picture) {
-  .m-featured-article__picture {
-    background-color: transparent;
-    position: static;
-    display: flex;
-    img {
-      width: 100%;
-      height: 100%;
-      margin: auto;
-      object-fit: cover;
-    }
-  }
-  & > a {
-    position: absolute;
-    top: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    .m-featured-article__title {
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      margin-bottom: -1px;
-    }
-  }
-}
-
-/* resize post cards to fill horizontal space */
-.l-post-content {
-  min-height: auto !important;
-}
-.m-article-card,
-.m-article-card__info,
-.m-featured-slider.swiper {
-  height: auto !important;
-}
-.m-article-card__info .m-article-card__info-link {
-  padding-top: 25px !important;
-}
-@include respond-to("large") {
-  .l-grid > :nth-child(3n of .m-article-card):last-child {
-    width: calc(66.66666% - 40px);
-  }
-  .l-grid > :nth-child(3n - 1 of .m-article-card):last-child {
-    width: 100%;
-  }
-  .l-post-content + .l-grid.centered {
-    margin: 0 max(calc(50% - 430px), 0px);
-  }
-}
-@media only screen and (min-width: $break-small) and (max-width: $break-large) {
-  .l-grid > :nth-child(2n + 1 of .m-article-card):last-child {
-    width: 100%;
-  }
-}
-@media only screen and (max-width: $break-medium) {
-  .l-post-content + .l-grid.centered {
-    margin-top: 40px;
-  }
-}
-
-/* use featured ribbon as year tag */
-.m-article-card__featured,
-.m-featured-article__ribbon {
-  border-radius: 15px !important;
-  font-size: 0.875rem;
-  font-weight: 600;
-  height: 22px !important;
-  padding: 0 7px;
-  width: auto !important;
-  right: 11.2px !important;
-  top: 14px !important;
-}
-.m-article-card__featured span,
-.m-featured-article__ribbon span {
-  margin: 0 4px;
-  color: var(--primary-subtle-color);
-  display: block !important;
-}
-
-/* cardlike galleries used on merch page */
-.kg-gallery-card.kg-card-hascaption {
-  margin: 0 !important;
-  display: flex;
-  flex-direction: column;
-  padding: 20px !important;
-  border-radius: 5px;
-  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-gallery-container {
-    margin: auto;
-  }
-  figcaption p {
-    margin-bottom: 0;
-  }
-}
-
-/* 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;
-}
-
-/* page cover sizing & readability (inc. uncropped post covers) */
-.m-hero-title.bigger,
-.m-hero-description.bigger {
-  text-shadow: 1px 1px 1px black;
-}
-.post-template .m-hero.with-picture {
-  padding: 0;
-  min-height: initial;
-  height: max-content;
-  background: transparent;
-  .m-hero__picture {
-    position: static;
-    height: max-content;
-    img {
-      height: auto;
-      -o-object-fit: initial;
-      object-fit: initial;
-      @include respond-to("large") {
-        border-radius: 16px;
-        margin-top: 40px;
-        max-height: 40vh;
-        width: auto;
-      }
-    }
-  }
-}
-
-/* pad table titles */
-.l-post-content table th {
-  padding: 0 10px;
-}
-
-/* default full width iframes */
-.l-post-content iframe {
-  aspect-ratio: 16 / 9;
-  width: 100%;
-  height: auto;
-}
-
-/* hide "recent articles" and "tags" modal trigger */
-.js-submenu-option {
-  display: none;
-}
-.js-main-nav-left::-webkit-scrollbar {
-  display: none;
-}
-
-/* restyle audio cards: rounder + more compact */
-.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;
-}