Laisser le pipeline visible pour surveiller le déploiement du blog

Une des choses qui me dérange chez Computaria c'est de ne pas pouvoir suivre le déploiement sur le blog lui-même. Alors, puisque cela me dérange, pourquoi ne pas y remédier ?

Le pipeline

Actuellement, il existe 2 façons de savoir si le déploiement est en cours :

• ouvrez le référentiel sur la page jobs/pipelines et voyez le dernier en cours d'exécution
• ouvrez dans le référentiel et faites défiler jusqu'à README.md

Les deux solutions ne me semblent pas géniales. J'aimerais quelque chose de plus léger dans l'informatique elle-même.

L'idée

Après une brève consultation avec Kauê, j'ai décidé de suivre son conseil : publier sur /about.

Dans la première expérience :

Non, c'est devenu moche. Je sais déjà que je ne veux pas que cela apparaisse par défaut. Mais il suffit d'apporter l'information. J'ai juste besoin de cacher ce qui est laid et de le rendre disponible même s'il est laid si cela est explicitement demandé.

Preuve de concept : plante, sauf indication contraire

Eh bien, la première chose à faire est de savoir si nous devons prendre des mesures. À cette fin, la présence du paramètre de requête status avec la valeur true a été définie comme une API.

Pour obtenir l'URL, j'ai utilisé window.location. À l'intérieur de l'objet Location se trouve le champ de recherche, qui sert précisément à conserver les paramètres de requête utilisés pour accéder à l'URL spécifique.

Par exemple, pour http://localhost:4000/blog/about?q=1, la valeur de window.location.search est ?q=1. Pour faciliter la gestion du contenu dans les paramètres de requête, il existe un objet de type URLSearchParams. D'après ce que j'ai pu comprendre à partir de la documentation, pour instancier URLSearchParams, j'ai besoin de la chaîne de requête mais sans le ? du préfixe. Je peux y parvenir avec window.location.search.substring(1).

Maintenant, avec cet objet en main, je peux simplement consulter la valeur de n'importe quel paramètre de requête que je souhaite :

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

Avec cela en main, je dois prendre les mesures nécessaires pour afficher le badge du pipeline. Par souci de simplicité, j'ai décidé de le mettre sous forme d'extrait HTML incluable : _includes/pipeline.html. J'ai donc du HTML gratuit à manipuler comme bon me semble.

Au début, c'était simplement un

invisible :

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a </p>
<div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>


<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Placement dans le fragment HTML :

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.</script></p>

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="%7B%7B%20" prepend: site.baseurl defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Super, faisons quelque chose d'utile et publions l'image ? Pour créer dynamiquement un élément, utilisez simplement document.createElement. Ensuite je mets l'URL du badge :

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

Mais il affichait une image cassée... hmmm, quel est le message affiché sur la console ?

GET http://localhost:4000/blog/about/{{site.repository.base}}/badges/master/pipeline.svg [HTTP/1.1 404 Not Found 4ms]

Étrange, aurait-il dû obtenir la jolie URL du référentiel ? Oh, j'ai remarqué. Il n'a pas du tout traité Liquid. Pour résoudre ce problème, j'ai décidé de suivre l'exemple de css/main.scss, un texte vide.

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

Cela donne un message d'erreur car le frontmatter n'est pas javascript et l'erreur est affichée dans la première const. Puisque cela me dérange, la façon la plus directe à laquelle j'ai pensé de résoudre ce problème était de créer une "erreur inoffensive" plus tôt. J'ai ajouté un ; juste après le début :

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a </p>
<div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>


<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Des désagréments...

En poursuivant les tests, j'ai remarqué qu'un 308 apparaissait constamment dans l'onglet réseau. Mais pourquoi est-il apparu ? Eh bien, parce qu'en développant Liquid, cela s'est retrouvé avec une double barre avant les badges.

J'ai initialement eu ceci :

• https://gitlab.com/computaria/blog//badges/master/pipeline.svg

Avec redirection vers :

• https://gitlab.com/computaria/blog/badges/master/pipeline.svg

Et cela a commencé à me déranger lorsque j'ai analysé si j'utilisais le cache ou non. Pour résoudre ce problème, je devrais me débarrasser de la double barre oblique. Je pourrais simplement m'en débarrasser en ne mettant pas la barre oblique juste après l'expansion de la valeur Liquid, car après tout je pourrais savoir a priori que la chaîne {{site.repository.base}} se terminait par /. Mais, juste au cas où, cela ne ferait pas de mal de mettre cette barre oblique avant /badges/master/pipeline.svg, c'est même un indicateur pour moi en tant que lecteur.

