lives: création de la section lives

crée la section des *lives*, avec le player pour la diffusion au sommet
de chaque page, que ce soit l'accueil de la section ou les différents
billets. suppose de surcharger certains *templates* et fichier *scss*.
ajoute également le fichier javascript pour le bouton on/off du player.
déplace les différents billets dans la nouvelle section.

mets à jour le thème pour quelques modifications mineures.

Co-Authored-by: iGor milhit <igor@milhit.ch>

assets/scss/_stream.scss

@@ -0,0 +1,43 @@
+// The following rules are styling the stream player
+// that I'm using on top of live section pages.
+// It doesn't belong to the theme, but to my website
+// so it is here.
+
+@use "@picocss/pico/scss/colors/index" as *;
+
+.stream {
+  .status-player {
+    display: flex;
+
+    audio {
+      border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
+    }
+  }
+}
+
+// Rules used by the off and on classes below
+@mixin status {
+  display: flex;
+  border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: space-around;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+  padding: 0 calc(var(--pico-spacing)/2);
+  margin: 0;
+  color: $grey-50;
+}
+
+.off {
+  @include status;
+  background-color: $red-500;
+}
+
+.on {
+  @include status;
+  background-color: $green-500;
+}
+
+// End of the stream section

assets/scss/main.scss

@@ -0,0 +1,20 @@
+////////////////////
+//                //
+//    Includes    //
+//                //
+////////////////////
+
+// Overwrite the main SCSS theme file
+// to add the stream rules that doesn't belong
+// to the theme.
+
+@use "picocss";     /* The pico css framework, customized */
+@use "fonts";       /* The font face and fonts settings */
+@use "variables";   /* Overrides the pico css variables and sets others */
+@use "layout";      /* Main structure display */
+@use "header";
+@use "footer";
+@use "lists";       /* Lists, post-infos, posts-lists */
+@use "medias";      /* Audio, streams, figures, post-images */
+@use "stream";      /* Specific to the stream player */
+@use "texts";

content/blog/_index.md

@@ -4,5 +4,10 @@ date: 2019-09-01T07:52:46+02:00
 draft: false
 ---
 
-Voici la liste des billets récemments publiés sur ce blog :
+Ci-dessous, la liste des billets publiés sur ce blog. Attention, une nouvelle
+section a été crée pour les [*lives*][1], et certains billets ont donc été
+déplacés.
 
+<!-- références -->
+
+[1]: /lives

content/lives/_index.md

@@ -0,0 +1,38 @@
+---
+title: "Lives"
+date: 2024-10-30T20:12:17+0100
+draft: false
+cascade:
+  local_include: true
+---
+
+Cette section du site regroupe les billets consacrés à la diffusion de *lives*.
+Je transmets parfois sur le web la sortie d'une table de mixage sur laquelle
+sont branchées deux platines vinyles.
+
+Je le fais depuis mars 2019, et jusqu'en novembre 2024, on trouvait la liste
+des diffusion sur une page du site [id-libre][1], à savoir
+[id-libre.org/live][2]. Désormais, tout est regroupé ici[^1], même si concrètement
+le flux et parfois les enregistrements sont encore servis par [id-libre][1].
+
+Le lecteur au sommet de la page permet d'écouter le flux, lorsqu'il est actif,
+lorsque le bouton à gauche du lecteur affiche « ON ». Si tu en as la curiosité,
+ou s'il n'y a pas de bouton (puisqu'on ne peut pas compter sur le javascript),
+tu peux ouvrir le lien suivant, et vérifier s'il contient le mot *source*,
+signe que le flux est actif : [status-json.xsl][3].
+
+Habituellement, dans les billets ci-dessous, tu devrais trouver un lecteur (et
+des liens pour télécharger les fichiers) pour écouter les enregistrements des
+*lives* du passés, ainsi que la liste des morceaux joués.
+
+On remercie bien entendu les artistes, les développeurs et les développeuses
+sans qui rien de tout ça ne serait possible.
+
+
+<!-- références -->
+
+[^1]: Ou plutôt, tout sera regroupé ici. La migration est en cours.
+
+[1]: https://id-libre.org
+[2]: https://id-libre.org/live
+[3]: https://id-libre.org/live/status-json.xsl

content/à-propos.md

@@ -11,8 +11,9 @@ slug: à-propos
 
 Ce site web à pour but de me présenter à la fois personnellement et
 professionnellement, ainsi que de laisser des traces éphémères dans une section
-[*blog*][8]. J‘ai expliqué le regroupement de ces deux aspects à l‘ouverture de
-ce site, dans le billet [« nouvelle version »][1].
+[*blog*][8], ainsi que des diffusions sonores dans une section [*lives*][14].
+J‘ai expliqué le regroupement de ces deux aspects à l‘ouverture de ce site,
+dans le billet [« nouvelle version »][1].
 
 Au départ, il y a l‘envie d‘avoir un coin ou tisser mes bouts de toile sur
 cette machine à éditer du texte qu‘est le web. Puis, j‘ai réalisé que je
@@ -54,3 +55,4 @@ moyen qui te convient le plus][10].
 [11]: https://git.milhit.ch/igor/portfoligor/releases/tag/v0.3.0
 [12]: https://picocss.com/
 [13]: https://lilex.myrt.co/
+[14]: /lives

hugo.yaml

@@ -33,34 +33,40 @@ menu:
     title: La section blog
     url: /blog/
     weight: 0
