Como esse blog foi desenvolvido

    

           

O Notion é uma ferramenta de produtividade versátil que combina anotações, gestão de projetos, bancos de dados e colaboração em um único ambiente intuitivo. Sua interface personalizável permite organizar tarefas, criar documentos interativos e centralizar informações com eficiência. Ideal para uso pessoal e profissional, ele facilita o trabalho em equipe e melhora a produtividade com suporte multiplataforma e diversas integrações.

A API do Notion

                                                                                         

A API do Notion permite integrar bancos de dados a sites pessoais, exibindo conteúdos dinâmicos de forma automatizada. Com suporte a requisições HTTP RESTful, facilita a leitura e filtragem de dados, ideal para blogs, portfólios e dashboards. Embora tenha limitações, é uma solução prática para gerenciar informações em tempo real.

  

Vamos ao que interessa

  

Neste post, não vou entrar em detalhes sobre design de código e arquitetura usado nesse site, vou ensinar a usar a API do Notion para fazer seus próprios blogs ou até brincar com outros recursos.

 

No meu workspace do Notion, utilizo dois databases:

 

 

Os nomes falam por si só, um para testes locais e outro para produção, você não necessariamente precisa replicar dessa forma, mas por motivos óbvios, fiz assim.

 

Meu database do Notion está estruturado dessa forma:

 

 ‘page, tags, slug, author, date, available’

   

É basicamente o contrato que tenho com esse database, seguiremos estritamente em nosso site. Cada item dessa tabela representa novas janelas:

 

  

E o conteúdo base escrito será um markdown(essa informação é importante, explicarei mais para frente o porquê).

 

Beleza, tendo já seu database em mãos, ou melhor, sua tabela, vamos disponibilizar ela para o mundo externo fazendo “conexões”:

 

 

Ao clicar em “…” no topo direito do seu database, é possível perceber o trecho especificando “Conexões ativas”, o mesmo foi criado manualmente por meio deste link: https://www.notion.so/profile/integrations , está sendo utilizado essas configurações:

 

 

Essa conexão criada, lhe fornecerá um SECRET_KEY que com toda certeza absoluta está sendo fornecido ao nosso site como variável de ambiente em um projeto server side rendering.

  

 

Como na imagem acima, estou usando duas variáveis de ambiente: NOTION_DATABASE_ID e NOTION_API_KEY, a NOTION_API_KEY é o SECRET_KEY que conseguimos com a conexão criada e o NOTION_DATABASE_ID conseguimos na url de seu database no Notion:

 

 

Com tudo isso em mãos, vamos para o grosso da situação, o nosso código. Como mencionei antes, a ideia aqui não é falar sobre o design de código que usei, é abranger uma integração com uma API super interessante, pois bem… resumidamente, meu projeto é desenvolvido em Next então a partir daqui é claro que você entende de Node e módulos NPM. Instalei essas duas libs e no mesmo momento estou usando exatamente essas versões:

 

 

A biblioteca @notionhq/client é o SDK oficial da Notion para Node.js e JavaScript. Ela permite que você interaja com a API do Notion para criar, atualizar, recuperar e gerenciar páginas, bancos de dados, blocos, usuários e outras funcionalidades dentro do Notion.

 

A biblioteca notion-to-md é um utilitário para converter conteúdos do Notion para Markdown (MD). Ela facilita a extração de páginas e bancos de dados do Notion, formatando-os corretamente em Markdown para uso em blogs, documentação, ou exportação de dados.

 

Criei um arquivo ‘src/config/notion-blog.config.ts’ e estruturei dessa forma:

 

 

Fiz uma camada de adapter para utilizar o notion-to-md ‘src/adapters/notion-to-markdown.adapter.ts’ e estruturei dessa forma:

   

  

Fiz então uma camada de service ‘src/services/notion.blog.ts’ para centralizar as consultas onde importei e instanciei inicialmente a nossa classe de config:

 

 

Onde tenho essas funções:

 

 

Um detalhe interessante é o payload que enviamos para o SDK do Notion:

 

 

Pela lógica do payload, estamos fazendo um filtro com um dos contrato pré estabelecidos na hora de criar o blog:

   

 

E as mesmas tratadas em suas respectivas pages.tsx ‘src/app/[locale]/blog/page.tsx’:

 

 

A navegação nas páginas é feita objetivamente pelos slugs de cada post ‘src/app/[locale]/blog/[slug]/page.tsx’:

 

 

Em respeito dos responses/payload, vocês podem consultar a documentação oficial para clarear melhor os horizontes: https://developers.notion.com/docs/working-with-databases especificamente trabalhando com databases como nós fizemos aqui.

 

Como havia dito, não entraria em muitos detalhes sobre design de código, podem conferir no repositório desse site todas as implementações https://github.com/ElJohnnie/jonatha-dev