Olá, bem vindo ao código fonte do meu blog, atualmente disponibilizado no link robertdeveloper.com.
- TypeScript - Linguagem utilizada
- Astro - Framework que facilita a criação de sites staticos e performáticos, além de facilitar a criação de conteúdo
- SolidJS - Uma biblioteca JavaScript declarativa, eficiente e flexível para construir UIs
- MDX - Biblioteca que permite utilizar components jsx em conteúdo markdown
- Tailwindcss - Biblioteca que traz uma série de classes utilitárias para utilizar css de forma prática
- Eslint - Analisador de código estático
- Prettier - Formatador de código
Este projeto foi desenvolvido com o objetivo de facilitar a apresentação da minha jornada na programação e compartilhar minha trajetória com outras pessoas.
O blog está hospedado na AWS e utiliza as actions do GitHub para CI/CD. Abaixo tem uma imagem exemplificando o fluxo de trabalho que ocorre ao entrar no meu blog.
Optei por seguir e experimentar o atomic design, uma metodologia de criação de design systems que facilita enxergar e entender sua UI e seus componentes. Abaixo tem uma imagem explicativa.
Para evitar a criação manual das og:images, automatizei esse processo no momento da construção do projeto. Isso é feito da seguinte maneira:
Eu criei uma astro-integration que roda após o comando astro build ser finalizado com sucesso. Essa integração executa um script que pega o HTML gerado pelo build da página que fica no path /og (removi este path do sitemap pois é para uso interno apenas). Em seguida, iniciamos um navegador com o puppeteer e injetamos o HTML lá. Com ajuda do astro, conseguimos pegar o título de cada página gerada e adicioná-lo ao HTML injetado no navegador, assim, temos uma página no browser do puppeteer que poderia servir como nossa imagem. Dessa forma, tiramos um print com a ajuda do puppeteer e armazenamos ele na pasta que desejamos. Após isso, basta que as páginas apontem para esse local onde salvamos o print.
.
├── .github
├── .husky
├── .vscode
├── astro-integrations
├── docs
├── public
├── src
│ ├── @types
│ ├── content
│ ├── css
│ ├── pages
│ ├── ui
| Folder Name | Details |
|---|---|
| .github | Pasta para conter algumas features utilizadas pelo GitHub, caso queira saber mais clique aqui |
| .husky | Pasta utilizada pelo husky, uma biblioteca que ajuda a manter o padrão no repositório, apesar de ser um projeto que apenas eu mexo, eu gosto de manter as boas práticas |
| .vscode | Pasta utilizada para conter algumas configurações padrões para o VS Code, para saber mais, clique aqui |
| .astro-integrations | Pasta criada para manter integrações criadas por mim para o astro utilizar |
| docs | Pasta criada para conter algumas imagens utilizadas apenas na documentação deste projeto |
| public | Pasta onde contém os arquivos estáticos do projeto, como fotos, SVGs, etc... |
| src/@types | Pasta contendo algumas tipagens que são globais no projeto |
| src/content | Pasta utilizada pelo astro para handle de conteúdos que podem ser utilizados pelo projeto, uma das features mais legais do astro, para mais informações, clique aqui |
| src/css | Pasta contendo estilos globais do projeto |
| src/pages | Pasta que o astro utiliza para gerar os paths do site, é aqui onde montamos nossas páginas, para saber mais, clique aqui |
| src/ui | Pasta contendo toda a UI do projeto, dividida em atoms, molecules, organisms, templates e layouts |