Laisser le pipeline visible pour surveiller le déploiement du blog-js tutoriel-php.cn

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 :

Deixando a pipeline visível para acompanhar deploy do blog

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")
}

Copier après la connexion

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 <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>

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

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

Copier après la connexion

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.

<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="{{ "/js/pipeline-loader.js" | 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()
}

Copier après la connexion

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()
}

Copier après la connexion

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]

Copier après la connexion

É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")
}

Copier après la connexion

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 <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>

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

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

Copier après la connexion

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.

<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="{{ "/js/pipeline-loader.js" | 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()
}

Copier après la connexion

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")
}

Copier après la connexion

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2470

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2617

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2202

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...