Bem-vindo à segunda parte de nossa série em jargons.dev!

Vamos lá!

Após o commit inicial, comecei a trabalhar no "script fork" (quer saber o que é isso?? Você descobrirá mais tarde na série?), mas devo confessar e como você encontrará no histórico de commits, que fiz uma longa pausa (3 meses) no trabalho em jargons.dev. Nesse período tive a oportunidade de fazer algumas reflexões subconscientes que foram ótimas para o projeto.

Oportunidade de reflexão

Parei de trabalhar em jargons.dev por um tempo, não intencionalmente, mas porque estava tão envolvido no trabalho que estava fazendo em Hearts que nem pensei em jargons.dev. Bom, ao longo desses meses chegou o ano novo (com novos objetivos é claro), também experimentei e fui exposto a algumas novas tecnologias. Uma tecnologia se destacou para mim e foi o Astro.

Astro ressoando com jargons.dev

Em janeiro, eu tinha o objetivo de "aprender novas tecnologias com documentos", esse foi um desafio que me fez começar no Astro depois de ouvir ótimas coisas sobre ele.

Avançando em março, me vi trabalhando em outro projeto paralelo totalmente diferente (wp-theme), eu estava assistindo a uma transmissão do Eddie Jaoude no YT onde contei isso a Eddie, mas a resposta dele acabaria me empurrando de volta a trabalhar em jargões.dev

Você tem alguns projetos paralelos... não sei qual deles.

Esta declaração me fez pensar muito, por isso decidi interromper todos os muitos projetos paralelos e focar em alguns que importavam imediatamente, jargons.dev facilmente voltou à mente.

Neste ponto, eu já estava um pouco familiarizado com o Astro, - sendo um framework para aplicativos web orientados a conteúdo, com um sistema de arquivos super simples, pronto para i18n, SSG com ótimo SEO (importante para o projeto), desempenho, suporte para outras bibliotecas frontend como ReactJS com ilhas (eu adoro esta especialmente); era uma ferramenta feita no céu para construir jargons.dev.

Bem, rapidamente comecei a trabalhar no próximo fim de semana disponível. Tive que trabalhar na parte do dicionário básico do projeto.

O Dicionário Básico

Inicializei um novo projeto Astro para este, tão simples quanto executar o comando abaixo e seguir as instruções...

npm create astro@latest

Eu também adicionei a integração tailwindcss para estilo; integração mdx para conteúdo; isso também foi super fácil de configurar apenas executando o comando respectivamente

npx astro add tailwind
npx astro add mdx

Continuei e concluí as seguintes tarefas

• Criei uma página inicial padronizada com formulário de pesquisa estático
• Resolvido temporariamente para ter o diretório src/pages/word como o diretório que deve conter cada palavra do dicionário como um arquivo mdx.
• Implementado o layout word.astro, que serve como o quadro onde todo o conteúdo dos arquivos .mdx para palavras dentro do diretório src/pages/word/ pode ser renderizado usando frontmatter.
• Também foi adicionado um mini formulário de pesquisa estático à barra de navegação de layout de palavras.

Com esse recurso, já podemos visualizar palavras do dicionário na rota jargons.dev/word/[word]. Isso significa que quando o arquivo tuple.mdx estiver presente no diretório src/pages/word/, poderemos acessar a página para ver a palavra do dicionário visitando jargons.dev/word/tuple

As relações públicas

talento: implementar dicionário base #4

Babblebey postado em 24 de março de 2024

Esta solicitação pull implementa o aplicativo de dicionário base com AstroJS

Alterações feitas

• Iniciou novo projeto astronômico
• Página inicial criada
• Implementado 2 layouts
  • Base - wrapper primário principal para todas as páginas e layouts
  • Word - layout a ser usado nas páginas de palavras
• Acionadores de formulário de pesquisa estáticos implementados na página inicial e no layout do Word

Capturas de tela

Página inicial

Página do Word

Ver no GitHub