Como adicionar a barra de progresso de leitura no Ghost CMS

Realizar alterações nos temas do blog pode parecer difícil, mas não é.

A barra de progresso em artigos na web pode tornar a experiência dos nossos leitores muito mais agradável.

O tutorial que eu vinha seguindo até então era este:

Show reading time & progress in your Ghost theme

Reading time and progress bars give your readers a sense of what they’re getting into. Is this an epic long read or a quick jaunt? With Ghost, it’s easy to create these signposts by adding the reading time to your posts or showing your reader’s progress through an article.

TutorialsTeam Ghost

Porém, esse tutorial orienta-nos a alterar o tema do blog. O que é em grande parte das vezes o terror de muitos de nós.

Felizmente, encontrei um caminho mais simples para implementar a barra de progresso, exigindo apenas, um pouco de vontade, bem pouca mesmo. Vamos lá.

Começando pelo HTML

Vamos começar criando o elemento <progress>. É ele quem vai "chamar" a barra de progresso para a página.

<progress class="progress-bar" value="0" max="100"></progress>

Esse código contém três parte importantes, a classe (class), value (valor padrão) e max (valor máximo). A classe diz qual vai ser a forma que a barra vai ser apresentar para o leitor, enquanto o valor padrão diz que a barra vai começar em 0% enquanto o valor máximo diz que ela vai chegar a 100%.

Até aqui simples correto?

Colocando o CSS

O CSS já diz como vai ser o estilo da barra. Sem CSS, a barra não vai ter forma de nada. O código é assim:

.progress-bar {
    appearance: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 5px;
    background: transparent;
    z-index: 1000;
}

.progress-bar::-webkit-progress-bar { background: transparent; }
.progress-bar::-moz-progress-bar { background: var(--ghost-accent-color); }
.progress-bar::-webkit-progress-value { background: var(--ghost-accent-color); }
<style>
.progress-bar { display: none; }
.post-template .progress-bar { display: block; }
</style>

Lembra da classe que aparece lá no código HTML? É nesse código que ela é configurada.

Como aqui tem muito detalhe, que diz a posição, cores e todo o resto. Vou apontar que a cor da barra vai seguir o padrão de cores que você escolher para seu blog. Isso está definido em var(--ghost-accent-color). Aí está dito isso: A cor vai variar conforme o padrão de cores do Ghost. Ou seja, se você escolher azul como a cor padrão do blog, a barra vai ser azul, se depois você escolher vermelho, ela vai ser vermelha. Simples né?

E a parte que está embalada em <style> diz quando a barra deverá ser exibida.

Acrescentando o JavaScript

Aqui entra uma quantidade de código que parece coisa de pessoa que gosta de complicar a vida.

Para você entender de forma básica, esse código vai rastrear a rolagem da página, se o leitor desceu ou subiu. E a partir desse rastreio ele vai alterando a barra de progresso.

const progressBar = document.querySelector('.progress-bar');

if (progressBar) {
  progressBar.setAttribute('value', getScrollPercent());  
  window.addEventListener('scroll', (event) => {
    progressBar.setAttribute('value', getScrollPercent());
  }, false);
}
    
function getScrollPercent() {
  const h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
  return Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}

Colocando tudo para funcionar

Essa parte é mais simples.

Você deverá entrar na painel de configuração da Ghost.

No painel, você irá procurar por Code Injection. Ao clicar em Edit, você verá duas abas: Site header e Site footer.

Em Site header você irá inserir esse código:

<style>
  .progress-bar {
    appearance: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 5px;
    background: transparent;
    z-index: 1000;
  }

  .progress-bar::-webkit-progress-bar { background: transparent; }
  .progress-bar::-moz-progress-bar { background: var(--ghost-accent-color); }
  .progress-bar::-webkit-progress-value { background: var(--ghost-accent-color); }
</style>
<style>
.progress-bar { display: none; }
.post-template .progress-bar { display: block; }
</style>

E em Site footer, você irá inserir:

<progress class="progress-bar" value="0" max="100"></progress>
<script>
  const progressBar = document.querySelector('.progress-bar');

  if (progressBar) {
    progressBar.setAttribute('value', getScrollPercent());  
    window.addEventListener('scroll', (event) => {
      progressBar.setAttribute('value', getScrollPercent());
    }, false);
  }
      
  function getScrollPercent() {
    const h = document.documentElement, 
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
  }
</script>

Finalizando

Se você seguiu o tutorial conforme apresentado, a partir de agora você deve ver a barra de progresso em todas as suas postagens.

Isso é muito bom para a experiência dos seus leitores. Agora, resta escrever os melhores conteúdos que vêm a nossa cabeça.

Abraço!