diff --git a/.claude/skills/changelog/SKILL.md b/.claude/skills/changelog/SKILL.md index 60487a8..6f97325 100644 --- a/.claude/skills/changelog/SKILL.md +++ b/.claude/skills/changelog/SKILL.md @@ -14,7 +14,7 @@ Gera automaticamente uma entrada no changelog da documentação Mintlify com bas | `pages/v2/changelog.mdx` | Corridas | | `pages/v2/changelog-entregas.mdx` | Entregas | -Cada arquivo define seus próprios componentes (`Entry`, `ChangeSection`, `ParamBadge`, `EndpointBadge`) no topo via `export const`. As entradas `` são inseridas diretamente no arquivo, dentro do `
` principal, em ordem cronológica decrescente. +Os componentes (`Entry`, `ChangeSection`, `ParamBadge`, `EndpointBadge`) são compartilhados e vivem em `snippets/changelog-components.mdx`; cada arquivo de changelog os importa no topo via `import { Entry, ChangeSection, ParamBadge, EndpointBadge } from '/snippets/changelog-components.mdx';`. O layout responsivo fica nas classes `cl-*` do `custom.css` da raiz. As entradas `` são inseridas diretamente no arquivo, dentro do `
`, em ordem cronológica decrescente. ## Arquivos OpenAPI da v2 @@ -224,9 +224,9 @@ Repetir os passos abaixo para **cada arquivo** determinado na etapa 4: 4. Se a nova entrada for a **mais recente** de todas, inserir logo após o bloco de cabeçalho: ```mdx -
+
-
+
...
@@ -244,7 +244,9 @@ Após inserir, informar ao usuário: ## Componentes disponíveis nos arquivos -Ambos os arquivos de changelog definem os mesmos componentes no topo via `export const`. Nunca redefinir. +Os componentes são definidos uma única vez em `snippets/changelog-components.mdx` e importados pelos dois arquivos de changelog. Nunca redefinir componentes dentro dos changelogs nem remover o `import` do topo. + +O layout responsivo (timeline em coluna no mobile, quebra de linha nos badges de endpoint) é controlado pelas classes `cl-*` (`cl-container`, `cl-entry`, `cl-endpoint` etc.) definidas no `custom.css` da raiz — qualquer ajuste visual estrutural deve ser feito lá, não com estilo inline nos componentes. | Componente | Props | Descrição | |------------------|--------------------------------------|------------------------------------------------| @@ -257,10 +259,10 @@ O `EndpointBadge` suporta os métodos: `GET` (azul), `POST` (verde), `DELETE` (v ## Regras de qualidade -- **Nunca redefinir componentes** que já existem nos arquivos +- **Nunca redefinir componentes** — eles vivem em `snippets/changelog-components.mdx` e são importados; edições estruturais de layout vão para as classes `cl-*` no `custom.css` - **Sempre incluir `href`** no `EndpointBadge` — buscar em `docs.json` antes de deixar vazio - **Ordem cronológica decrescente sempre** — comparar datas numericamente antes de inserir; nunca prependar cegamente no topo nem appendar no final sem verificar -- **Sem `href` em `` nulo** — se `href` não foi encontrado, usar `
` em vez de `` +- **Sem `href` em `` nulo** — o próprio `EndpointBadge` renderiza `
` quando `href` está ausente; basta omitir a prop (e deixar o comentário `{/* TODO: href */}`) - **Data sempre em português** — `jan`, `fev`, `mar`, `abr`, `mai`, `jun`, `jul`, `ago`, `set`, `out`, `nov`, `dez` - **Modalidade pelo arquivo openapi** — se `openapi.json` mudou → Corridas; se `openapi-entregas.json` mudou → Entregas; ambos → os dois changelogs - **Não commitar** — a skill entrega apenas a edição no(s) arquivo(s); o commit é responsabilidade do autor diff --git a/custom.css b/custom.css index 9a7e3da..6c4b943 100644 --- a/custom.css +++ b/custom.css @@ -109,3 +109,182 @@ html[data-current-path="/pages/v2/changelog-entregas"] .nav-tabs > a:nth-child(4 --cta-color: #e02020; --cta-tint: rgba(241, 48, 48, 0.1); } + +/* ============================================================ + Changelog (Corridas e Entregas) — layout da timeline + Componentes em snippets/changelog-components.mdx + ============================================================ */ + +.cl-container { + max-width: 860px; + margin: 0 auto; + padding: 40px 20px 80px; +} + +.cl-page-header { + margin-bottom: 56px; +} + +.cl-page-title { + font-size: clamp(28px, 6vw, 40px); + font-weight: 800; + margin-bottom: 12px; + letter-spacing: -0.02em; +} + +.cl-page-subtitle { + font-size: 17px; + opacity: 0.65; + line-height: 1.6; +} + +.cl-entry { + display: flex; + gap: 32px; + margin-bottom: 56px; + position: relative; +} + +/* Coluna de data + label */ +.cl-entry-meta { + display: flex; + flex-direction: column; + align-items: center; + min-width: 140px; + padding-top: 4px; +} + +.cl-entry-date { + font-size: 13px; + font-weight: 600; + color: var(--tw-prose-body); + opacity: 0.55; + white-space: nowrap; + letter-spacing: 0.02em; +} + +.cl-entry-label { + margin-top: 8px; + padding: 3px 10px; + border-radius: 20px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + white-space: nowrap; +} + +/* Barra vertical da timeline com o ponto */ +.cl-entry-line { + width: 2px; + background: rgba(22, 163, 74, 0.15); + border-radius: 2px; + flex-shrink: 0; + position: relative; +} + +.cl-entry-dot { + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 10px; + height: 10px; + border-radius: 50%; + background: #16a34a; + border: 2px solid var(--tw-prose-bg, #fff); + box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.27); +} + +/* min-width: 0 permite o conteúdo encolher dentro do flex sem estourar */ +.cl-entry-body { + flex: 1; + min-width: 0; + padding-bottom: 8px; +} + +.cl-entry-body code { + overflow-wrap: anywhere; +} + +/* Badge de endpoint (método + path) */ +.cl-endpoint { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + max-width: 100%; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 6px 12px; + margin-bottom: 16px; + margin-right: 8px; + font-family: monospace; + font-size: 13px; + text-decoration: none; + transition: border-color 0.15s, background 0.15s; +} + +a.cl-endpoint[href]:hover { + border-color: rgba(22, 163, 74, 0.5); + background: rgba(22, 163, 74, 0.06); +} + +.cl-endpoint-method { + color: #fff; + border-radius: 4px; + padding: 1px 7px; + font-weight: 700; + font-size: 11px; + letter-spacing: 0.05em; + flex-shrink: 0; +} + +.cl-endpoint-path { + opacity: 0.8; + overflow-wrap: anywhere; +} + +/* Mobile: empilha a entry em coluna, data + label lado a lado no topo, + oculta a barra vertical e libera 100% da largura para o conteúdo */ +@media (max-width: 640px) { + .cl-container { + padding: 24px 16px 64px; + } + + .cl-page-header { + margin-bottom: 40px; + } + + .cl-entry { + flex-direction: column; + gap: 12px; + margin-bottom: 44px; + } + + .cl-entry-meta { + flex-direction: row; + align-items: center; + gap: 10px; + min-width: 0; + padding-top: 0; + } + + .cl-entry-label { + margin-top: 0; + } + + .cl-entry-line { + display: none; + } + + .cl-entry-body { + padding-bottom: 0; + } + + /* h2 das entries usa fontSize inline de 22px — !important necessário */ + .cl-entry-body h2 { + font-size: 19px !important; + } +} diff --git a/pages/v2/changelog-entregas.mdx b/pages/v2/changelog-entregas.mdx index 7649607..618eab3 100644 --- a/pages/v2/changelog-entregas.mdx +++ b/pages/v2/changelog-entregas.mdx @@ -4,152 +4,13 @@ description: "Histórico de alterações e novidades da API de Entregas v2" icon: "sparkles" --- -export const Entry = ({ date, label, labelColor = "#16A34A", children }) => ( -
-
-
{date}
- {label && ( -
{label}
- )} -
- -
-
-
- -
- {children} -
-
-); - -export const ChangeSection = ({ type, children }) => { - const config = { - added: { label: "Adicionado", bg: "#16A34A14", border: "#16A34A44", dot: "#16A34A" }, - changed: { label: "Alterado", bg: "#f59e0b14", border: "#f59e0b44", dot: "#f59e0b" }, - fixed: { label: "Corrigido", bg: "#3b82f614", border: "#3b82f644", dot: "#3b82f6" }, - removed: { label: "Removido", bg: "#ef444414", border: "#ef444444", dot: "#ef4444" }, - }; - const c = config[type] ?? config.added; - return ( -
-
-
- {c.label} -
-
- {children} -
-
- ); -}; - -export const ParamBadge = ({ name }) => ( - {name} -); - -export const EndpointBadge = ({ method, path, href }) => ( - { if (href) { e.currentTarget.style.borderColor = "rgba(22,163,74,0.5)"; e.currentTarget.style.background = "rgba(22,163,74,0.06)"; }}} - onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.background = "rgba(255,255,255,0.04)"; }} - > - {method} - {path} - -); +import { Entry, ChangeSection, ParamBadge, EndpointBadge } from '/snippets/changelog-components.mdx'; -
+
-
-
Entregas
-

+

+
Entregas
+

Acompanhe todas as novidades, melhorias e alterações nos endpoints de Entregas da API v2.

diff --git a/pages/v2/changelog.mdx b/pages/v2/changelog.mdx index 6914269..a9d98e1 100644 --- a/pages/v2/changelog.mdx +++ b/pages/v2/changelog.mdx @@ -4,152 +4,13 @@ description: "Histórico de alterações e novidades da API de Corridas v2" icon: "sparkles" --- -export const Entry = ({ date, label, labelColor = "#16A34A", children }) => ( -
-
-
{date}
- {label && ( -
{label}
- )} -
- -
-
-
- -
- {children} -
-
-); - -export const ChangeSection = ({ type, children }) => { - const config = { - added: { label: "Adicionado", bg: "#16A34A14", border: "#16A34A44", dot: "#16A34A" }, - changed: { label: "Alterado", bg: "#f59e0b14", border: "#f59e0b44", dot: "#f59e0b" }, - fixed: { label: "Corrigido", bg: "#3b82f614", border: "#3b82f644", dot: "#3b82f6" }, - removed: { label: "Removido", bg: "#ef444414", border: "#ef444444", dot: "#ef4444" }, - }; - const c = config[type] ?? config.added; - return ( -
-
-
- {c.label} -
-
- {children} -
-
- ); -}; - -export const ParamBadge = ({ name }) => ( - {name} -); - -export const EndpointBadge = ({ method, path, href }) => ( - { if (href) { e.currentTarget.style.borderColor = "rgba(22,163,74,0.5)"; e.currentTarget.style.background = "rgba(22,163,74,0.06)"; }}} - onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.background = "rgba(255,255,255,0.04)"; }} - > - {method} - {path} - -); +import { Entry, ChangeSection, ParamBadge, EndpointBadge } from '/snippets/changelog-components.mdx'; -
+
-
-
Corridas
-

+

+
Corridas
+

Acompanhe todas as novidades, melhorias e alterações nos endpoints de Corridas da API v2.

diff --git a/snippets/changelog-components.mdx b/snippets/changelog-components.mdx new file mode 100644 index 0000000..01545d2 --- /dev/null +++ b/snippets/changelog-components.mdx @@ -0,0 +1,82 @@ +{/* Componentes compartilhados dos changelogs (pages/v2/changelog.mdx e + pages/v2/changelog-entregas.mdx). O layout responsivo vive nas classes + cl-* definidas em custom.css. */} + +export const Entry = ({ date, label, labelColor = "#16A34A", children }) => ( +
+
+
{date}
+ {label && ( +
{label}
+ )} +
+ +
+
+
+ +
+ {children} +
+
+); + +export const ChangeSection = ({ type, children }) => { + const config = { + added: { label: "Adicionado", bg: "#16A34A14", border: "#16A34A44", dot: "#16A34A" }, + changed: { label: "Alterado", bg: "#f59e0b14", border: "#f59e0b44", dot: "#f59e0b" }, + fixed: { label: "Corrigido", bg: "#3b82f614", border: "#3b82f644", dot: "#3b82f6" }, + removed: { label: "Removido", bg: "#ef444414", border: "#ef444444", dot: "#ef4444" }, + }; + const c = config[type] ?? config.added; + return ( +
+
+
+ {c.label} +
+
+ {children} +
+
+ ); +}; + +export const ParamBadge = ({ name }) => ( + {name} +); + +export const EndpointBadge = ({ method, path, href }) => { + const Tag = href ? 'a' : 'div'; + return ( + + {method} + {path} + + ); +};