đŸȘ„ Rendre un blog hugo plus dynamique avec HTMX

| ~ 2 mins | 385 mots

Je suis un dĂ©veloppeur trĂšs orientĂ© backend, logique interne et rarement amenĂ© Ă  me poser des questions d’interface, nĂ©anmoins, j’ai suivi dans les grandes lignes les Ă©volutions des technologies d’interface cĂŽtĂ© frontend d’application web. Nous sommes ainsi passĂ©, dans le monde du web, d’applicatif fortement gĂ©rĂ© par le backend Ă  un frontend quasi-autonome Ă  base de beaucoup de javascript, les fameuses « Single Pages Apps » avec les frameworks tel que Vue, React, Angular ou encore Svelte.

Je ne suis pas un grand fan de configurer des interfaces et ces logiciels me font un peu peur de prime abord, il existe tout un Ă©cosystĂšme trĂšs complexe et complet autours et je n’ai ni l’envie ni le temps d’y jeter un Ɠil approfondi.

Une technologie va peut-ĂȘtre me rĂ©concilier un peu avec les interfaces, c’est HTMX. L’idĂ©e est de convertir le plus possible de javascript en html et ainsi de complĂ©ter la logique d’hypermĂ©dia qui lui Ă©tĂ© prĂ©vu Ă  l’origine. À propos d’hypermĂ©dia, le livre Hypermedia Systems est super intĂ©ressant.

En cherchant un peu dans HTMX, j’ai trouvĂ© de quoi rendre ce site un peu plus interactif grĂące Ă  simplement 2 propriĂ©tĂ©s : hx-indicator et hx-boost, en rendant le changement de page un lĂ©gĂšrement plus interactif tout en restant fonctionnel sans javascript.

Voici mes changements dans mon thÚme custom Hugo basé sur le thÚme etch :

diff --git a/themes/etch/layouts/_default/baseof.html b/themes/etch/layouts/_default/baseof.html
index 0a5d1f7..1196478 100644
--- a/themes/etch/layouts/_default/baseof.html
+++ b/themes/etch/layouts/_default/baseof.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
     {{- partial "head.html" . -}}
-    <body>
+    <body hx-boost="true"  hx-indicator="#spinner">
         {{- partial "header.html" . -}}
         <main id="content">
         {{- block "main" . }}{{- end }}
diff --git a/themes/etch/layouts/partials/head.html b/themes/etch/layouts/partials/head.html
index d6aed0c..e4e261f 100644
--- a/themes/etch/layouts/partials/head.html
+++ b/themes/etch/layouts/partials/head.html
@@ -27,6 +27,8 @@
     {{ $css := $resources | resources.Concat "css/style.css" | minify }}
     {{ printf `<link rel="stylesheet" href="%s">` $css.RelPermalink | safeHTML }}
 
+    {{ $js := (resources.Get "javascript/htmx-1.9.5.min.js") }}
+    {{ printf `<script src="%s"></script>` $js.RelPermalink | safeHTML }}
     <link rel="canonical" href="{{ .Permalink }}" />
     <title>{{ .Title }}</title>
 </head>
diff --git a/themes/etch/layouts/partials/header.html b/themes/etch/layouts/partials/header.html
index 9a66449..23a2642 100644
--- a/themes/etch/layouts/partials/header.html
+++ b/themes/etch/layouts/partials/header.html
@@ -1,4 +1,6 @@
 <header id="banner">
+    {{ $svg := resources.Get "svg/bars.svg" }}
+    <img  id="spinner" class="htmx-indicator" src="{{$svg.RelPermalink}}" alt="Updating page.."/>
     <h2><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
     <nav>
         <ul>

J’ai ainsi une jolie animation de chargement qui apparaĂźt Ă  chaque changement de page 😃.