🪄 Rendre un blog hugo plus dynamique avec HTMX
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 😃.