segunda-feira, 5 de setembro de 2016

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".

Nenhum comentário:

Postar um comentário

Clique aqui!

2015 A.C. Camargo academic journals acesso aberto adverse drug reactions alergia alquilantes alto custo ambiente ambientes virtuais analgésicos anomalias vasculares anti-eméticos anti-helmínticos anti-histamínico antianêmicos antiangiogênico anticâncer anticoagulantes antifúngicos antiprotozoários antivirais artemisinina arXiv asma asthma atopia atualização aula aulas auto-arquivamento avastin avermectina bevacizumab biologicals bioRxiv Blogger brain tumor bundler cancer cancerologia pediátrica Carlos Chagas carne vermelha cauterização Ceará CERN child chronic fatigue syndrome ciência ciência brasileira ciências biológicas e da saúde cientistas influentes cirurgia CLI Command Line Tools conselho internacional crime virtual CT scans Curtis Harris darbopoietina dermatite desenvolvedor diabetes dieta disautonomia dislipidemias doença renal doenças cardíacas doenças parasitárias dor DPOC eczema editoras predatórias efeitos adversos eficácia ensino e pesquisa eritropoietina erlotinib ESA escleroterapia estatinas esteróides estilo de vida exercícios F1000Research farmacogenética farmacologia fatores de crescimento fibromialgia Figshare Fisiologia e Medicina fitness flu FMJ Fortaleza fosfoetanolamina fraude acadêmica fraude eletrônica genetics GitHub glioblastoma gliomas Google Books Google mapas gordos green way Harald zur Hausen hemangiomas hemophagocytic lymphohistiocytosis High Sierra homebrew horário imagem immunology imunossupressores imunoterapia infecção urinária inibidores de ECA inibidores tirosina-quinase iniciação científica insulina irracionalismo ivermectina Jeffrey Beall Jekyll journal hijack Lectures lepra leucemia leukemia linfangiomas Mac OS Mac OS X macrophage activation syndrome magrinhas mal-formações March for Science Marcha pela Ciência medicina personalizada meta-análise Milton Santos modelos monoclonais monoclonal antibody mortalidade morte mudança Mulliken neuro-oncologia neuroblastoma neurology ngram viewer Nobel Nobel em Medicina ou Fisiologia novas drogas novos tratamentos obesidade ômega 3 open access open science OpenAIRE osteoporose Osvaldo Cruz package installer pediatria pediatric cancer pediatric tumors pediatrics peer review PeerJ personalized medicine PET/CT pharmacogenetics pharmacological treatment pharmacology plágio política de C&T posters postprints predatory publishers Preprints pressão arterial prevenção progressista projeto de pesquisa propranolol próstata publicação publicação científica publicações publication pubmed Python python 2 python 3 quimioterapia radiation radioterapia rapamycin rbenv recidiva regressão espontânea Regulação médica repository resposta resultados retrospectiva revisão por pares risco Ruby Satoshi Ömura Scholarly Open Access science ScienceNOW seguimento selênio self-archiving sequestro de periódico científico serotonina SIDA sildenafil slides sobrevida sulfa suplementos survival tacerva targeted therapy temozolamida temozolomide terapia alternativa tireóide tratamento tuberculose tumores cerebrais tumores pediátricos vaccine vacina venv via dourada via verde virtualenv virtualenvwrapper vitamina E vitaminas William C. Campbell Xcode Youyou Tu Zenodo

Postagens populares