+  - identifier: lives
+    name: Lives
+    title: La section des lives
+    url: /lives/
+    weight: 0
   - identifier: à-propos
     name: À propos
     title: À propos de ce site web
     url: /à-propos/
     weight: -2
-  - identifier: contacts
-    name: Contacts
-    title: Me contacter
-    url: /#online
-    weight: 1
   footer:
   - identifier: credits
     name: Crédits
     url: /à-propos/#crédits
-    weight: -100
+    weight: -2
+  - identifier: contacts
+    name: Contacts
+    title: Me contacter
+    url: /#contacts-priv
+    weight: -1
   - identifier: sources
     name: Sources
     title: Sources du site
     url: https://git.milhit.ch/igor/igor.milhit
-    weight: 20
+    weight: 2
   - identifier: licence
     name: cc-by
     title: Licence Creative Commons By 4.0
     url: http://creativecommons.org/licenses/by/4.0/
-    weight: 10
+    weight: 1
 permalinks:
   posts: :slug
   blog: :slug
+  lives: :slug
 frontmatter:
   date:
   - date
@@ -101,3 +107,5 @@ params:
     cv: cv-igor-milhit.pdf
   online:
     git: https://git.milhit.ch/igor
+  local_include:
+    js: on_fiber.js

layouts/_default/baseof.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="{{ .Language.Lang }}" prefix="og: http://ogp.me/ns#">
+{{ partial "head.html" . }}
+<body>
+  {{- partial "header.html" . -}}
+  <main aria-role="main" class="container"
+        itemscope itemtype="https://schema.org/Person">
+  {{- block "main" . }}{{- end }}
+  </main>
+  {{- partial "footer.html" . -}}
+</body>
+  {{ if .Params.local_include }}
+    <script src="/js/on_fiber.js"></script>
+  {{ end }}
+</html>

layouts/partials/header.html

@@ -0,0 +1,57 @@
+<header class="container main-header">
+  <nav class="no-print" role="navigation" aria-label="Primary">
+    <ul>
+      <li>
+        <!-- Insert the logo in SVG xml -->
+        <a href="{{ .Site.BaseURL }}"
+           title="{{ .Site.Title }}">
+          {{ partial "logo.html" }}
+        </a>
+      </li>
+      <li>
+        <a href="{{ .Site.BaseURL }}"
+          class="title no-reformat"
+          title="{{ .Site.Title }}" >
+          <h1>{{ .Site.Title }}</h1>
+        </a>
+      </li>
+    </ul>
+    <ul class="header-navigation">
+      {{ $currentPage := . -}}
+      {{ range sort .Site.Menus.main -}}
+      <li class="nav-item secondary">
+        <a class="nav-item-link{{if or (
+          $currentPage.IsMenuCurrent "main" .
+          ) (
+          $currentPage.HasMenuCurrent "main" .
+          ) }} active{{end}}"
+           href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+      </li>
+      {{ end -}}
+      <li class="nav-item secondary">
+        {{ if .IsPage -}}
+        <a class="nav-item-link"
+           href="{{ .Site.BaseURL }}index.xml"
+           title="{{ i18n "subscribeToPublications" }} {{ i18n "toWebsite" }}">
+          {{ i18n "subscribe" }}
+        </a>
+        {{ else if .IsHome -}}
+        <a class="nav-item-link"
+           href="{{ .Site.BaseURL }}index.xml"
+           title="{{ i18n "subscribeToPublications" }} {{ i18n "toWebsite" }}">
+          {{ i18n "subscribe" }}
+        </a>
+        {{ else if .IsNode -}}
+        <a class="nav-item-link"
+           href="{{ .Permalink }}index.xml"
+           title="{{ i18n "subscribeToPublications" }} {{ i18n "toSection" }}">
+          {{ i18n "subscribe" }}
+        </a>
+        {{ end -}}
+      </li>
+    </ul>
+  </nav>
+  {{ if .Params.local_include }}
+    {{ partial "stream.html" }}
+  {{ end }}
+</header>

layouts/partials/stream.html

@@ -0,0 +1,18 @@
+ <figure class="stream">
+  <div class="status-player">
+    <p id="on"></p>
+    <audio controls>
+      <source src="https://id-libre.org/live/stream.ogg" type="audio/ogg">
+      <source src="https://id-libre.org/live/stream.mp3" type="audio/mp3">
+      <p>Your browser does not support the <code>audio</code> element.</p>
+    </audio>
+  </div>
+  <figcaption>
+    <p>
+      Écouter le flux (s'il est « on »).
+      Pour utiliser ton propre client :
+      <a href="https://id-libre.org/live/stream.ogg">OGG</a>
+      <a href="https://id-libre.org/live/stream.mp3">MP3</a>
+    </p>
+  </figcaption>
+</figure>

static/js/on_fiber.js

@@ -0,0 +1,16 @@
+const url = 'https://id-libre.org/live/status-json.xsl';
+const statusElement = document.getElementById('on');
+
+async function status() {
+  const response = await fetch(url);
+  const data = await response.json();
+  const status = data.icestats.source ? 'on' : 'off'
+
+  statusElement.innerHTML = status;
+  statusElement.classList.remove("on", "off");
+  statusElement.classList.add(status);
+}
+
+status();
+
+setInterval(() => status(), 2000);

themes/portfoliGor

@@ -1 +1 @@
-Subproject commit 47ccca91d16df2e2c772eaaa9a72bbaca1ad34be
+Subproject commit 480290f589be4dca2eb2f28770b70c350b8d69f9