Je me suis récemment rendu compte que si réaliser une fiction audio prenait du temps (et par cela j’entends BEAUCOUP de temps), tout préparer pour sa sortie prenait également un petit moment. En bonne informaticienne, j’ai donc décidé de prendre encore plus de temps afin d’automatiser le processus de sortie des épisodes et ainsi, au final, gagner du temps. (Oui. J’y crois)

Je publie un épisode sur différents sites et ce sous différentes forme :

  • Sous Les Ondes (Article & lien de streaming, de téléchargement…)
  • Le site d’Oriog Créations (Article & lien de streaming, de téléchargement…)
  • Le Netophonix (Article & lien de streaming, de téléchargement…)
  • Podcloud (pour la publication sous flux RSS) (Mini Article & lien de téléchargement)
  • Youtube (Vidéo + description de la vidéo)

Cette série d’article visera à décrire comment j’ai cherché à automatiser le processus pour ces différents supports.

  • Partie 1 : Génération des articles avec Jekyll (cet article)
  • Partie 2 : Génération de flux RSS (pas fait, pas sorti !)
  • Partie 3 : Intégration avec PodCloud (pas fait, pas sorti !)
  • Partie 4 : Export en vidéo et upload sur youtube (pas fait, pas sorti !)

Ce premier article se concentrera sur l’automatisation de la création de l’article associé à la sortie d’un l’épisode, qui sera publié sur Sous les Ondes, le site d’Oriog ainsi que sur le Netophonix, utilisant les fonctionnalités de templates de Jekyll, le générateur de site statique sur lequel s’appuie actuellement Sous les Ondes.

(NB : Tout ce que je décris dans cet article n’est pas exclusif à Jekyll : il est sûrement possible d’implémenter la même chose avec Hugo, Pelican, Nikola et j’en passe avec quelques modification mineures des templates utilisés. Des CMS comme WordPress ont peut-être également des possibilités de template qui permettrait de réaliser une automatisation similaire)

Objectif et template

Un article de publication d’un épisode de fiction audio est composé de plusieurs choses :

  • Une introduction (“Coucou les gens blah blah blah”)

  • Jaquette, description, liens de téléchargement, streaming etc.

  • Les crédits (musique, ditribution, remerciements…)

  • Une conclusion

Cet article devra être plublié sur :

  • Sous Les Ondes (article écrit en markdown et HTML)

  • Le site d’Oriog Créations (article écrit en HTML)

  • Le Netophonix (article écrit en BBcode et en HTML)

Le dénominateur commun de ces sites étant le HTML, partons donc sur ce langage pour rédiger l’article !

N’étant pas un designeur aguerri, j’ai décidé d’un format de présentation plutôt simple et que je pense efficace :

layout d'un épisode

La seule partie un peu compliquée du code est la partie jaquette / liens de téléchargement : il s’agit de deux div flottantes permettant un template en deux colonnes (un tutoriel à ce sujet)

<div style="float: left; width: 30%; text-align:center;">
    <img src="https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01_jaquette.jpg" alt="jaquette" width="300px" height="300px" />
</div>
<div style="float: right; width:68%">
    <h3>Enfants d'Atlas - Episode 1</h3>
<p style="text-align:center;">
<audio src="https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01.mp3" controls="">
    <a href="https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01.mp3">Télécharger !</a>
</audio>
<br />
<a href="https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01.mp3"><span style="font-weight: 400;">Télécharger </span></a>
ou regarder sur <a href="https://youtu.be/AI-hswnLH1g">Youtube</a>
</p>
<p>

    <strong>Synopsis :</strong><br />
Laura a grandi dans la rancœur envers son père, Charles, qui l'a abandonnée lorsqu'elle n'avait que sept ans, alors que sa mère venait de mourir. Des années plus tard, lorsqu'elle apprend sa mort, elle découvre un héritage qu'elle n'aurait jamais soupçonné. Elle se retrouve, bien malgré elle, embarquée sur les traces... tumultueuses de son père.
</p>

</div>
<p><br style="clear:both;" /></p>

Ce template me convient bien, à l’exception du fait que j’aimerais qu’il soit également responsive, mais cela fera l’objet d’un prochain travail.

Une solution serait de copier coller un squelette de ce template puis de copier / coller chacune des données spécifique à l’épisode (URL de la jaquette, URL de l’épisode, synopsis…) mais cela est plutôt rébervatif, notamment pour l’URL de l’épisode qui est à trois endroits différents etc, et puisqu’il s’agit d’automatiser… automatisons.

Les “includes” de Jekyll avec Liquid

Les includes est un outil de Jekyll permettant de créer des templates. La documentation à ce sujet est disponible en anglais ici. Cet outil me permettra de générer facilement l’article sur mon site puis de n’avoir qu’à à copier coller la source de l’article sur le wordpress d’Oriog Créations et sur le Netophonix.

