From 58d18987c301ee85661b4a5666e5aab7fdc5ee96 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Wed, 30 Oct 2024 21:47:40 +0100 Subject: [PATCH] =?UTF-8?q?lives:=20cr=C3=A9ation=20de=20la=20section=20li?= =?UTF-8?q?ves?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- assets/scss/_stream.scss | 43 ++++++++++++++ assets/scss/main.scss | 20 +++++++ content/blog/_index.md | 7 ++- .../{blog => lives}/1st-live-au-picotin.md | 0 content/{blog => lives}/7th-live.md | 0 content/lives/_index.md | 38 +++++++++++++ content/{blog => lives}/le-8e-live.md | 0 content/{blog => lives}/un-4e-live.md | 0 .../un-live-du-samedi-de-plus.md | 0 content/à-propos.md | 6 +- hugo.yaml | 24 +++++--- layouts/_default/baseof.html | 15 +++++ layouts/partials/header.html | 57 +++++++++++++++++++ layouts/partials/stream.html | 18 ++++++ static/js/on_fiber.js | 16 ++++++ themes/portfoliGor | 2 +- 16 files changed, 234 insertions(+), 12 deletions(-) create mode 100644 assets/scss/_stream.scss create mode 100644 assets/scss/main.scss rename content/{blog => lives}/1st-live-au-picotin.md (100%) rename content/{blog => lives}/7th-live.md (100%) create mode 100644 content/lives/_index.md rename content/{blog => lives}/le-8e-live.md (100%) rename content/{blog => lives}/un-4e-live.md (100%) rename content/{blog => lives}/un-live-du-samedi-de-plus.md (100%) create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/partials/header.html create mode 100644 layouts/partials/stream.html create mode 100644 static/js/on_fiber.js diff --git a/assets/scss/_stream.scss b/assets/scss/_stream.scss new file mode 100644 index 0000000..d2dc9e1 --- /dev/null +++ b/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 diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..7f355bf --- /dev/null +++ b/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"; diff --git a/content/blog/_index.md b/content/blog/_index.md index c98656c..6e3bbfd 100644 --- a/content/blog/_index.md +++ b/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. + + +[1]: /lives diff --git a/content/blog/1st-live-au-picotin.md b/content/lives/1st-live-au-picotin.md similarity index 100% rename from content/blog/1st-live-au-picotin.md rename to content/lives/1st-live-au-picotin.md diff --git a/content/blog/7th-live.md b/content/lives/7th-live.md similarity index 100% rename from content/blog/7th-live.md rename to content/lives/7th-live.md diff --git a/content/lives/_index.md b/content/lives/_index.md new file mode 100644 index 0000000..a8bacd0 --- /dev/null +++ b/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. + + + + +[^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 diff --git a/content/blog/le-8e-live.md b/content/lives/le-8e-live.md similarity index 100% rename from content/blog/le-8e-live.md rename to content/lives/le-8e-live.md diff --git a/content/blog/un-4e-live.md b/content/lives/un-4e-live.md similarity index 100% rename from content/blog/un-4e-live.md rename to content/lives/un-4e-live.md diff --git a/content/blog/un-live-du-samedi-de-plus.md b/content/lives/un-live-du-samedi-de-plus.md similarity index 100% rename from content/blog/un-live-du-samedi-de-plus.md rename to content/lives/un-live-du-samedi-de-plus.md diff --git a/content/à-propos.md b/content/à-propos.md index a7639c2..9e5c764 100644 --- a/content/à-propos.md +++ b/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 diff --git a/hugo.yaml b/hugo.yaml index 6096ed6..2d2ec53 100644 --- a/hugo.yaml +++ b/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 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..356b64c --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,15 @@ + + +{{ partial "head.html" . }} + + {{- partial "header.html" . -}} +
+ {{- block "main" . }}{{- end }} +
+ {{- partial "footer.html" . -}} + + {{ if .Params.local_include }} + + {{ end }} + diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..15aef03 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,57 @@ +
+ + {{ if .Params.local_include }} + {{ partial "stream.html" }} + {{ end }} +
diff --git a/layouts/partials/stream.html b/layouts/partials/stream.html new file mode 100644 index 0000000..7c54f00 --- /dev/null +++ b/layouts/partials/stream.html @@ -0,0 +1,18 @@ +
+
+

+ +
+
+

+ Écouter le flux (s'il est « on »). + Pour utiliser ton propre client : + OGG + MP3 +

+
+
diff --git a/static/js/on_fiber.js b/static/js/on_fiber.js new file mode 100644 index 0000000..ccd5a61 --- /dev/null +++ b/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); diff --git a/themes/portfoliGor b/themes/portfoliGor index 47ccca9..480290f 160000 --- a/themes/portfoliGor +++ b/themes/portfoliGor @@ -1 +1 @@ -Subproject commit 47ccca91d16df2e2c772eaaa9a72bbaca1ad34be +Subproject commit 480290f589be4dca2eb2f28770b70c350b8d69f9