Mais comme je ne veux pas me fier à une connaissance préalable pour savoir si cette barre existe ou non, j'avais deux options pour cela :

• traitez le niveau d'expansion du liquide pour retirer la barre oblique du terminal
• gérer la création de cette chaîne au niveau javascript

Le côté JavaScript m'a paru plus simple. Alors remplacez simplement // par /, n'est-ce pas ? Hum, non. Étant donné que le protocole apparaît avant ://, le simple fait d'effectuer cette substitution grossière entraînerait le début de l'URL comme ceci : https:/computaria.gitlab.io. Pour contourner ce problème, je fais la substitution suivante :

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.</script></p>

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="%7B%7B%20" prepend: site.baseurl defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Décomposition :

• à la place du remplacement, mettre ce qui a été trouvé dans le "premier groupe" suivi d'une barre oblique
• matchs regex : tout autre chose que : (dans un groupe), slash, slash

Avec ce changement, https:// n'a pas de correspondance avec ([^:])//, mais toutes les autres occurrences de // dans le chemin ont une correspondance parfaite, car elles ne le seront pas être devant un :. Pour être plus strict, je pourrais travailler pour empêcher la correspondance de se produire dans le paramètre/fragment de requête, mais cela semblait trop exagéré.

Preuve de concept : chargement sans cache

Ok, après avoir défini les détails de l'endroit où le placer et du mécanisme de verrouillage, nous avons besoin d'un mécanisme de rechargement. Première tentative : créez simplement un nouvel élément d’image. Mais quand même, comment ? L'idéal serait "après un certain temps". Cela me donne donc deux options, enfin dire :

• setTimeout
• setInterval

D'accord, allons-y, qu'est-ce que ça fait ? setTimeout reçoit une commande qui sera exécutée après un intervalle de temps ET également l'intervalle donné. Il vous renvoie un identifiant que vous pouvez supprimer à l'aide de clearTimeout. Pour répéter l'appel, setTimeout doit être rappelé à la fin.

setInterval est presque la même chose, sauf qu'il exécutera toujours la commande après l'intervalle de temps. Le retour doit être un identifiant que vous appelleriez clearInterval pour supprimer, mais selon la documentation, il fonctionne également avec clearTimeout (juste au cas où, ne lui faites pas confiance, utilisez celui avec la sémantique correcte).

Utilisation de setTimeout

Devrions-nous créer un appel en boucle avec setTimeout ? Que diriez-vous d’imprimer 5 fois le mot citrouille dans un champ de texte ? Je vais mettre une zone de texte pour cette expérience :

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

Ok, j'ai 3 fonctions que j'aimerais rendre accessibles en HTML. Et ils divisent (même si très légèrement) un État. J'adore cacher des choses, donc je ne veux pas que cet état soit visible en dehors de la balise <script> </script>

Ma solution la plus évidente est de le laisser sous un bloc, ainsi, en sortant du bloc, les variables à l'intérieur seront invisibles à l'extérieur :

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a </p>
<div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>


<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

D'accord, mais comment rendre les fonctions visibles ? Eh bien, en expérimentant, j'ai trouvé un moyen : la fonction échappe à la portée. Et comme les variables locales ne dépassent pas les limites du bloc, je peux quand même placer quelques fonctions auxiliaires à l'intérieur du bloc pour qu'elles n'aient aucune signification à l'extérieur. Quelque chose comme ça :

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.</script></p>

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="%7B%7B%20" prepend: site.baseurl defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

D'accord, je dois maintenant gérer les appels hors délai. Mon idée est d'exécuter une étape et, lorsque cette étape est terminée, d'enregistrer le prochain délai d'attente, en appelant la même étape. Et juste pour éviter de limiter cette étape à quelques fois pour toujours.

Donc, s'il n'y avait pas de problème de délai d'attente, à quoi cela ressemblerait-il ? Un appel récursif :

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

Ça a l'air bien, que diriez-vous d'ajouter le délai d'attente ? Eh bien, à l’intérieur du corps de l’étape, appeler step consiste donc à définir le délai d’attente. Pour une bonne pause, j'ai besoin de temps :

GET http://localhost:4000/blog/about/{{site.repository.base}}/badges/master/pipeline.svg [HTTP/1.1 404 Not Found 4ms]

Ok, il ne reste plus qu'à enregistrer l'identifiant du délai d'attente et nous sommes prêts. Je place cette étape à l'intérieur de la fonction publique exposée et nous sommes prêts :

---
# frontmatter vazio para fazer o parse do liquid
---

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

D'accord, nous avons de la place pour nous amuser maintenant :

Voir sur Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Utilisation de setInterval