Le principe est d’inclure le contenu d’un fichier situé dans le dossier _includes du site en utilisant le tag liquid suivant : {% include NOM_DE_FICHIER_A_INCLURE %}. Très utile pour inclure des bouts de codes redondants dans les pages (je l’utilise par exemple pour inclure le menu ou le pied de page dans toutes les pages du site), les includes sont égalements très flexibles et puissantes car il est possible de passer des paramètres dans ces includes.

Si l’on revient à notre histoire d’article de publication d’épisode, on pourrait simplifier notre squelette de la façon suivante :


<!-- _includes/episode.html -->
<div style="float: left; width: 30%; text-align:center;">
    <img src="{{ include.jaquette }}" alt="jaquette" width="300px" height="300px" />
</div>
<div style="float: right; width:68%">
    <h3>{{ include.titre }}</h3>
<p style="text-align:center;">
<audio src="{{ include.url }}" controls="">
    <a href="{{ include.url }}">Télécharger !</a>
</audio>
<br />
<a href="{{ include.url }}"><span style="font-weight: 400;">Télécharger </span></a>
ou regarder sur <a href="{{ include.youtubeurl}}">Youtube</a>
</p>
<p>

    <strong>Synopsis :</strong><br />
{{ include.synospis }}</p>

</div>
<p><br style="clear:both;" /></p>

Le fichier de l’article deviendrait donc :


{% include episode jaquette="URL DE LA JAQUETTE"
                   url="URL DE L EPISODE"
                   youtubeurl="URL DE LA VIDEO YOUTUBE"
                   synospsis="SYNOPSIS DE LA MORT QUI TUE"}

(NB : si vous voulez jouer avec les includes Jekyll, sachez qu’il n’est pas possible de mettre des underscores dans les noms des variables. Ou peut-être me manque-t-il un caractère d’échappement ?)

Plutôt chouette, non ? Mais tenez vous bien à votre voisin, à votre voisine, ou tout simplement à la chose, inanimée ou non, située à côté de vous et en qui vous avez assez confiance pour vous maintenir : il y a encore pluuuus élégant !

Utilisation de fichiers datas

Les avantages de l’utilisation de fichiers yaml pour stocker les données de mes créations sont multiples par rapport aux autres explorées (“à la main” ou avec une utilisation naïve des includes) :

  1. Réutilisabilité du template : si je veux utiliser le template dans l’article de publication puis dans la page de présentation de saga puis… Je peux, et ce sera toujours aussi simple.
  2. Flexibilité : si je veux changer le template de présentation des épisodes, mettre à jour des infos… je peux et les changements seront répercutés partout dans mon site. (bon, ce sera ne sera pas le cas pour les articles publiés à l’extérieur de Sous les Ondes, mais ce sera au moins ça de moins à mettre à jour)
  3. Réutilisabilité des données : Si je veux utiliser les données de mes épisodes sous une autre forme que ce template (faire une simple liste des épisodes ? Les compter ? Publier un flux RSS ?) eh bien c’est tout à fait possible.

Ainsi, par exemple, pour l’épisode 1 d’Enfants d’Atlas, voici l’ensemble des données de l’article :

enfantsdatlas:
        s01e01: 
                titre: Enfants d'Atlas - Episode 1
                jaquette: "https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01_jaquette.jpg"
                jaquettealt: "Jaquette de l'épisode 1  Un homme se tient debout à l'entrée d'une caverne. Derrière lui, le fantôme d'un énorme brin d'ADN"
                url: "https://uploads.souslesondes.fr/EnfantsDAtlas/EnfantsDAtlas_Saison1_Episode01.mp3"
                youtube_url: "https://youtu.be/AI-hswnLH1g"
                texte:
                        intitule: Synopsis
                        texte: "Laura a grandi dans la rancœur envers son père, Charles, qui l'a abandonnée lorsqu'elle n'avait que sept ans, alors que sa mère venait de mourir. Des années plus tard, lorsqu'elle apprend sa mort, elle découvre un héritage qu'elle n'aurait jamais soupçonné. Elle se retrouve, bien malgré elle, embarquée sur les traces... tumultueuses de son père."
                credits:
                        - titre: Ecriture et Réalisation
                          item: Tamica
                        - titre: Distribution
                          items:
                                  - Charles Kirson - Hugo
                                  - '"Père" - Yggdrasil'
                                  - Laura Mannig-Kirson - Tamica
                                  - Henri Massier - Johnny
                                  - Elise Kirson - Ranne Madsen
                                  - Figuration - Aurore
                        - titre: Musique
                          items:
                                  - Tarin, Arstidir
                                  - Thème des Atlantes, Tamica
                                  - Brestir, Arstidir
                                  - Shades, Arstidir
                        - titre: Beta-Lecture
                          item: Cecomog, Draignaell
                        - titre: Beta-Ecoute
                          item: La dreamteam Oriog

