From 7e970f4c9718a690a61845eb109817446339fb92 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Sun, 15 Jan 2023 10:38:53 +1100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20SVG=20support=20to=20article?=
 =?UTF-8?q?=20featured=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                               |  1 +
 assets/css/compiled/main.css               | 16 ++++++++++++++++
 layouts/_default/_markup/render-image.html | 18 +++++++++++-------
 layouts/_default/single.html               | 18 ++++++++++++------
 layouts/partials/article-link.html         | 14 +++++++++-----
 layouts/shortcodes/figure.html             | 18 +++++++++++-------
 6 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2bf4516..34719d1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption)
+- Support for SVG assets as article thumbnails, covers and featured images
 - Front matter keywords support on a per article basis
 - Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398))
 - Mastodon sharing links ([#405](https://github.com/jpanther/congo/pull/405))
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index f53854ab..08cb9bdb 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1890,6 +1890,10 @@ body:has(#menu-controller:checked) {
   height: 9rem;
 }
 
+.max-h-\[4\.5rem\] {
+  max-height: 4.5rem;
+}
+
 .max-h-\[10rem\] {
   max-height: 10rem;
 }
@@ -1950,6 +1954,10 @@ body:has(#menu-controller:checked) {
   max-width: 65ch;
 }
 
+.max-w-\[6rem\] {
+  max-width: 6rem;
+}
+
 .max-w-\[10rem\] {
   max-width: 10rem;
 }
@@ -2883,6 +2891,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .sm\:max-h-\[7\.5rem\] {
+    max-height: 7.5rem;
+  }
+
   .sm\:w-1\/2 {
     width: 50%;
   }
@@ -2891,6 +2903,10 @@ body:has(#menu-controller:checked) {
     width: 10rem;
   }
 
+  .sm\:max-w-\[10rem\] {
+    max-width: 10rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 63c27b73..81ec946e 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -17,15 +17,19 @@
     <figure>
       <img
         class="mx-auto my-0 rounded-md"
-        {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+        {{ if eq .MediaType.SubType "svg" }}
           src="{{ .RelPermalink }}"
         {{ else }}
-          srcset="
-          {{ (.Resize "330x").RelPermalink }} 330w,
-          {{ (.Resize "660x").RelPermalink }} 660w,
-          {{ (.Resize "1024x").RelPermalink }} 1024w,
-          {{ (.Resize "1320x").RelPermalink }} 2x"
-          src="{{ (.Resize "660x").RelPermalink }}"
+          {{ if lt .Width 660 }}
+            src="{{ .RelPermalink }}"
+          {{ else }}
+            srcset="
+            {{ (.Resize "330x").RelPermalink }} 330w,
+            {{ (.Resize "660x").RelPermalink }} 660w,
+            {{ (.Resize "1024x").RelPermalink }} 1024w,
+            {{ (.Resize "1320x").RelPermalink }} 2x"
+            src="{{ (.Resize "660x").RelPermalink }}"
+          {{ end }}
         {{ end }}
         alt="{{ $altText }}"
       />
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 557f6995..3bb6ea80 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -17,12 +17,18 @@
         <div class="prose">
           <img
             class="mb-6 -mt-4 rounded-md"
-            srcset="
-          {{- (.Resize "330x").RelPermalink }} 330w,
-          {{- (.Resize "660x").RelPermalink }} 660w,
-          {{- (.Resize "1024x").RelPermalink }} 1024w,
-          {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
+            {{ if eq .MediaType.SubType "svg" }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              {{ if lt .Width 660 }}
+                src="{{ .RelPermalink }}"
+              {{ else }}
+                srcset=" {{ (.Resize "330x").RelPermalink }} 330w,
+                {{ (.Resize "660x").RelPermalink }} 660w, {{ (.Resize "1024x").RelPermalink }}
+                1024w, {{ (.Resize "1320x").RelPermalink }} 2x"
+                src="{{ (.Resize "660x").RelPermalink }}"
+              {{ end }}
+            {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
           />
           {{ with $.Params.coverCaption }}
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
index 8c92bd49..d2907aed 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -13,12 +13,16 @@
         aria-label="{{ $.Title | emojify }}"
       >
         <img
-          class="w-24 rounded-md sm:w-40"
-          srcset="
-          {{- (.Fill "160x120 smart").RelPermalink }} 160w,
-          {{- (.Fill "320x240 smart").RelPermalink }} 2x"
-          src="{{ (.Fill "160x120 smart").RelPermalink }}"
           alt="{{ $.Params.featureAlt | default $.Params.thumbnailAlt | default "" }}"
+          {{ if eq .MediaType.SubType "svg" }}
+            class="w-24 max-w-[6rem] max-h-[4.5rem] rounded-md sm:max-h-[7.5rem] sm:w-40
+            sm:max-w-[10rem]" src="{{ .RelPermalink }}"
+          {{ else }}
+            class="w-24 rounded-md sm:w-40" srcset="
+            {{- (.Fill "160x120 smart").RelPermalink }}
+            160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
+            src="{{ (.Fill "160x120 smart").RelPermalink }}"
+          {{ end }}
         />
       </a>
     </div>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 54cff269..58ff4fc2 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -21,15 +21,19 @@
           {{ $resource = resources.Get ($url.String) }}
         {{ end }}
         {{ with $resource }}
-          {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+          {{ if eq .MediaType.SubType "svg" }}
             src="{{ .RelPermalink }}"
           {{ else }}
-            srcset="
-            {{ (.Resize "330x").RelPermalink }} 330w,
-            {{ (.Resize "660x").RelPermalink }} 660w,
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
-            {{ (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
+            {{ if lt .Width 660 }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              srcset="
+              {{ (.Resize "330x").RelPermalink }} 330w,
+              {{ (.Resize "660x").RelPermalink }} 660w,
+              {{ (.Resize "1024x").RelPermalink }} 1024w,
+              {{ (.Resize "1320x").RelPermalink }} 2x"
+              src="{{ (.Resize "660x").RelPermalink }}"
+            {{ end }}
           {{ end }}
         {{ else }}
           src="{{ $url.String }}"