L'utilisation de setInterval est très similaire, mais l'étape "rappel" est implicite. Si je veux arrêter la boucle, je dois annuler explicitement le setInterval enregistré.

Eh bien, que diriez-vous de commencer comme dans l'exemple ci-dessus ? Mais avec un identifiant de zone de travail différent :

---
# frontmatter vazio para fazer o parse do liquid
---
;

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

Voir sur Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Tentatives de rechargement

Une fois le mécanisme de timing de répétition défini, il s'agit maintenant de définir comment recharger l'image. Tout d'abord, analysez les en-têtes renvoyés par GitLab lors de la recherche du badge : https://gitlab.com/computaria/blog//badges/master/pipeline.svg:

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

Comparaison de plusieurs etags provenant de différentes demandes au cas où :

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a </p>
<div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>


<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Eh bien, l'etag était toujours le même, indiquant qu'il s'agit de la même ressource. Le cache-control: no-store me dit fortement que ce n'est pas pour stocker le cache. L'expiration pointant vers le passé indique fortement qu'elle visait à indiquer que cette ressource ne doit pas être prise en compte pour la mise en cache. Jusqu'à preuve du contraire, cf-cache-status: MISS a seulement indiqué qu'il n'avait pas touché le cache de Cloudflare.

Enfin, une sécurité-transport-stricte. Qu'est-ce que cela signifie? Qu'est-ce que cela a à voir avec la ressource elle-même ?

Eh bien, cela n'a rien à voir avec la ressource à laquelle vous accédez. Mais c'est un indicateur que le site ne doit être accessible qu'avec HTTPS.

D'accord, tout cela indique que l'image ne doit pas être bouclée. Un F5 provoque toujours son nouveau téléchargement, comme prévu. C'est pour moi un indicateur très fort que si j'ai un problème avec le cache, ce ne sera pas sur le serveur ou sur le réseau, mais quelque chose au niveau du navigateur.

Première tentative : créez un nouvel élément img et jetez le précédent.

Pour plus de commodité, rien de tel que d'avoir une fonction qui renvoie l'élément :

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.</script></p>

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="%7B%7B%20" prepend: site.baseurl defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Et dans setTimeout, je dois supprimer les enfants #pipeline et insérer la nouvelle image. Les options que j'ai trouvées avec les actions du père sont :

• supprimerEnfant
• remplacerEnfant
• remplacerEnfants

Eh bien, removeChild et replaceChild impliquent de savoir comment sauvegarder l'ancien élément pour demander sa suppression. ReplaceChildren, par contre, n'a pas de drame, il passe juste le nouvel élément et c'est bien :

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

ça seul fait la magie. Alors, comment se comporte-t-il de toute façon ?

Créer la nouvelle image n'était pas suffisant.

Une autre alternative que j'ai trouvée était de redéfinir la valeur de la variable. Avec cela, il n'est plus nécessaire d'avoir la fonction qui génère des éléments identiques, je vais juste "modifier" l'URL vers laquelle pointe l'img. Et bien, c'est comme ça que j'ai découvert qu'un même actif utilisé à plusieurs endroits sur la même page peut souffrir d'une sorte de mise en cache...

Ok, et si à chaque répétition on ajoutait un ' ' à la fin de l'URL pour essayer de tromper GitLab ? Eh bien, gitlab a réalisé que je ne préparais rien de bon...

Et si c'est un queryParam passé avec un argument ou son itérateur ?

Mais, à quel prix ?

Ok, cela étant hors de question car c'est une solution de contournement, essayons de le récupérer ? Et après avoir récupéré, réfléchissez à la façon de remplacer l'image ?

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

Hmm, erreur, de CORS. Et comme je n'ai aucun contrôle sur GitLab, que puis-je faire d'autre ?

Le il n'y a pas de rechargement, mais le

Ok, nouvelle expérience : créez /assets/pipeline.html simplement avec la balise img et pointez dessus depuis une iframe. Pour l'opération de rechargement forcé, j'ai utilisé la même chose que la réponse Stack Overflow :

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a </p>
<div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>


<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

Vers HTML

Et, allez-y ! Ça a marché !

Maintenant, ajustements pour le rendre adapté :

• commande arrêt/redémarrage pour rechargement des badges
• dans l'iframe : suivez les conseils d'édition SVG à la main pour commander du café pour gérer l'iframe
• à l'intérieur du document : supprimer les marges du corps pour n'avoir que de l'espace pour le badge

En effectuant ces ajustements, vous pouvez vous en sortir

pour ça

Vous pouvez vérifier les fichiers utilisés ici :

• /about.md
• /_includes/pipeline.html
• /assets/pipeline-badge.html
• /js/pipeline-loader.js