Agradecemos o seu interesse em contribuir com o GlassHub Quasar! Este guia foi feito para ajudar desenvolvedores de qualquer nível de experiência a rodar o projeto localmente e enviar melhorias.
- Node.js (versão
18.xou superior) - npm ou yarn
- Git
-
Clone o repositório:
git clone https://github.com/matheustheus27/GlassHubQuasar.git cd GlassHubQuasar -
Instale as dependências:
npm install
-
Configuração de Variáveis de Ambiente (Opcional): Crie um arquivo
.env.localna raiz do projeto:GITHUB_TOKEN=ghp_seu_token_pessoal_aqui
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Abra o navegador em
http://localhost:3000para testar o Playground SPA.
Para adicionar um novo módulo ou endpoint de API:
-
Crie a rota da API: Crie a pasta e arquivo
app/api/seu-widget/route.ts. -
Utilize os utilitários de SVG e Temas:
import { getTheme, getEmbeddedSvgStyles } from '@/lib/theme'; import { getSvgFiltersAndGradients, buildCacheHeaders } from '@/lib/svg-utils'; export async function GET(request: NextRequest) { const theme = getTheme('glass-dark'); const styles = getEmbeddedSvgStyles(theme); const defs = getSvgFiltersAndGradients(theme); const svg = ` <svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> ${styles} ${defs} <rect width="400" height="200" rx="18" class="gh-bg" stroke="url(#glassBorderGradient)" /> <!-- Seu conteúdo vetorial aqui --> </svg> `; return new NextResponse(svg, { headers: buildCacheHeaders() }); }
-
Registre a nova aba no Playground SPA: Abra
components/WidgetPlayground.tsxe adicione a opção na listamoduleTabs.
- Utilize código TypeScript limpo com tipagem explícita.
- Mantenha o padrão de commit semântico (ex:
feat:,fix:,docs:,style:). - Verifique se o projeto compila sem erros rodando
npm run build.