Usando o tema Tufte, página de marcadores, e outros truques para Jekyll

Depois de migrar meu blog para o GitHub Pages, usando Jekyll, resolvi alterar o layout da página. Busquei temas para Jekyll, encontrando uma lista grande. Depois de muita indecisão, escolhi o tema Tufte-Jekyll, de Clay Harmon, baseado no CSS criado por Dave Liepmann e Edward Tufte. Tufte, considerado pioneiro e mago da infografia e visualização de dados, ficou conhecido por seu estilo, com tipografia elegante, muitas notas à margem do texto e uso inteligente de gráficos.

A instalação do tema foi relativamente tranquila, exceto pelo fato de que o autor criou algumas tags customizadas de Liquid, as quais, infelizmente, não são suportadas pelo GitHub Pages. Liquid é mais uma linguagem de templating, da Shopify, do tipo ame-a ou deteste-a. Apenas troquei estas tags pelos códigos de exemplo da biblioteca tufte-CSS, em HTML e o resultado pode ser visto nesta postagem.
Consegui importar as postagens deste blog com um script do Jekyll, o jekyll-import, instalado como uma gem que adicionei no meu Gemfile. Devo dizer que essa foi a primeira vez que a documentação do Jekyll me deixou confuso, pois a utilização do importador de blogs não está atualizada nela. No repositório do GitHub existe um novo conjunto de instruções para as versões mais recentes do Jekyll.
Procurei, então, um código que me permitisse gerar uma página de marcadores (tags). Muitas soluções tinham problemas (tags Liquid customizadas!), e aquela que se adaptou em meu sistema foi a descrita nesta postagem. Com os códigos de Pavel Dmytrenko, consegui criar páginas temáticas específicas para um determinado marcador. Porém, para que minha página de marcadores fosse funcional, faltava uma coisa: filtrar os marcadores. Depois da importação do Blogger, eu tinha centenas de marcadores, a maioria com apenas 1 ocorrência. Para evitar que a página de marcadores ficasse lotada demais e impraticável, eu tinha que filtrar apenas os marcadores com um número n de ocorrências. Depois de muitas tentativas, consegui resolver com Liquid:

{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign tag_words = site_tags | split:',' | sort %}

{% include taglist.html %}

<!-- Posts by Tag -->
<div style="max-width: 1200px;">
  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
    {% capture this_word %}{{ tag_words[item] }}{% endcapture %}
    {% if site.tags[this_word].size>9 %}<h2 id="{{ this_word | cgi_escape }}">{{ this_word }}</h2>{% endif %}
    {% for post in site.tags[this_word] %}{% if site.tags[this_word].size>9 %}{% if post.title != null %}
      <div>
        <span style="float: left;">
          <a href="{{ post.url }}">{{ post.title }}</a>
        </span>
        <span style="float: right;">
          {{ post.date | date_to_string }}
        </span>
      </div>
      <div style="clear: both;"></div>
    {% endif %}{% endif %}{% endfor %}
  {% endunless %}{% endfor %}
</div>  

Onde a introdução do filtro Liquid size permitiu escolher apenas os marcadores com 10 ou mais ocorrências no blog:

{% if site.tags[this_word].size>9 %} ... {% endif %}

Só queria mais uma coisa, marcadores em cada postagem! Novamente, peguei a sugestão de Pavel Dmytrenko e usei o estilo de marcadores de Wouter Beeftink. Para isso, tive que cometer a ousadia de retocar o arquivo tufte.css. Copiei o código de CSS dos marcadores de Beeftink (exceto o referente ao body, pois queria manter a tipografia de Tufte) e colei no tufte.css (são pouco mais de 50 linhas).

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.tags li {
  float: left;
}

.tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
   border-left-color: crimson;
}

Uma pequena modificação aqui e acolá até ficar como eu queria, mas o básico foi esse. Por último, mudei o nome do blog de Pharmakon para Ciência médica e não médica (que era o subtítulo do velho blog). O interessante é que este velho blog recusou-se a se extinguir, pois caiu-me nas mãos um CLI para o Blogger e resolvi experimentá-lo. Mas isso é outra estória.

Obs.: originalmente postado no blog Ciência Médica com o título "Novo layout do Jekyll para o blog".