Adicionando métricas em meu site estático jekyll

By on 20 Oct 2023 | 01:00 .

Categories | | | |

Tempo de leitura: #

Visualizações: #

Introdução

Olá leitores, como sabem este site / blog é feito de forma estática usando jekyll e hosteado usando o github pages. Quando falamos em sites estáticos devemos pensar em compilação, e portanto, alguma informações estão disponíveis somente durante a compilação, mas isso não nos impede de usar javascript do jeito que sempre deveria ter sido usado, seu propósito, que é adicionar pequenas dinâmicas a websites.

Nesse post mostro como adicionar 2 métricas para blogs, o tempo de leitura e um contador de visualizações.

Sumário

Visualizações

Como nosso servidor é terceiro e queremos permanecer assim, estáticos, não podemos guardar estado, como número de visualizações, então usaremos um serviço terceiro, o Goatcounter que coleta não só informações de acesso, mas também localidade, língua, dispositivo, OS, navegador e a origem da visita, o cabeçalho Referrer. Informações mínimas.

Para começar, nos cadastramos no site onde definimos um identificador único para nosso site. Em seguida adicionamos o seguinte script para nosso html de posts.

default.html:

...
<head>
	...
	<script data-goatcounter="https://MYCODE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
	...
</head>
...

Em sites jekyll, possuímos templates html que são compilados inserindo outros trechos de html dentro. O script é inserido em default.html, pois este será inserido em todos as páginas, onde irá retirar informações da página e da pessoa acessando ela e enviará para o serviço externo.

Agora, no html específico para posts, vamos definir o header onde vamos inserir a contagem.

post.html:

<h2>
	Visualizações: <span id="views-counter">#</span>
</h2>

E em um script em javascript simples, vamos tentar tentar para toda página encontrar o elemento.

default.html:

...
<head>
	...
    <script src= "/js/goatcounter.js" defer></script>
	...
</head>
...

Note que usamos a sintaxe do Liquid para dar o caminho certo do script.

goatcounter.js:

var viewsCounter = document.getElementById('views-counter');

if(viewsCounter){
	fetch(
		'https://MYCODE.goatcounter.com/counter/' + encodeURIComponent(location.pathname) + '.json',
		{
			method: "GET"
		}
	)
	.then((res) => res.json())
	.then((json) => viewsCounter.textContent = json.count)
	.catch((err) => console.log(`Error getting post counts: ${err}`));
}

No script fazemos uma requisição para o goat counter rota /counter/urlPagina, pegamos o json, o campo count, e inserimos no elemento viewsCounter.

Promises são uma das patterns mais legais!

Tempo de leitura

Bastante semelhante ao contador de visualizações, porém não vamos utilizar um serviço externo, vamos calcular tudo no front.

Em nosso template de post vamos colocar um campo para receber o valor:

post.html:

<h2>
	Visualizações: <span id="views-counter">#</span>
</h2>

Depois inserirmos nosso script:

default.html:

...
<head>
	...
    <script src= "/js/readingTime.js" defer></script>
	...
</head>
...

Que tem essa cara:

readingTime.js:

var tempoLeitura = document.getElementById('tempoLeitura');

if(tempoLeitura){
	tempoLeitura.textContent = pageReadingTime() + " min";
}

function pageReadingTime(){
	const content = document.getElementById("postContent");

	// words, any text except white space
	const words = content.textContent.matchAll(/[^\s]+/g);
	const wordCount = [...words].length;

	// average reading time in words / min ~ 238
	// source: https://thereadtime.com
	// source: https://scholarwithin.com/average-reading-speed
	const time = Math.ceil(wordCount / 238);
	return time;
}

Nos script tentamos encontrar o elemento tempoLeitura, se encontrarmos, calculamos o tempo de leitura, que é uma simples regex sobre o conteúdo do post, que calcula a quantidade de palavras contidas, baseado na premissa de que o tempo de leitura médio de uma pessoa é na faixa de 238 palavras por minuto, assim basta dividir a quantidade de palavras por esta velocidade de leitura.

O conteúdo do post é inserido também por template, pois em jekyll este é compilado de arquivos Markdown para html, então no cálculo, só precisamos referenciar o elemento que o contém:

default.html:

...
    <div class="content" id="postContent">
        {{content}}
    </div>
...

Onde podemos ver o id postContent e a sintaxe Liquid {{ content }}.

Referências