Como adicionar a barra de progresso de leitura no Ghost CMS

A barra de progresso de leitura é um elemento simples, mas faz muita diferença para nossos leitores.

by Mateus Ribeiro

Como adicionar a barra de progresso de leitura no Ghost CMS
Photo by Nik / Unsplash

Share

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.

💡
Cabe a mim destacar que a Ghost desenvolveu muitos tutoriais ensinando a nós (curiosos e leigos no mundo dos blogs), como podemos adicionar recursos ao nosso blog.

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.

Como exibir tempo e progresso de leitura em seu tema 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>

Código HTML

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>

Código CSS

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

Código JavaScript

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!