🔀 Merge pull request #741 from wolfspyre/author-picture

♻️ Render author image with picture partial

CHANGELOG.md

@@ -34,7 +34,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Hamburger menu is not dismissed when links are clicked ([#705](https://github.com/jpanther/congo/pull/705))
 - KaTeX, table and code elements wider than the page are not formatted correctly ([#753](https://github.com/jpanther/congo/pull/753))
 - 'ß' character is output at the top of articles ([#764](https://github.com/jpanther/congo/pull/764))
-- Status bar styling is not applied in Safari on iOS ([#789](https://github.com/jpanther/congo/pull/789))
+- Article metadata element is output when there is no metadata to display ([#786](https://github.com/jpanther/congo/pull/786))
+- Header elements not vertically centered when using locale switcher ([#788](https://github.com/jpanther/congo/pull/788))
 
 ### Removed
 

assets/js/appearance.js

@@ -8,13 +8,9 @@ function getCSSValue(varName) {
 
 function setThemeColor() {
   var metaThemeColor = document.querySelector("meta[name=theme-color]");
-  var metaAppleMobileWebAppStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
   document.documentElement.classList.contains("dark")
     ? metaThemeColor.setAttribute("content", getCSSValue("--color-neutral-800"))
     : metaThemeColor.setAttribute("content", getCSSValue("--color-neutral"));
-  document.documentElement.classList.contains("dark")
-    ? metaAppleMobileWebAppStatusBarStyle.setAttribute("content", getCSSValue("--color-neutral-800"))
-    : metaAppleMobileWebAppStatusBarStyle.setAttribute("content", getCSSValue("--color-neutral"));
   return true;
 }
 

exampleSite/content/users/index.es.md

@@ -66,5 +66,9 @@ La lista a continuación es solo un puñado de sitios web creados con el tema Co
 | [yoganath.me](https://yoganath.me)                                     | Personal Site and Blog          |
 | [josh-v.com](https://josh-v.com)                                       | Personal Site and Tech blog     |
 | [rshmhrj.io](https://rshmhrj.io/)                                      | Personal Site and Tech blog     |
+| [jamesjarvis.io](https://jamesjarvis.io)                               | Personal Site and Blog          |
+| [jnsgr.uk](https://jnsgr.uk)                                           | Personal site and blog          |
+| [stupidjoey.net](https://stupidjoey.net)                               | Personal Site and Tech blog     |
+| [aminelch.github.io](https://aminelch.github.io)                       | Personal Site and Blog          |
 
 **¿Usuaria de congo?** Para agregar tu sitio a esta lista, [haz un pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md).

exampleSite/content/users/index.ja.md

@@ -66,5 +66,9 @@ Congoを使用して構築された実際のウェブサイト。
 | [yoganath.me](https://yoganath.me)                                     | Personal Site and Blog          |
 | [josh-v.com](https://josh-v.com)                                       | Personal Site and Tech blog     |
 | [rshmhrj.io](https://rshmhrj.io/)                                      | Personal Site and Tech blog     |
+| [jamesjarvis.io](https://jamesjarvis.io)                               | Personal Site and Blog          |
+| [jnsgr.uk](https://jnsgr.uk)                                           | Personal site and blog          |
+| [stupidjoey.net](https://stupidjoey.net)                               | Personal Site and Tech blog     |
+| [aminelch.github.io](https://aminelch.github.io)                       | Personal Site and Blog          |
 
 **Congoを使っていますか？** あなたのウェブサイトを加えるために[Pull Request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md)を投げてください。

exampleSite/content/users/index.md

@@ -66,5 +66,9 @@ The list below is just a handful of the websites that are built using the Congo
 | [yoganath.me](https://yoganath.me)                                     | Personal Site and Blog          |
 | [josh-v.com](https://josh-v.com)                                       | Personal Site and Tech blog     |
 | [rshmhrj.io](https://rshmhrj.io/)                                      | Personal Site and Tech blog     |
+| [jamesjarvis.io](https://jamesjarvis.io)                               | Personal Site and Blog          |
+| [jnsgr.uk](https://jnsgr.uk)                                           | Personal site and blog          |
+| [stupidjoey.net](https://stupidjoey.net)                               | Personal Site and Tech blog     |
+| [aminelch.github.io](https://aminelch.github.io)                       | Personal Site and Blog          |
 
 **Congo user?** To add your site to this list, [submit a pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md).

exampleSite/content/users/index.zh-cn.md

@@ -66,5 +66,9 @@ showEdit: false
 | [yoganath.me](https://yoganath.me)                                     | Personal Site and Blog          |
 | [josh-v.com](https://josh-v.com)                                       | Personal Site and Tech blog     |
 | [rshmhrj.io](https://rshmhrj.io/)                                      | Personal Site and Tech blog     |
+| [jamesjarvis.io](https://jamesjarvis.io)                               | Personal Site and Blog          |
+| [jnsgr.uk](https://jnsgr.uk)                                           | Personal site and blog          |
+| [stupidjoey.net](https://stupidjoey.net)                               | Personal Site and Tech blog     |
+| [aminelch.github.io](https://aminelch.github.io)                       | Personal Site and Blog          |
 
 **想成为Congo的用户？** 要将您的网站添加到此列表中，请提交[Pull Request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md)来添加。

layouts/_default/_markup/render-image.html

@@ -20,7 +20,9 @@
 
 <figure>
   {{- with $img -}}
-    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2 "lazy" $lazy "webp" $webp) }}
   {{- else -}}
     <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}" />
   {{- end -}}

layouts/_default/single.html

@@ -10,14 +10,23 @@
       <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
         {{ .Title | emojify }}
       </h1>
-      <div class="mb-12 mt-8 text-base text-neutral-500 print:hidden dark:text-neutral-400">
-        {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
-      </div>
+      {{ if or
+        (.Params.showDate | default (.Site.Params.article.showDate | default true))
+        (and (.Params.showDateUpdated | default (.Site.Params.article.showDateUpdated | default false)) (ne (partial "functions/date.html" .Date) (partial "functions/date.html" .Lastmod)))
+        (and (.Params.showWordCount | default (.Site.Params.article.showWordCount | default false)) (ne .WordCount 0))
+        (and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0))
+        (.Params.showEdit | default (.Site.Params.article.showEdit | default false))
+      }}
+        <div class="mb-12 mt-8 text-base text-neutral-500 print:hidden dark:text-neutral-400">
+          {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
+        </div>
+      {{ end }}
       {{ with $feature }}
         <div class="prose">
           {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
           {{ $class := "mb-6 -mt-4 rounded-md" }}
-          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
+          {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false "webp" $webp) }}
           {{ with $.Params.coverCaption }}
             <figcaption class="-mt-3 mb-6 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/author.html

@@ -1,19 +1,12 @@
 {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
   <div class="flex">
+    {{ $lazy := .Params.enableImageLazyLoading|default  .Site.Params.enableImageLazyLoading | default true }}
+    {{ $altText := ($.Site.Language.Params.Author.name | default "Author") }}
     {{ with .Site.Language.Params.Author.image }}
       {{ $authorImage := resources.Get . }}
       {{ if $authorImage }}
-        {{ $authorImage := $authorImage.Fill "192x192 Center" }}
-        <img
-          class="!mb-0 !mt-0 me-4 h-24 w-24 rounded-full"
-          width="96"
-          height="96"
-          alt="{{ $.Site.Language.Params.Author.name | default "Author" }}"
-          src="{{ $authorImage.RelPermalink }}"
-          {{ if $.Site.Params.enableImageLazyLoading | default true }}
-            loading="lazy"
-          {{ end }}
-        />
+        {{ $imgClass := "!mb-0 !mt-0 me-4 w-24 h-auto rounded-full" }}
+        {{ partial "picture.html" (dict "img" $authorImage "alt" $altText "class" $imgClass "lazy" $lazy  ) }}
       {{ end }}
     {{ end }}
     <div class="place-self-center">

layouts/partials/head.html

@@ -2,7 +2,6 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="rgb(255,255,255)" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="rgb(255,255,255)" />
   {{/* Title */}}
   {{ if .IsHome -}}
     <title>{{ .Site.Title | emojify }}</title>

layouts/partials/home/profile.html

@@ -4,17 +4,13 @@
   {{ end }} flex flex-col items-center justify-center text-center"
 >
   <header class="mb-3 flex flex-col items-center">
+    {{ $lazy := .Params.enableImageLazyLoading | default .Site.Params.enableImageLazyLoading | default true }}
+    {{ $altText := ($.Site.Language.Params.Author.name | default "Author") }}
     {{ with .Site.Language.Params.Author.image }}
       {{ $authorImage := resources.Get . }}
       {{ if $authorImage }}
-        {{ $authorImage := $authorImage.Fill "288x288 Center" }}
-        <img
-          class="mb-2 h-36 w-36 rounded-full"
-          width="144"
-          height="144"
-          alt="{{ $.Site.Language.Params.Author.name | default "Author" }}"
-          src="{{ $authorImage.RelPermalink }}"
-        />
+        {{ $imgClass := "mb-2 h-auto w-36 rounded-full" }}
+        {{ partial "picture.html" (dict "img" $authorImage "alt" $altText "class" $imgClass "lazy" $lazy) }}
       {{ end }}
     {{ end }}
     <h1 class="text-4xl font-extrabold">

layouts/partials/picture.html

@@ -1,8 +1,8 @@
 {{ $img := .img }}
 {{ $alt := .alt }}
 {{ $class := .class }}
-{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
-{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
+{{ $lazy := .lazy }}
+{{ $webp := .webp }}
 {{ $lqip := .lqip | default false }}
 {{ $x2 := .x2 | default false }}
 
@@ -57,7 +57,7 @@
         <source
           {{ if lt .Width 660 }}
             {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-              src="{{ .RelPermalink }}"
+              srcset="{{ .RelPermalink }}"
             {{ end }}
           {{ else }}
             srcset=" {{- (.Resize "330x webp").RelPermalink }} 330w,
@@ -70,19 +70,18 @@
               {{ end }}
             {{ end }}
             {{ if gt .Width 1320 }}
-              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
+              ,{{ (.Resize "1320x webp").RelPermalink }} 1320w
             {{ else }}
               {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
                 ,{{ .RelPermalink }} {{ .Width }}w
               {{ end }}
             {{ end }}"
-            src="{{ (.Resize "660x webp").RelPermalink }}"
           {{ end }}
+          sizes="100vw"
           type="image/webp"
         />
       {{ end }}
       <img
-        src="{{ .RelPermalink }}"
         width="{{ $width }}"
         height="{{ $height }}"
         {{ with $class }}class="{{ . }}"{{ end }}
@@ -91,20 +90,20 @@
         {{ if lt .Width 660 }}
           src="{{ .RelPermalink }}"
         {{ else }}
+          src="{{ (.Resize "660x").RelPermalink }}"
           srcset=" {{- (.Resize "330x").RelPermalink }} 330w,
-          {{- (.Resize "660x").RelPermalink }}
-          660w
+          {{- (.Resize "660x").RelPermalink }} 660w
           {{ if gt .Width 1024 }}
             ,{{ (.Resize "1024x").RelPermalink }} 1024w
           {{ else }}
             ,{{ .RelPermalink }} {{ .Width }}w
           {{ end }}
           {{ if gt .Width 1320 }}
-            ,{{ (.Resize "1320x").RelPermalink }} 2x
+            ,{{ (.Resize "1320x").RelPermalink }} 1320w
           {{ else }}
             ,{{ .RelPermalink }} {{ .Width }}w
           {{ end }}"
-          src="{{ (.Resize "660x").RelPermalink }}"
+          sizes="100vw"
         {{ end }}
       />
     </picture>

layouts/partials/translations.html

@@ -20,10 +20,10 @@
           >
         </button>
         {{ if eq $dir "down" }}
-          <div class="invisible h-2 w-full bg-transparent group-hover:visible"></div>
+          <div class="invisible w-full bg-transparent group-hover:visible"></div>
         {{ end }}
         <div
-          class="{{ cond (eq $dir "down") "top-8" "bottom-7" }} invisible absolute z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible ltr:right-0 rtl:left-0 dark:border-neutral-600 dark:bg-neutral-800"
+          class="{{ if not (eq $dir "down") }} bottom-7 {{ end }} invisible absolute z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible ltr:right-0 rtl:left-0 dark:border-neutral-600 dark:bg-neutral-800"
         >
           {{ $siteLanguages := site.Languages }}
           {{ $pageLang := .Page.Lang }}

layouts/shortcodes/figure.html

@@ -19,7 +19,9 @@
     {{ with $href }}<a href="{{ . }}">{{ end }}
 
     {{- with $img -}}
-      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
+      {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+      {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" $lazy "webp" $webp) }}
     {{- else -}}
       <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
     {{- end -}}

layouts/shortcodes/screenshot.html

@@ -13,7 +13,9 @@
       {{ $altText = (.Get "caption") | markdownify | plainify }}
     {{ end }}
 
-    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true "lazy" $lazy "webp" $webp) }}
 
     {{- if .Get "href" }}</a>{{ end -}}
     {{- if .Get "caption" -}}