ブログのデプロイメントを監視するためにパイプラインを表示したままにする

Computaria に関して私が気になることの 1 つは、ブログ自体の展開を追跡できないことです。それで、これは気になるので修正してみませんか?

パイプライン

現在、デプロイが実行中かどうかを確認する方法は 2 つあります。

• ジョブ/パイプライン ページでリポジトリを開いて、実行中の最新のリポジトリを確認します
• リポジトリを開いて README.md までスクロールします

私にとってはどちらの解決策も素晴らしいとは思えません。コンピューティング自体にもっと軽いものが欲しいです。

アイデア

Kauê と簡単に相談した後、私は彼のアドバイスに従って/about に投稿することにしました。

最初の実験では:

いや、醜くなってしまった。これをデフォルトで表示したくないことはすでにわかっています。しかし、情報をもたらすにはそれだけで十分です。醜いものを非表示にし、たとえ醜くても明示的に要求されれば利用できるようにするだけです。

概念実証: 指定しない限りクラッシュする

そうですね、まず最初にすべきことは、何か行動を起こすべきかどうかを知ることです。この目的のために、値が true のクエリ パラメータ status の存在が API として定義されました。

URL を取得するには、window.location を使用しました。 Location オブジェクト内には検索フィールドがあり、特定の URL にアクセスするために使用されるクエリ パラメータを維持するために正確に機能します。

たとえば、http://localhost:4000/blog/about?q=1 の場合、window.location.search の値は ?q=1 です。クエリ パラメータ内のコンテンツの処理を容易にするために、URLSearchParams タイプのオブジェクトがあります。ドキュメントから理解できる限り、URLSearchParams をインスタンス化するには、クエリ文字列が必要ですが、? は必要ありません。プレフィックスの。これは window.location.search.substring(1).

で実現できます。

このオブジェクトを使用して、必要なクエリ パラメータの値を簡単に参照できます。

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

これを手に入れた後、パイプライン バッジを表示するアクションを実行する必要があります。簡単にするために、これをインクルード可能な HTML スニペットとして置くことにしました: _includes/pipeline.html。したがって、自由に操作できる HTML を自由に使用できます。

最初は単なる

でした。非表示:

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

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

いいですね。何か役立つことをして画像を投稿しましょうか?要素を動的に作成するには、document.createElement を使用するだけです。次に、バッジの URL を入力します:

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

しかし、壊れた画像が表示されました...うーん、コンソールに表示されるメッセージは何ですか?

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

奇妙なことに、彼はかわいいリポジトリの URL を取得するべきだったのでしょうか?ああ、気づきました。彼はリキッドをまったく処理しませんでした。これに対処するために、空のフロントマターである css/main.scss の例に従うことにしました。

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

frontmatter は JavaScript ではないため、エラー メッセージが表示され、最初の const にエラーが表示されます。これは気になるので、これに対処するために私が考えた最も直接的な方法は、「無害なエラー」を事前に作成することでした。 ;を追加しました。前題の直後:

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

迷惑...

テストを続けると、ネットワーク タブに 308 が常に表示されることに気づきました。しかし、なぜ表示されるのでしょうか?そうですね、Liquidを拡張するときにバッジの前に二重バーが表示されてしまうためです。

最初にこれを入手しました:

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

次へのリダイレクトあり:

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

キャッシュを使用しているかどうかを分析するうちに、これが気になり始めました。これを解決するには、二重スラッシュを削除する必要があります。結局のところ、{{site.repository.base}} 文字列が / で終わることを事前に知ることができたので、展開される Liquid 値の直後にスラッシュを置かないことで、この問題を取り除くことができました。ただし、念のため、/badges/master/pipeline.svg の前にスラッシュを入れても現実的には問題ありません。読者としての私自身の指標にもなります。

しかし、このバーが存在するかどうかについての事前知識に依存したくないので、これには 2 つの選択肢がありました。

• 液体膨張レベルを処理して終端スラッシュを削除します
• この文字列の作成を JavaScript レベルで処理します

私にとっては JavaScript 側の方が簡単に思えました。 // を / に置き換えるだけですよね?うーん、いいえ。プロトコルは :// の前に表示されるため、この単純な置換を行うと、URL は https:/computaria.gitlab.io のように始まります。これを回避するために、次の置換を行います:

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

内訳:

• 置換の代わりに、「最初のグループ」で見つかったものとスラッシュを続けます
• 正規表現一致: : (グループ内)、スラッシュ、スラッシュ以外のもの

この変更により、https:// は ([^:])// と 一致 を持ちませんが、パス内に出現する他の // はすべて完全に一致します。 1 つの前にいる:。より厳密に言えば、クエリ パラメータ/フラグメントで一致が発生しないようにすることもできますが、それはやりすぎのように思えました。

概念実証: キャッシュレス読み込み

OK、配置場所とロック機構の詳細を定義したら、リロード機構が必要です。最初の試み: 新しい画像要素を作成するだけです。しかし、それでもどうやって？理想は「しばらく経ってから」です。つまり、次の 2 つの選択肢が与えられます:

• setTimeout
• setInterval

それでは、これは何をするのでしょうか? setTimeout は、一定の時間間隔と指定された間隔の後に実行されるコマンドを受け取ります。これにより、clearTimeout を使用して削除できる ID が返されます。呼び出しを繰り返すには、最後に setTimeout を再度呼び出す必要があります。

setInterval はほぼ同じものですが、常に一定の時間間隔の後にコマンドを実行する点が異なります。戻り値は、clearInterval を呼び出して削除する ID である必要がありますが、ドキュメントによると、clearTimeout でも動作します (念のため、信頼せず、正しいセマンティクスを持つものを使用してください)。

