Ele vive! Meu Blog escrito com Obsidian e Next.js - Por que o Obsidian?

TL;DR

Embarquei na aventura do gerenciamento de notas com a Obsidian, o canivete suíço dos desenvolvedores que me permite usar a linguagem Markdown com facilidade. Comentei sobre o sistema de organização Zettelkasten e dei um mergulho profundo no mundo do frontmatter. Quer mais diversão? Eu garanto! Explorei como construir um template fixo para meus artigos, dando super poderes ao Obsidian com o plugin Templater, para automatizar o frontmatter fazendo passo a passo o código para entender a mágica por trás disso. E para terminar, como todo bom herói deve fazer, mostrei como gerenciar suas postagens com o git e atualizá-las automaticamente com o plugin do Obsidian.

Obsidian: A Inovação no Gerenciamento de Notas para Desenvolvedores

Vivo em um mundo onde o gerenciamento de notas tornou-se uma ferramenta indispensável para a organização do meu fluxo de trabalho. Com diversas opções disponíveis, como Notion e OneNote, a busca pela ferramenta ideal pode ser um desafio. Já experimentei várias na tentativa de manter minhas notas e estudos organizados e acessíveis. Entretanto, quando me deparei com o ==Obsidian,== percebi instantaneamente sua singularidade. Sua funcionalidade de ==backlinks== aliada à utilização com a linguagem Markdown (uma vez que nós, desenvolvedores, temos uma afinidade inata com a codificação) colocou o Obsidian em um patamar diferenciado.

Organização de Notas

Ao começar a utilizar qualquer ferramenta de gerenciamento de notas, me deparei com a necessidade de pesquisar sobre as melhores técnicas para organizar minhas anotações. Aposto que, assim como eu, você se deparará com o ==Zettelkasten==, um método que propõe um sistema de indexação das nossas anotações que facilita o acesso, mesmo em meio a grandes volumes de notas armazenadas. Claro que não existe uma solução universal para esse desafio, e é por isso que adaptei minhas anotações pessoais e de estudo ao método Zettelkasten, enquanto mantenho o sistema de agrupamento do blog mais simplificado para facilitar a compreensão dos usuários em relação às URLs.

Frontmatter: Estruturando Informações para Gerenciar Artigos

Dentro do contexto do Markdown, o ==frontmatter é um bloco de metadados== adicionado no início de um documento. Ainda que o Markdown não tenha suporte direto ao frontmatter, ele é comumente utilizado em sistemas de gerenciamento de conteúdo e geradores de sites estáticos, bem como no Obsidian para casos específicos.

O frontmatter no Markdown é geralmente delimitado por três traços --- e composto por informações estruturadas nos formatos ==YAML, TOML ou JSON==. Estas informações podem incluir o título do documento, data de criação, autor, categorias, tags e quaisquer outros dados relevantes para a organização e apresentação do conteúdo.

Quando um documento Markdown com frontmatter é processado, o sistema de gerenciamento de conteúdo ou o gerador de sites estáticos pode analisar estas informações e as utiliza para gerar o layout da página, aplicar estilos específicos, e até mesmo criar índices e páginas de categoria. Neste artigo, explorei como implementar e aproveitar esses dados em meu projeto com o Contentlayer, incluindo a tipagem dos dados do blog.

Para este projeto específico, escolhi a seguinte combinação de variáveis para o meu frontmatter:

---
id: UUID
title: ''
tldr: ''
series: ''
tags: [tag1, tag2, tag3, ...]
cover_image: https://image.example
alias: ''
path: path/to/my/articlhe (será o path na url final do blog)
created_at: YYYY-MM-DDTHH:mm:ss.sssZ
lang: pt-br (default)
published: false (default)
---

Se para você parece confuso, fique tranquilo que já veremos como gerar automaticamente esses campos.

Estrutura fixa em template

Para que possamos automatizar a criação do frontmatter precisaremos ter um template fixo para os meus artigos, pois usarei scripts que vão ter a estrutura e extrair informações. Mas para isso você precisa entender como funcionam os templates no Obsidian. Como de padrão, vou considerar que você já visitou a Documentação do Obsidian ou que já explorou o aplicativo a ponto de debatermos apenas a estrutura escolhida. Na estrutura teremos um cabeçalho contendo:

• Título: Que será usado para preencher um campo no frontmatter de mesmo nome, mas também para definir o nome do arquivo, dentro do repositório, o caminho do arquivo em um path e o alias do mesmo.
• Imagem: que será minha imagem principal do artigo e será armazenado como cover_image e posteriormente separado do corpo do artigo em nosso HTML.
• TL;DR: Se você não conhece essas sigas, elas são a abreviação da expressão =="too long; didn't read"==, que em inglês significa "muito longo; não li". E como já deu para entender, será meu resumo para uso posterior.

Também teremos um rodapé separado contendo o nome da série de postagens e das tags. Ele foi pensado separadamente pois o obsidian não reconhece tags escritas diretamente no frontmatter o que me levou a ter essa estrutura de rodapé. Ela será definida sempre após o último divisor o que nos leva aos seguintes itens:

• Divisor: O último divisor sempre vai ser o marcador que precede o rodapé, que é representado por --- no markdown. A lógica de detecção você verá em próximos posts quando falarei dos plugins remark e rehype.
• Tags: Bem auto explicativo pelo visto e com mesmo nome para variável, mas cabe destacar que a escolha de 4 tags vai de encontro como a proposta de compartilhar essas postagens em outras plataformas como Dev.to, Medium e Hashnode, pois algumas aceitam 5 tags e outras 4 tags.
• Série: Essa vem inspirada no conceito de série de postagens do Dev.to e que me parece bem interessante, sendo representada pela variável series e não obrigatória.