Le template de diffusion devient alors :


<!-- Bandeau avec l'épisode -->

<div style="float: left; width: 30%; text-align:center;">
	<img src="{{ include.episode.jaquette }}" alt="{{ include.jaquettealt | default: "jaquette" }}" 
	width="300px" height="300px" />
</div>
<div style="float: right; width:68%">
	<h3>{{ include.episode.titre }}</h3>
<p style="text-align:center;">
<audio src="{{ include.episode.url }}" controls>
	<a href="{{ include.episode.url }}">Télécharger !</a>
</audio>
<br/>
<a href="{{ include.episode.url }}"><span style="font-weight: 400;">Télécharger </span></a>
{% if include.episode.youtube_url %}
ou regarder sur <a href="https://youtu.be/AI-hswnLH1g">Youtube</a>
{% endif %}
</p>
{% if include.episode.texte %}
<p>
	{% if include.episode.texte.intitule %}
	<strong>{{ include.episode.texte.intitule }} :</strong><br />
	{% endif %}
{{ include.episode.texte.texte }}
</p>
{% endif %}
</div>
<br style="clear:both;"/>

<!-- Distribution -->

{% for credit in include.episode.credits %}

<p>
<strong>{{ credit.titre }} :</strong>
{% if credit.item %}
{{ credit.item }}
{% else %}
<br/>
{% for item in credit.items %}
{{ item }}<br/>
{% endfor %}
</p>
{% endif %}

{% endfor %}

<br/>


Un article type pour la sortie d’un épisode audio devient alors :


---
layout: post
title:  "Enfants d'Atlas - Premier épisode !"
categories: [histoire audio]
comments: true

---
Bonjour à toutes et tous !

Ici Tamica pour vous présenter ma toute première saga : Enfants d'Atlas !

{% include episode.html
episode=site.data.fictionsonore.enfantsdatlas.s01e01
%}

<!--more-->

{% include episode_credits.html
episode=site.data.fictionsonore.enfantsdatlas.s01e01
%}

Un grand merci à tout ce beau (et talentueux) monde de m'avoir donné de vos voix et de votre temps pour me permettre de lancer ce projet :D <br/>

J'espère que ce premier épisode vous plaira, en tout cas j'ai fait de mon mieux pour que ce soit le cas ! <br/>

A bientôt pour l'épisode 2 ! <br/>

Tendresse et chocolat.

C’est beau non ? NON ? SI ? Dites-le moi, s’il vous plait, le supplice est interminable.

Je n’ai pas encore fait de script permettant de récupérer automatiquement le code HTML correspondant à l’article afin de pouvoir le copier-coller chez Oriog ainsi que sur le Neto (même s’il suffirait de parser l’output de wget ou quelque chose comme ça ? surtout si je rajoute des commentaires HTML style <!-- start article --> etc. (oui, utiliser un article de blog comme brouillon pour un prochain mini-projet, ça se fait apparemment)). Je me contenterai donc, pour le moment de copier le code html de l’article depuis le code source de la page.

Conclusion

Fiou, c’est tout chouette cette histoire ! Je suis très heureuse d’avoir pu approfondir cet aspect de la génération de templates de Jekyll (bon, même s’ils appellent ça les “includes”, ce que je trouve extrêmement perturbant). C’est un outil finalement extrêmement versatile et je pense que ce ne sera peut-être pas le seul usage que j’en aurais (regrouper des livres que je lis, et les critiques de ces derniers, par exemple ?)

Je me demande également dans quel mesure ce genre d’outils de “templating” existent sur des plateforme plus communes (et plus accessibles au grand public) : peut-être u plugin wordpress existe pour cela ? Je me pencherais peut-être dessus pour le site d’Oriog Création… même si je ne suis pas sûre de vouloir imposer ma maniaquerie aux autres membres, ils finiraient par faire la gueule :p

Sur ce, internet, je vous laisse ! J’espère que la lecture de cet article vous aura appris des choses sur Jekyll (ou bien la folie des informaticiens, au choix :p), aura fini de vous convaincre que les sites statiques c’est hyper cool, ou au contraire que JAMAIS vous n’y toucherez de près ou de loin. En tout cas, si vous avez des questions / remarques sur tout ce beau système, je suis tout ouïe ! Mon espace “commentaire” n’est toujours pas créé MAIS je ne désespère pas de le faire un jour ! En attendant, mon mail vous est ouvert à l’adresse “mon pseudo @souslesondes.fr”.

Allez, bisous, je vais aller me faire couper les cheveux.