Área de imagen destacada. La barra mide el artículo de abajo, no este encabezado.

Vista previa de ghost-progress-plugin

Desplázate y mira la barra superior llenarse de 0% a 100%. Cambia las opciones en el panel izquierdo y el código de inserción se actualiza.

Introducción

ghost-progress-plugin es una barra de progreso de lectura diminuta y sin dependencias para Ghost. Empezó como un widget para Ghost, pero también funciona en blogs basados en Notion y en cualquier sitio donde puedas añadir un script. Mientras lees, una barra fina se llena para mostrar por dónde vas del artículo. Esta página es un ejemplo en vivo: la barra de arriba es el widget real.

Instalación

Añádelo una sola vez con este fragmento, sin paso de compilación ni archivos del tema que 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>

Inyección de código

En Ghost, pégalo en Settings → Code injection → Site Footer. En hosting basado en Notion, añádelo en el campo de código personalizado: oopy tiene una caja de código head/footer, super.so tiene un área Custom Code, y ahí pones data-content en .notion-page-content. En cualquier otro sitio, colócalo justo antes de la etiqueta </body>.

Opciones

Todo se configura con atributos data-* en la etiqueta del script: el selector de contenido, la posición, el grosor y el z-index:

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

Personalización

El color y el grosor de la barra son ajustables. Cada clase y variable CSS está en el espacio de nombres greedylabs-ghost-progress, así que nunca choca con tu tema.

Colores

El relleno sigue por defecto el color de acento de tu tema Ghost (--ghost-accent-color); usa data-color o sobrescribe las variables CSS para cambiarlo. La pista no leída es transparente por defecto, así que dale un color para que la barra se vea incluso al 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);
  }
}

Posición

Usa data-position para arriba o abajo, y data-height para el grosor en píxeles. La barra llega a 0% cuando la parte superior del artículo toca la parte superior de la ventana, y a 100% cuando su parte inferior toca la inferior.

Preguntas frecuentes

¿Mide toda la página o solo el artículo?

Solo el artículo al que apuntas con data-content. El encabezado, la imagen destacada y el pie no cuentan.

¿Por qué la barra no se ve arriba?

Al 0% el relleno no tiene ancho y la pista es transparente por defecto. Dale color a la pista (ver Colores) para que la barra se vea aun vacía.

¿Funciona fuera de Ghost?

Sí. Donde puedas inyectar un script, apunta data-content a tu contenedor de artículo. En Notion es .notion-page-content.

Conclusión

ghost-progress-plugin es de código abierto bajo licencia MIT; el código y las incidencias están en GitHub. Prueba las opciones en el panel izquierdo y copia el fragmento cuando te guste. Si te ha servido, siempre se agradece un café ☕.

Comentarios