setTimeout の使用

setTimeout を使用してループ呼び出しを作成しましょうか?テキストフィールドに「カボチャ」という単語を 5 回出力してみてはどうでしょうか?この実験用にテキストエリアを置きます:

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

わかりました。HTML でアクセスできるようにしたい関数が 3 つあります。そして、それらは（たとえ非常にわずかであっても）州を分割します。私は物事を隠すのが苦手なので、この状態を <script> タグの外に表示したくないのです。</script>

私の最も明白な解決策は、それをブロックの下に残すことです。そのため、ブロックを離れると、内部の変数は外部から見えなくなります。

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

わかりましたが、関数を表示するにはどうすればよいですか?さて、試してみた結果、関数がスコープをエスケープする方法を見つけました。また、ローカル変数はブロックの制限を超えないため、ブロック内にいくつかの補助関数を配置して、外部では意味を持たないようにすることができます。このようなもの:

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

さて、今度はタイムアウト呼び出しに対処する必要があります。私のアイデアは、ステップを実行し、このステップが完了したら、同じステップを呼び出して次のタイムアウトを登録することです。そして、このステップを永久に数回に限定しないようにするためです。

それでは、タイムアウトの問題がなかったら、どうなるのでしょうか?再帰呼び出し:

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

それは良さそうですが、タイムアウトを追加してみてはどうでしょうか?そうですね、ステップの本体内でステップを呼び出すとタイムアウトが設定されます。適切なタイムアウトのためには、時間が必要です:

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

OK、あとはタイムアウト識別子を保存するだけで準備完了です。このステップを公開されたパブリック関数内に配置すると、準備が整いました。

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

さて、お楽しみの余地はあります:

Fiddle で参照 https://jsfiddle.net/jeffque/5Lrasyqk/

setInterval の使用

setInterval の使用法は非常に似ていますが、「呼び出し」ステップは暗黙的です。ループを停止したい場合は、登録されている setInterval を明示的にキャンセルする必要があります。

それでは、上の例のように始めてみてはいかがでしょうか?ただし、スクラッチ領域 ID が異なります:

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

Fiddle で参照 https://jsfiddle.net/jeffque/5Lrasyqk/

リロード試行

リピート タイミング メカニズムが定義されたので、次は画像をリロードする方法を定義する問題です。まず、バッジの検索時に GitLab が返すヘッダーを分析します: 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")
}

念のため、異なるリクエストからの複数の etag を比較します:

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

そうですね、etag は常に同じで、同じリソースであることを示しています。 Cache-control: no-store は、キャッシュを保存するためのものではないことを強く示しています。過去を指す有効期限は、このリソースをキャッシュの対象として考慮すべきではないことを示す意図があったことを強く示しています。そうでないと証明されるまで、cf-cache-status: MISS は、Cloudflare のキャッシュにヒットしなかったことを示すだけです。

最後に、厳密な輸送セキュリティです。これはどういう意味ですか？これはリソース自体とどのような関係があるのでしょうか?

そうですね、それはアクセスされているリソースとは何の関係もありません。ただし、これは、サイトには HTTPS でのみアクセスする必要があることを示しています。

わかりました。これは、画像がカールしていてはいけないことを示しています。 F5 を押すと、予想通り、常に再ダウンロードされます。私にとって、これは、キャッシュに問題がある場合、それはサーバーやネットワーク上ではなく、ブラウザ レベルにあるということを示す非常に強力な指標です。

最初の試み: 新しい img 要素を作成し、前の要素を破棄します。

便宜上、要素を返す関数を用意することほど便利なことはありません。

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

そして、setTimeout で #pipeline の子を削除し、新しいイメージを挿入する必要があります。父親からのアクションで私が見つけた選択肢は次のとおりです:

• 子を削除
• replaceChild
• replaceChildren

removeChild と replaceChild には、古い要素を保存して削除を要求する方法を知る必要があります。一方、ReplaceChildren には何のドラマもありません。新しい要素を渡すだけなので、それは良いことです:

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

それだけで魔法がかかります。それで、それはどのように動作するのでしょうか?

新しい画像を作成するだけでは不十分です。

私が見つけたもう 1 つの代替方法は、変数値を再度設定することでした。これにより、同一の要素を生成する関数は必要なくなり、img が指す URL を「変更」するだけになります。それで、同じページ上の複数の場所で同じアセットが使用されていると、ある種のキャッシュが発生する可能性があることがわかりました...

OK、GitLab を騙そうとするために、各繰り返しの URL の末尾に「 」が追加されたらどうなるでしょうか?さて、gitlab は私が悪いことをしていたことに気づきました...

引数またはその反復子とともに渡された queryParam の場合はどうなりますか?

しかし、それにはどれくらいの費用がかかるのでしょうか?

わかりました、それは回避策なので問題外ですが、取得してみましょう?そして、fetch を与えた後、画像を置き換える方法を考えますか?

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

うーん、CORS からのエラーです。 GitLab を制御できないので、他に何ができるでしょうか?

リロードはありませんが、

があるようです

OK、新しい実験: img タグを使用して /assets/pipeline.html を作成し、iframe からそれをポイントします。強制リロード操作には、スタック オーバーフローの回答と同じものを使用しました:

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

HTML へ

そして、そこに行きましょう!うまくいきました!

次に、適切になるように調整します:

• バッジ再充電の停止/再開制御
• iframe 内: iframe を処理するためにコーヒーを注文するには、SVG を手動で編集するのヒントに従ってください
• ドキュメント内: 本文から余白を削除して、バッジ用のスペースのみを確保します

これらの調整を行うことで、この状況から抜け出すことができます

これについては

ここで使用されているファイルを確認できます:

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