Introdução:

Há alguns dias, eu apresentei um projeto neste post aqui: [Pitch] site de anotações simples no formato markdown, onde eu expliquei a motivação, dentre outras coisas que eu não irei repetir aqui. Então, se tiver interesse em saber mais sobre, recomendo da uma olhada neste post.

Atualização final do projeto:

O projeto ainda pode ser melhorado sim, com toda certeza, mas eu atingi a meta que eu queria, criar um site de anotações simples no formato markdown

Dito isso, decidi dá um ponto final no projetinho e iniciar outros, ou melhor, tirar um tempo para estudar React 19 e criar algo mais complexo, e quem sabe um PHP.

O que mudou no projeto da versão antiga para a atual?

Eu praticamente refiz tudo do zero onde eu mudei um pouco a função que criava novas linhas, o desgin, dentre outras coisas. Eu irei detalhar tudo mais abaixo.

Design:

Começando pelo o design, eu mudei pouca coisa. Deixei ele o mais mínimo possível, apenas com uma pequena paleta de cor. As mudanças mais notáveis são no modo escuro, onde adicionei uma paleta semelhante a do github no background-color e um verde para diversificar mais.

Outras mudanças são aplicadas, ou melhor, controladas pelo o Javascript, onde ao adicionar a formatação de títulos no formato .md, ele ficará com um cor azul, semelhante a como acontece no tabnews, que me serviu de inspiração em diversos pontos.

Outra formatação que tem estilo específico é nas citações, onde possui uma coloração esverdiada, também como no tabnews.

O bloco de código, possui um backgroud diferente, para ficar mais explícito sua área e todo o código dentro possui a cor laranja, também como no tabnews.

Dentro do bloco de código eu adicionei JetBrains mono como fonte, mas se você não estiver instalada, será as padrão do CSS e como última possibilidade, monospace.

Removido o botão de criação de tabela, estava gerando muitos bugs e quebrando a aplicação inteira, então terá que adicionar manualmente.

Estrutura do Projeto:

Eu vou explicar sobre a estrutura do script do projeto, o meu pensamento sobre cada funcionalidade e o que removi e adicionei.

Prettier:

Eu adicionei Prettier para formatar o código, ou seja, não utilizei o que já vem integrado no VScode. E isso me lembra que eu esqueci de usar npx prettier . --write no último commit...

Babel.js:

Adicionei babel.js por questões de compatibilidade em navegadores, apesar de eu não entender muito bem como configurar o babel por completo, foi uma experiência boa em fazer do zero, e não pré-configurado por um framework.

Mudança na criação de linhas:

Antigamente, ao clicar no enter no último caractere, criava uma <div contentEditable="true"> e algumas classes para estilos.

Eu mudei um pouco isso. Agora eu adiciono uma <div class="line"> para agrupar a linha inteira e dentro desta div existe um <span> que agrupa todas as palavras e dentro desde span, existem vários spans que embrulham cada palavra,

Resumido, a organização do conteúdo mudou em código, mas visualmente ainda é o mesmo. Agora todas as palavras são embrulhas em spans, pois isso me permite maior controle sobre partes específicas do conteúdo.

Sobre o enter, ainda permanece igual, porém um pouco mais aprimorando na questão de controle em código.

Botões de formatações e bloco de código:

Essas funções já existiam, mas foram alteradas um pouco.

Antes, no bloco de código, existia a possibilidade de bugar e não criar uma nova linha ao pressionar enter no caractere especial crase que não é possível representar aqui por causa do formatação de line_code.

Esse bug agora foi removido e depois de vários testes, não notei mais sua presença.

Os botões italic e bold foram alterados em código, mas funcionam da mesma forma que antes. O motivo de ser alterado em código, foi a necessidade de adaptar a nova estrutura de criação de linhas.

Ainda é possível utilizar atalhos no teclado para criar formatações italic e bold de maneira rápida, apertando: crtl + i e crtl + b, para itálico e bold respectivamente.

Conclusão:

Basicamente, é isso pessoal! Aprendi muito sobre o projeto e descobri coisas que ainda devo aprimorar. Futuramente eu pretendo criar um projeto semelhante do zero, mas totalmente inovador, mais mais funcionalidades e etc...

Espeor que tenham gostado. O link para o repositório: notes, os scripts estão um pouco bagunçados... peço desculpas desde já! Clean-code é algo que estou aprendendo profundamente no momento.

O link para o projeto está aqui: notes-project

Uma boa noite pessoal!