From bf11268599ad09faac926236e89db4cdb50f0c82 Mon Sep 17 00:00:00 2001
From: Quentin Duchemin <quentinduchemin@tuta.io>
Date: Wed, 9 Aug 2023 21:08:28 +0200
Subject: [PATCH] Blur image server side to avoid performance issues

---
 config.yaml                                |  2 +
 themes/chosto/layouts/partials/head.html   |  1 +
 themes/chosto/layouts/partials/header.html | 43 +++++++++++-----------
 themes/chosto/static/css/custom.css        |  7 +---
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/config.yaml b/config.yaml
index c929c19..cdbff98 100644
--- a/config.yaml
+++ b/config.yaml
@@ -21,6 +21,8 @@ markup:
     renderer:
       # Render newlines as <br>
       hardWraps: true
+      # Render HTML in MD files, necessary for superscript
+      unsafe: true
   tableOfContents:
     endLevel: 3
     ordered: false
diff --git a/themes/chosto/layouts/partials/head.html b/themes/chosto/layouts/partials/head.html
index 985290e..0a3b36b 100644
--- a/themes/chosto/layouts/partials/head.html
+++ b/themes/chosto/layouts/partials/head.html
@@ -16,6 +16,7 @@
   {{ $image = . }}
   {{ end }}
   {{ $image = $image.Resize "3000x" }}
+  {{ $image := $image | images.Filter (images.GaussianBlur 7) }}
   <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
   <style>
     .has-bg-img {
diff --git a/themes/chosto/layouts/partials/header.html b/themes/chosto/layouts/partials/header.html
index 5ecf74a..5ecc7cc 100644
--- a/themes/chosto/layouts/partials/header.html
+++ b/themes/chosto/layouts/partials/header.html
@@ -4,29 +4,27 @@
 {{ $background := in "page home" .Kind }}
 <header>
   <section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'>
-    <div class="blur">
-      <div class="hero-head mx-5">
-        <div class="level mt-4">
-          <div class="level-left">
-            {{ with .Params.imgLicence }}
-            <p class="level-item subtitle is-size-5-desktop is-size-7-mobile">
-              Image d'illustration {{ . }}
-            </p>
-            {{ end }}
-          </div>
-          <div class="level-right mt-3 is-hidden-touch">
-            <div class="level-item">
-              {{ with .Params.categories }}
-              <div class="tags colums is-vcentered">
-                {{ range . }}
-                <span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
-                {{ end }}
-              </div>
+    <div class="hero-head mx-5">
+      <div class="level mt-4">
+        <div class="level-left">
+          {{ with .Params.imgLicence }}
+          <p class="level-item subtitle is-size-5-desktop is-size-7-mobile">
+            Image d'illustration {{ . }}
+          </p>
+          {{ end }}
+        </div>
+        <div class="level-right mt-3 is-hidden-touch">
+          <div class="level-item">
+            {{ with .Params.categories }}
+            <div class="tags colums is-vcentered">
+              {{ range . }}
+              <span class="tag is-info is-light is-large mr-4"><a
+                  href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
               {{ end }}
             </div>
+            {{ end }}
           </div>
         </div>
-
       </div>
       <div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered">
         <p class="title is-size-1-desktop is-size-3-mobile is-uppercase">{{ .Title }}</p>
@@ -41,14 +39,17 @@
           <div class="level-left">
             <div class="level-item has-text-left">
               <time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
-                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
+                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le
+                  <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }}
+                    {{ .Date.Year }}</strong></p>
               </time>
             </div>
           </div>
           <div class="level-right">
             <div class="level-item has-text-right">
               <div>
-                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
+                <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ
+                  <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
                 </p>
               </div>
             </div>
diff --git a/themes/chosto/static/css/custom.css b/themes/chosto/static/css/custom.css
index 7b9e36a..9cba8c1 100644
--- a/themes/chosto/static/css/custom.css
+++ b/themes/chosto/static/css/custom.css
@@ -9,11 +9,6 @@
   font-display: swap;
 }
 
-/* Make the parent background blur under this element */
-.blur {
-  backdrop-filter: blur(3px);
-}
-
 /* Trick which changes nothing visually but makes the footnote anchors
 virtually 40% lower. Otherwise the fixed navbar is just above the
 footnote link when going back from the bottom. That way, either 
@@ -46,7 +41,7 @@ p:not(.title, .subtitle) {
   font-size: 1rem;
 }
 
-figcaption h4 {
+figcaption h4, figcaption p {
   margin-top: 10px;
   font-size: 1rem !important;
   font-weight: 400 !important;