Skip to content

Latest commit

 

History

History
81 lines (59 loc) · 2.27 KB

File metadata and controls

81 lines (59 loc) · 2.27 KB

🤝 Guia de Contribuição — GlassHub Quasar

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.


💻 1. Como Rodar o Projeto Localmente

Pré-requisitos

  • Node.js (versão 18.x ou superior)
  • npm ou yarn
  • Git

Passo a Passo

  1. Clone o repositório:

    git clone https://github.com/matheustheus27/GlassHubQuasar.git
    cd GlassHubQuasar
  2. Instale as dependências:

    npm install
  3. Configuração de Variáveis de Ambiente (Opcional): Crie um arquivo .env.local na raiz do projeto:

    GITHUB_TOKEN=ghp_seu_token_pessoal_aqui
  4. Inicie o servidor de desenvolvimento:

    npm run dev
  5. Abra o navegador em http://localhost:3000 para testar o Playground SPA.


🧩 2. Como Criar um Novo Widget SVG

Para adicionar um novo módulo ou endpoint de API:

  1. Crie a rota da API: Crie a pasta e arquivo app/api/seu-widget/route.ts.

  2. 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() });
    }
  3. Registre a nova aba no Playground SPA: Abra components/WidgetPlayground.tsx e adicione a opção na lista moduleTabs.


📜 3. Padrões de Código e Commits

  • 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.