Introdução:

Venho aprensentar um mini projeto, bem simples que passei os últimos dias trabalhando: Um simples anotador de texto no formato Markdown.

Por que eu trabalhei nessa ideia:

Nota
Você pode pular está parte, pois explico apenas a motivação da criação do projeto.

Bom, primeiro, eu pedi ideias em um post aqui mesmo no tabnews: preciso de ideias e o user1 deu uma sugestão bem interessante, um projeto de anotações.

A partir dai, eu comecei a idealizar o projeto, pois além de criar algo que eu nunca criei na vida, eu criaria algo que me ajudaria nos estudos de assuntos posteriores.

Outro comentário legal nesse post foi:

Nem tudo é só nextjs... todos seus projetos parecem ser em framework... cadê os feito na
mão.... digo com sofrimento kkkk... somente js, html e css?

Quero ver suas habilidades sem framework, faça uma página responsiva com animações e até formulários usando talvez o FormSubmit (que nem precisa de backend)... faça algo diferente man!

Faz uma página que consegue pegar o RSS do Tabnews aqui e mostre os textos mais recentes... algo do tipo... algo que sofra de verdade com suas poucas stacks.

Esse comentário foi feito por: sed que achei massa também, pois eu não tinha nenhum projeto concreto puro, apenas com tecnologias que auxiliavam. Por isso, decidi criar tudo apenas com HTML, CSS, JavaScript/TypeScript.

Projeto:

Você pode acessar o projeto neste link: notes e navegar pelo o código neste repositório: repositório.

Features:

O projeto conta com simples features, coisas que existem em praticamente todos os editores ou leitores de texto.

Formato Markdown:

Bom, o projeto foi pensando inteiramente no formado Markdown, portanto o resultado final(suas anotações) será exportada no formato .md, e apenas esse.

Portanto eu altamente recomendo que use ele como se fosse escrever em um arquivo .md próprio. Por exemplo: # title para criar títulos, __texte__ para formatar em itálico.

Modo Claro e Escuro:

Feature simples do qual você pode alternar entre tema claro e escuro. Utilizo a API do JavaScript matchMedia para verificar seu tema preferencial, e automaticamente já aplicar quando você abrir o site.

Exportar

Quando você terminar de anotar, você pode exportar o arquivo, ele será exportado no formato .md e apenas esse.

Uma vez que a página atualize, o texto será apagado. Em breve irei corrigir isso e armazenar um IndexedDB ou LocalStorage.

Características de editor:

Tentei deixar bem próximo do visual do Notion e simples como o Obsidian, porém de forma mais simples.

Se você digitar um # tittle ou até mesmo com mais níveis como ## title, e depois apertar um entender para ir para a nova linha, será aplicado a clase title ao título e ele ficará maior que textos regulares, para tornar um site um pouco mais imersivo :)

Ainda vou fazer mais ajustes para tornar mais imersivo!

Bugs e melhorias:

Ainda pretendo melhorar muito esse editor, afinal pretendo utilizar ele para uso pessoal. Estou ciente de alguns problemas relacionados a formatação ou praticidade, e em breve estarei aprimorando isso também.

Ainda estou me acostumado com esse tipo de projeto, pois nunca precisei lidar tanto com textos, selection object, range object, dentre outras coisas que são úteis no contexto de um editor.

Conclusão:

Bom, é isso pessoal. Aceitos dicas, sugestões e críticas. Tenha me mente que o projeto é para ser simples em sua essência, apenas para anotar e exportar um arquivo, por isso qualquer dica mais complexa como adicionar um banco de dados como o Notion, será bem vinda, mas não implementada pois ao meu ver perderá a sua essência.