Área da imagem de destaque. A barra mede o artigo abaixo, não este cabeçalho.

Prévia do ghost-progress-plugin

Role e veja a barra do topo encher de 0% a 100%. Altere as opções no painel à esquerda e o código de incorporação é atualizado.

Introdução

ghost-progress-plugin é uma barra de progresso de leitura minúscula e sem dependências para o Ghost. Começou como um widget para o Ghost, mas também funciona em blogs baseados em Notion e em qualquer lugar onde você possa adicionar um script. Enquanto você lê, uma barra fina se enche para mostrar até onde você está no artigo. Esta página é um exemplo ao vivo: a barra no topo é o widget real.

Instalação

Adicione de uma vez com este trecho, sem etapa de build nem arquivos do tema para editar:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

Injeção de código

No Ghost, cole em Settings → Code injection → Site Footer. Em hospedagem baseada em Notion, adicione no campo de código personalizado: o oopy tem uma caixa de código head/footer, o super.so tem uma área Custom Code, e ali você define data-content como .notion-page-content. Em qualquer outro site, coloque logo antes da tag </body>.

Opções

Tudo é configurado com atributos data-* na tag do script: o seletor de conteúdo, a posição, a espessura e o z-index:

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

Personalização

A cor e a espessura da barra são ajustáveis. Cada classe e variável CSS fica no namespace greedylabs-ghost-progress, então nunca conflita com o seu tema.

Cores

O preenchimento segue, por padrão, a cor de destaque do seu tema Ghost (--ghost-accent-color); use data-color ou sobrescreva as variáveis CSS para mudá-la. A trilha não lida é transparente por padrão, então dê a ela uma cor para a barra aparecer mesmo em 0%:

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

Posição

Use data-position para topo ou base, e data-height para a espessura em pixels. A barra chega a 0% quando o topo do artigo encontra o topo da viewport, e a 100% quando a base encontra a base.

Perguntas frequentes

Ele mede a página toda ou só o artigo?

Só o artigo apontado por data-content. Cabeçalho, imagem de destaque e rodapé não contam no progresso.

Por que a barra fica invisível no topo?

Em 0% o preenchimento não tem largura e a trilha é transparente por padrão. Dê uma cor à trilha (ver Cores) para a barra aparecer mesmo vazia.

Funciona fora do Ghost?

Sim. Onde você puder injetar um script, aponte data-content para o seu contêiner de artigo. No Notion é .notion-page-content.

Conclusão

ghost-progress-plugin é de código aberto sob a licença MIT; o código e as issues estão no GitHub. Experimente as opções no painel à esquerda e copie o trecho quando gostar. Se ajudou você, um café é sempre bem-vindo ☕.

Comentários