Больше динамики на статическом сайте через gist

По задумке гитхаба, гисты встраиваются так:

<script src="https://gist.github.com/zencd/df0a4f1f50b69c7ff7e24220ec2e10ee.js"></script>

Но мы обложим этот скрипт невидимым дивом:

<div style="display: none;">
<script src="https://gist.github.com/zencd/df0a4f1f50b69c7ff7e24220ec2e10ee.js"></script>
<!-- инфа с гитхаба добавится сюда -->
</div>

При этом скрипт не генерит iframe (хотя мог бы), а добавляет свои ноды прямо по месту работы. Это позволяет нам прочитать DOM и создать новые ноды по месту новой прописки: #infoFromGist. И, кстати, теперь можно в HTML.

<!-- новое место для информации с гитхаба -->
<div id="infoFromGist"></div>

<script>
(function() {
    const $infoFromGist = document.querySelector('#infoFromGist')
    var srcLines = document.querySelectorAll('.js-file-line');
    const lines = [];
    [].forEach.call(srcLines, function (line) {
        lines.push(line.innerText)
    });
    $infoFromGist.innerHTML = lines.join('\n')
})();
</script>

Минус: оригинальный скрипт — блокирующий, так что рендеринг нашей страницы может и будет задерживаться время от времени.

2024.05.15 in webdev