Skip to content

Commit d6bfb3f

Browse files
marcialwushumarcialwushu
committed
fix: adjustment all files in this project
1 parent babb36c commit d6bfb3f

4 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
# Dev Diaries UI 🚀
2+
3+
> "Computer… display the captain's log." — Jean-Luc Picard
4+
5+
Um **engineering social feed** em estilo Tumblr para commits do GitHub, totalmente estático e pronto para GitHub Pages.
6+
7+
O projeto consome feeds Atom diretamente no navegador, transforma cada entrada em um post e abre o conteúdo completo dentro da própria UI — incluindo **Markdown renderizado** com headings, listas, blockquotes e code blocks.
8+
9+
## ✨ Funcionalidades atuais
10+
11+
- ⚛️ **React + Vite** para uma SPA rápida e leve
12+
- 🎨 **Tailwind CSS** com visual dark / Tumblr técnico
13+
- 🌍 **Sem backend**: tudo roda no frontend
14+
- 📡 **Consumo de Atom feed no browser** com fallback de proxy CORS
15+
- 🧠 **Parser próprio** para limpar o payload do GitHub Atom
16+
- 📝 **Renderização Markdown** com `react-markdown` + `remark-gfm`
17+
- 🔎 **Página interna de detalhe** para cada post/commit
18+
- 🧭 **Navegação por hash** (`#/post/...`) compatível com GitHub Pages
19+
- 🔁 **Auto-refresh** do feed a cada 5 minutos
20+
- 🚀 **Deploy automático** no GitHub Pages via GitHub Actions
21+
22+
## 🛰️ Arquitetura atual
23+
24+
```text
25+
GitHub commits.atom
26+
↓
27+
proxy CORS (fallback)
28+
↓
29+
DOMParser + limpeza do conteúdo
30+
↓
31+
extração de title / body / issueLink / markdown
32+
↓
33+
timeline React + página interna do post
34+
↓
35+
dist/
36+
```
37+
38+
## 🖼️ Fluxo da interface
39+
40+
```text
41+
Sidebar → filtros por repositório + refresh
42+
Timeline → cards com preview do conteúdo
43+
Post detail page → renderização completa do markdown
44+
```
45+
46+
Ao clicar em um card, o usuário abre o conteúdo completo dentro da própria SPA, em vez de ir direto para o commit no GitHub.
47+
48+
## 🚀 Como rodar localmente
49+
50+
### 1. Instale as dependências
51+
52+
```bash
53+
npm install
54+
```
55+
56+
### 2. Rode em desenvolvimento
57+
58+
```bash
59+
npm run dev
60+
```
61+
62+
### 3. Gere a build estática
63+
64+
```bash
65+
npm run build
66+
```
67+
68+
### 4. Visualize a build localmente
69+
70+
```bash
71+
npm run preview
72+
```
73+
74+
## 📦 Estrutura do projeto
75+
76+
```text
77+
feed-rss-commit/
78+
├── .github/
79+
│ ├── prompts/
80+
│ └── workflows/
81+
│ └── deploy-pages.yml
82+
├── config/
83+
│ └── feeds.yaml
84+
├── src/
85+
│ ├── components/
86+
│ │ ├── CommitCard.jsx
87+
│ │ ├── PostDetail.jsx
88+
│ │ └── Sidebar.jsx
89+
│ ├── services/
90+
│ │ └── rssParser.js
91+
│ ├── App.jsx
92+
│ ├── index.css
93+
│ └── main.jsx
94+
├── index.html
95+
├── package.json
96+
├── README.md
97+
└── vite.config.js
98+
```
99+
100+
## ⚙️ Configuração dos feeds
101+
102+
Edite `config/feeds.yaml` para adicionar ou remover feeds Atom:
103+
104+
```yaml
105+
feeds:
106+
- name: dev-diaries
107+
url: https://github.com/DevComputaria/dev-diaries/commits/main.atom
108+
- name: outro-repo
109+
url: https://github.com/username/repo/commits/main.atom
110+
```
111+
112+
## 🧩 Como o parser trata o conteúdo
113+
114+
O GitHub Atom pode trazer mensagens de commit com conteúdo rico, como:
115+
116+
- `Issue link:`
117+
- `Body:`
118+
- Markdown com `##`, listas, code spans e separadores `---`
119+
120+
O serviço em `src/services/rssParser.js` faz:
121+
122+
1. leitura do XML via `DOMParser`
123+
2. extração do `<pre>` do feed
124+
3. normalização de whitespace e indentação
125+
4. separação entre cabeçalho e corpo
126+
5. extração de `issueLink`
127+
6. geração de `excerpt` para o card
128+
7. envio do conteúdo completo para a página de detalhe
129+
130+
## 📝 Renderização Markdown
131+
132+
O detalhe do post usa:
133+
134+
- `react-markdown`
135+
- `remark-gfm`
136+
137+
Com isso, a UI renderiza corretamente:
138+
139+
- headings `#`, `##`, `###`
140+
- listas ordenadas e não ordenadas
141+
- blockquotes
142+
- code blocks e inline code
143+
- links
144+
- divisores `---`
145+
- negrito e itálico
146+
147+
## 🌐 Deploy no GitHub Pages
148+
149+
Este projeto usa **GitHub Actions** para publicar a pasta `dist/`.
150+
151+
### Configuração no GitHub
152+
153+
1. Vá em **Settings → Pages**
154+
2. Em **Source**, selecione **GitHub Actions**
155+
3. Faça push para a branch principal
156+
157+
O workflow irá:
158+
159+
1. instalar dependências
160+
2. gerar a build com Vite
161+
3. publicar `dist/` no GitHub Pages
162+
163+
## 📌 Observações importantes
164+
165+
- A build usa `base: "./"` para funcionar em subdiretórios do GitHub Pages sem depender do nome do repositório.
166+
- A navegação interna usa hash routing para evitar problemas de refresh em hospedagem estática.
167+
- O consumo do feed depende de proxies CORS públicos, com fallback para mais de uma opção.
168+
- O GitHub Atom pode mudar o formato do conteúdo; por isso o parser foi feito para ser tolerante a variações comuns.
169+
170+
## 🔧 Scripts disponíveis
171+
172+
- `npm run dev` — servidor local com Vite
173+
- `npm run build` — build de produção
174+
- `npm run preview` — pré-visualização da build gerada
175+
176+
## 🌌 Próximos upgrades possíveis
177+
178+
- [ ] Infinite scroll
179+
- [ ] Filtro por autor
180+
- [ ] Busca textual nos posts
181+
- [ ] Feed de releases / PRs / issues
182+
- [ ] Cards com preview de diff
183+
- [ ] Rotas amigáveis por slug
184+
- [ ] Tipografia editorial mais rica para os posts
185+
186+
## 📝 License
187+
188+
MIT
189+
190+
---
191+
192+
**Engineering Social Feed** — diário de bordo de commits, sem backend, com Markdown de verdade e com menos drama orbital.

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Dev Diaries UI — feed estilo Tumblr para commits do GitHub, pronto para GitHub Pages."
9+
/>
10+
<title>Dev Diaries UI</title>
11+
</head>
12+
<body class="bg-slate-950 text-slate-100">
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.jsx"></script>
15+
</body>
16+
</html>

‎package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "dev-diaries-ui",
3+
"version": "1.0.0",
4+
"description": "Static Tumblr-style feed for GitHub commit RSS, built with React + Vite",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@tailwindcss/vite": "^4.1.4",
13+
"js-yaml": "^4.1.0",
14+
"react": "^19.1.0",
15+
"react-dom": "^19.1.0",
16+
"react-markdown": "^10.1.0",
17+
"remark-gfm": "^4.0.1"
18+
},
19+
"devDependencies": {
20+
"@vitejs/plugin-react": "^4.4.1",
21+
"tailwindcss": "^4.1.4",
22+
"vite": "^6.3.1"
23+
}
24+
}

‎vite.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
import tailwindcss from "@tailwindcss/vite";
4+
5+
export default defineConfig({
6+
plugins: [react(), tailwindcss()],
7+
base: "./"
8+
});

0 commit comments

Comments
 (0)