Fábio Izidio

Redesign — fabioizidio.gitlab.io

Visual A + C (editorial com blocos), tema claro/escuro e menu fixo no topo, mais suporte a posts em Typst ao lado de Markdown e HTML.

O que há aqui

ArquivoFunção
_css/site.cssTodo o visual. Paletas clara e escura em variáveis CSS.
_libs/theme.jsAlterna o tema, lembra a escolha e respeita a preferência do sistema.
_libs/blog.jsFiltro por categoria na página do blog (/blog/?categoria=teologia).
_layout/head.html, header.html, foot.html, page_foot.htmlLayout com o menu fixo e o botão de tema.
index.mdPágina inicial (hero, blocos, textos recentes).
blog/index.mdListagem de posts com filtros.
utils.jlFunções {{post_list}}, {{recent_posts N}}, {{post_header}}, {{year}}.
typst/post.typModelo de post (PDF + HTML a partir do mesmo .typ).
typst/posts/*.typSeus posts em Typst.
scripts/build_typst.jlCompila os .typ: gera o PDF e uma página .md para o Franklin.
blog/exemplo-markdown.md, typst/posts/exemplo-typst.typExemplos — apague ao publicar os seus.
*.snippet.*Trechos para mesclar nos seus config.md, .gitlab-ci.yml e .gitignore.

Como aplicar no repositório

  1. Copie _css/, _libs/, _layout/, typst/, scripts/, index.md, blog/index.md para a raiz do repositório (faça backup de _layout/, index.md e do CSS atual antes).

  2. Copie as funções de utils.jl para o seu utils.jl (ou use o arquivo se não tiver um).

  3. Mescle config.snippet.md no config.md e .gitlab-ci.snippet.yml no .gitlab-ci.yml.

  4. Teste localmente (veja abaixo) e só então faça o commit.

Páginas internas (Sobre, Serviços, Web Rádio, Avaliações): continuam usando o mesmo head.html/foot.html, mas o CSS novo não inclui Bootstrap. Se alguma delas usa classes do Bootstrap (row, col-*, card, btn-*…), ela precisará de ajustes. Para páginas largas (ferramentas com Apps Script) acrescente @def bodyclass = "wide" no topo do .md: o conteúdo deixa de ser limitado a 760 px.

Escrever posts

Todo post precisa das variáveis title, date, category e (opcional) descr. Categorias: matematica, programacao, teologia.

Markdown — arquivo blog/meu-post.md:

@def title = "Título"
@def date = Date(2026, 10, 26)
@def category = "matematica"
@def format = "markdown"

{{post_header}}

Texto do post…

HTML — igual ao Markdown, com @def format = "html" e o HTML dentro de um bloco ~~~ … ~~~.

Typst — arquivo typst/posts/meu-post.typ:

#import "../post.typ": *
#show: post.with(
  title: "Título",
  date: "2026-10-26",
  category: "matematica",
  description: "Resumo curto.",
)

= Seção
Texto com equação $a^2 + b^2 = c^2$.

#figure(diagrama[#circle(radius: 1cm)], caption: [Um círculo.])

Desenhos feitos com formas (rect, circle, polygon, pacotes de gráficos) precisam estar dentro de #diagrama[...] para aparecerem na página. Texto, títulos, listas, tabelas, código, links, notas e equações funcionam diretamente.

Rodar localmente

typst --version                      # precisa do Typst instalado
julia scripts/build_typst.jl         # gera blog/<slug>.md e _assets/pdf/<slug>.pdf
julia -e 'using Franklin; serve()'   # servidor de desenvolvimento

Rode o script de novo sempre que alterar um .typ.

Como o Typst vira página (estratégia híbrida)

  1. typst query lê título, data e categoria do próprio .typ.

  2. O PDF é sempre gerado (botão "Baixar PDF" no post).

  3. A página usa o HTML do Typst (texto real, equações em MathML, figuras em SVG).

  4. Se a exportação HTML falhar, o script usa um SVG por página do PDF como plano B — o post continua sendo publicado.

As páginas geradas começam com a linha <!-- GERADO por scripts/build_typst.jl … -->; o script nunca sobrescreve um .md que não tenha essa marca.

Limites conhecidos