Estimativa de tempo de leitura da página

Criaremos para Jekyll sem utilizar plugins, um jeito de fazer esta estimativa de um jeito tão simples que você conseguirá aplicar a mesma lógica para qualquer sistema.

Se você já entende de programação, clique aqui ir direto ao código completo.

A lógica é bem simples, em média o ser humano ler 250 palavras por minutos ~~(se você discordar poderá mudar a variável com esse valor depois)~~. Então primeiro passo é calcular quantas palavras o post tem e guardar em uma variável para usarmos depois.

1
2
{% assign content = post.content %}
{% assign words = content | number_of_words %}

Com esse valor basta apenas dividir pelo número de palavras que o ser humano ler em média. Com isso já temos a estimativa de minutos do post.

1
2
3
4
{% assign wpm = 250 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{{words | divided_by:wpm}} minutos de leitura

Com isso acabamos de criar um problema. Se der menos de 1 minuto o texto mostrará 0 minutos de leitura. Faremos a divisão antes e verificaremos se é menor que 1 para colocar um texto mais adequado.

1
2
3
4
5
6
7
8
9
10
{% assign wpm = 250 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{% assign estimated_minutes = words | divided_by:wpm %}

{% if estimated_minutes < 1 %}
    Menos de um minuto
{% else %}
    {{words | divided_by:wpm}} minutos
{% endif %} de leitura

Agora só verificar se deu 1 minuto para tirar o plural da frase.

1
2
3
4
5
6
7
8
9
10
11
12
{% assign wpm = 250 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{% assign estimated_minutes = words | divided_by:wpm %}

{% if estimated_minutes < 1 %}
    Menos de um minuto
{% elsif estimated_minutes == 1 %}
    1 minuto
{% else %}
    {{words | divided_by:wpm}} minutos
{% endif %} de leitura

Daqui já poderiamos parar. Mas digamos que os posts são muito grandes, tipo livro. Será estranho mostrar 999 minutos. Melhor reduzir para horas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% assign wpm = 250 %}
{% assign hour = 60 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{% assign estimated_minutes = words | divided_by:wpm %}

{% if estimated_minutes < 1 %}
    Menos de um minuto
{% elsif estimated_minutes == 1 %}
    1 minuto
{% elsif estimated_minutes < hour %}
    {{ estimated_minutes }} minutos
{% else %}
    {{ estimated_minutes | divided_by:hour }} horas
{% endif %} de leitura

Agora para deixar o código pronto para textos muito extenso, marcaremos quando a leitura passar de um dia para um texto melhor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% assign wpm = 250 %}
{% assign hour = 60 %}
{% assign one_day = 1440 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{% assign estimated_minutes = words | divided_by:wpm %}

{% if estimated_minutes < 1 %}
    Menos de um minuto
{% elsif estimated_minutes == 1 %}
    1 minuto
{% elsif estimated_minutes < hour %}
    {{ estimated_minutes }} minutos
{% elsif estimated_minutes < one_day %}
    {{ estimated_minutes | divided_by:hour }} horas
{% else %}
    {{ estimated_minutes | divided_by:one_day }} dias
{% endif %} de leitura

Para finalizar, verificamos se é um dia ou mais, para deixar o texto no plural ou singular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% assign wpm = 250 %}
{% assign hour = 60 %}
{% assign one_day = 1440 %}
{% assign content = post.content %}
{% assign words = content | number_of_words %}
{% assign estimated_minutes = words | divided_by:wpm %}

{% if estimated_minutes < 1 %}
    Menos de um minuto
{% elsif estimated_minutes == 1 %}
    1 minuto
{% elsif estimated_minutes < hour %}
    {{ estimated_minutes }} minutos
{% elsif estimated_minutes < one_day %}
    {{ estimated_minutes | divided_by:hour }} horas
{% else %}
    {% assign days = estimated_minutes | divided_by:one_day %}
    {% if days <= 1 %}
        {{ days }} dia
    {% else %}
        {{ days }} dias
    {% endif %}
{% endif %} de leitura

Sua vez

Agora mostre que você entendeu o post, e tente portar esse código para outra linguagem. Já até criamos um repositório para você criar sua versão lá. Repositório