snapport 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Guilherme Godoy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# Snap-Port 🚀
+O **Snap-Port** é uma biblioteca **vanilla JavaScript**, sem dependências, pensada para desenvolvedores que desejam automatizar a exibição de projetos do GitHub em sites pessoais ou portfólios.
+
+A proposta é simples: você marca seus repositórios com a tag ``port`` no GitHub, e o Snap-Port se encarrega de **buscar, cachear, filtrar e renderizar** esses projetos na sua interface — eliminando a necessidade de atualizações manuais no código do site.
+
+> **Use o GitHub como fonte única de verdade para o seu portfólio.**
+
+---
+
+## 🛠 O que a biblioteca oferece?
+
+A biblioteca foi desenhada para ser modular, funcionando tanto como um **motor de dados (headless)** quanto como uma **solução visual pronta para uso.**
+
+### 1. Camada de Dados (Headless)
+
+Se você já possui seu próprio layout ou utiliza frameworks como **React** ou **Vue**, pode consumir apenas a lógica de dados.
+
+O método ``getPortProjects`` retorna um JSON tratado, abstraindo o ruído da API do GitHub e entregando apenas o essencial:
+
+- Nome
+- Descrição
+- Tópicos
+- Link do repositório
+- Link de deploy
+- Linguagem principal
+
+Exemplo básico de uso:
+  ```bash
+    import { getPortProjects } from 'snap-port';
+
+    const projects = await getPortProjects('seu-usuario', 'topic-tag');
+  ```
+
+---
+
+### 2. Componentes de UI (Plug & Play)
+
+Para quem busca agilidade, o Snap-Port oferece componentes de interface prontos, que podem ser usados sem frameworks:
+
+- **Search Bar**  
+  Filtro textual instantâneo que atua sobre os dados em cache.
+
+- **Filter Carousel**  
+  Carrossel horizontal de tecnologias que identifica automaticamente suas stacks a partir dos tópicos do GitHub.
+
+- **Project Cards**  
+  Cards minimalistas que incluem:
+  - Social Preview (imagem do repositório)
+  - Descrição com limite de linhas
+  - Botões de ação para código-fonte e deploy
+
+---
+
+## 🚀 Instalação e Uso
+
+### Via NPM
+
+```bash
+npm install snap-port
+```
+
+### Via CDN (Direto no HTML)
+Se preferir não usar gerenciadores de pacotes, você pode importar os arquivos de distribuição diretamente:
+
+```bash
+<!-- Estilos da Lib -->
+<link rel="stylesheet" href="https://unpkg.com/snap-port/dist/snap-port.css">
+
+<!-- Lógica da Lib -->
+<script type="module">
+  import { initPortfolio } from 'https://unpkg.com/snap-port/dist/snap-port.js';
+
+  initPortfolio('seu-usuario', {
+    search: 'id-do-input',
+    filters: 'id-container-dos-filtros',
+    projects: 'id-do-grid'
+  });
+</script>
+```
+
+## ⚙️ Customização e Comportamento
+
+### Gerenciamento de Tags e Imagens
+
+A biblioteca utiliza os **topics** do seu repositório para duas funções:
+
+- **Filtro de Descoberta**  
+  Apenas repositórios com a tag **`port`** são processados.
+
+- **Identidade Visual**  
+  Tags como `react`, `nodejs` ou `typescript` são mapeadas para seus respectivos ícones e cores oficiais.
+
+- **Imagens**  
+  O Snap-Port consome o **Open Graph** do repositório para exibir automaticamente a imagem de preview do projeto.
+
+---
+
+### Cache, Performance e Rate Limit
+
+Para evitar chamadas excessivas à API do GitHub e reduzir impactos de **rate limit**, o Snap-Port implementa um **sistema de cache inteligente baseado em ``localStorage``**.
+
+Esse sistema:
+
+- Armazena os dados tratados por usuário de forma isolada, evitando conflitos quando múltiplos portfólios utilizam a biblioteca no mesmo ambiente (ex: recrutadores abrindo vários ports).
+
+- Possui ciclo de expiração automática, garantindo que os dados sejam atualizados periodicamente (entre 1 e 2 horas).
+
+- Realiza limpeza automática de entradas antigas, funcionando como um garbage collector manual, evitando crescimento indefinido do localStorage.
+
+- Trata casos de borda para impedir reutilização indevida de cache entre usuários diferentes.
+
+Na prática, isso garante:
+
+- Melhor performance,
+
+- Menos requisições,
+
+- E maior previsibilidade no consumo da API do GitHub.
+
+---
+
+### Estilização
+
+A interface é construída com **variáveis CSS**, permitindo que você adapte as cores ao seu tema sem modificar o código interno:
+
+```css
+:root {
+  --ghp-accent: #333;   /* Cor de destaque (botões ativos e ícones) */
+  --ghp-bg: #fff;       /* Fundo dos cards */
+  --ghp-border: #ddd;   /* Bordas e divisores */
+}
+```
+
+## ⚠️ Status do Projeto e Contribuições
+
+Este projeto está em sua fase **MVP (Minimum Viable Product)**.  
+
+Atualmente, os componentes de UI compartilham estado interno para otimizar filtragem e performance.
+
+> Este projeto é mantido no tempo livre e não possui garantias de suporte contínuo. Mudanças na API do GitHub ou na própria biblioteca podem ocorrer sem aviso prévio.
+
+Sugestões, ideias de funcionalidades e relatos de bugs são bem-vindos.
+Sinta-se à vontade para abrir uma **Issue** ou enviar um **Pull Request**.
+Para detalhes sobre como contribuir, consulte o [**Guia de Contribuição.**](https://github.com/guilhermegodoydev/snap-port/blob/main/CONTRIBUTING.md)
+
+---
+
+**Autor:** Guilherme Godoy ([@guilhermegodoydev](https://github.com/guilhermegodoydev)) • **Licença:** MIT • **Peso:** 2.8kB gzipped
+
+

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+export declare function getPortProjects(username: string, tag?: string): Promise<SanitizedRepo[]>;
+
+export declare function initPortfolio(username: string, config?: PortfolioConfig): Promise<PortfolioResponse>;
+
+export declare interface PortfolioConfig {
+    searchContainer: string;
+    filtersContainer: string;
+    projectsContainer: string;
+    customCardTemplate?: (repo: SanitizedRepo) => string;
+}
+
+export declare interface PortfolioResponse {
+    projects?: any[];
+    status: 'success' | 'error';
+    message?: string;
+}
+
+export declare function renderFilters(projects: SanitizedRepo[], containerElement: HTMLElement | string): void;
+
+export declare function renderProjects(projects: SanitizedRepo[], containerElement: HTMLElement | string, username?: string, customTemplate?: (repo: SanitizedRepo) => string): void;
+
+export declare function renderSearchBar(containerElement: HTMLElement | string): void;
+
+export declare interface SanitizedRepo {
+    id: number;
+    name: string;
+    description: string | null;
+    htmlUrl: string;
+    topics: string[];
+    deployUrl: string | null;
+}
+
+export declare interface TechInfo {
+    icon: string;
+    name: string;
+    color: string;
+}
+
+export { }

package/dist/snap-port.css

@@ -0,0 +1 @@
+:root{--ghp-accent: #333;--ghp-bg: #ffffff;--ghp-border: rgba(226, 226, 228, .8);--ghp-shadow: rgba(0, 0, 0, .1);--ghp-text: #333;--ghp-text-light: #666}.ghp-search-input,.ghp-filter-btn,.ghp-card-links a{transition:all .2s ease}.ghp-search-container{position:relative;margin:0 15px 20px;max-width:400px}.ghp-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#888;pointer-events:none}.ghp-search-input{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--ghp-border);border-radius:8px;font-size:14px;outline:none}.ghp-search-input:focus{border-color:var(--ghp-accent);box-shadow:0 0 0 3px #0000000d}.ghp-filters-content{display:flex;gap:12px;padding:10px 15px;margin-bottom:25px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ghp-filters-content::-webkit-scrollbar{display:none}.ghp-filter-btn{scroll-snap-align:start;flex:0 0 auto;display:flex;align-items:center;gap:8px;background-color:var(--ghp-bg);padding:8px 16px;border:solid 2px #e1e4e8;border-radius:30px;cursor:pointer;font-family:inherit;font-weight:500}.ghp-filter-btn img,.ghp-filter-btn svg{width:18px;height:18px;object-fit:contain}.ghp-filter-btn p{margin:0;font-size:14px}@media(max-width:600px){.ghp-filters-content{gap:8px;padding:8px}}.ghp-filter-btn:hover{transform:translateY(-3px);border-color:var(--tech-color, var(--ghp-accent));color:var(--tech-color, var(--ghp-accent));box-shadow:0 4px 8px var(--ghp-shadow)}.ghp-filter-btn.active{background-color:var(--tech-color, var(--ghp-accent));color:#fff;border-color:var(--tech-color, var(--ghp-accent))}.ghp-filter-btn.active img{filter:brightness(0) invert(1)}.ghp-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:15px;align-items:start}@media(max-width:1024px){.ghp-projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}.ghp-project-card{background-color:var(--ghp-bg);border-radius:12px;border:solid 1px var(--ghp-border);box-shadow:0 2px 5px var(--ghp-shadow);display:flex;flex-direction:column;transition:transform .2s ease;height:100%;min-height:220px}.ghp-img-container,.ghp-card-img{border-radius:8px 8px 0 0}.ghp-img-container{width:100%;aspect-ratio:16 / 9;background-color:#161b22;border-bottom:1px solid var(--ghp-border);overflow:hidden}.ghp-card-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.ghp-card-content{display:flex;flex-direction:column;justify-content:space-between;flex:1;padding:20px}.ghp-skeleton-card{height:220px;width:100%;border:1px solid transparent;box-sizing:border-box}.ghp-project-card:hover{transform:translateY(-5px)}.ghp-project-card h3{margin:0 0 10px;font-size:18px}.ghp-project-card p{font-size:14px;color:var(--ghp-text-light);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.ghp-card-links{display:flex;gap:10px}.ghp-card-links a{text-decoration:none;padding:6px 14px;color:var(--ghp-text);font-size:13px;font-weight:500;border:solid 1px var(--ghp-border);border-radius:20px;background-color:#f6f8fa}.ghp-card-links a:hover{background-color:var(--ghp-accent);color:#fff;border-color:var(--ghp-accent)}.ghp-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6,#f0f0f0 75%);background-size:200% 100%;animation:ghp-loading 1.5s infinite ease-in-out;border-radius:4px}@keyframes ghp-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ghp-skeleton-card{height:200px;width:100%;border-radius:12px}

package/dist/snap-port.js

@@ -0,0 +1,190 @@
+const u = (t) => ({
+  id: t.id,
+  name: t.name ?? "Projeto sem nome",
+  description: t.description ?? "Sem descrição disponível",
+  htmlUrl: t.html_url,
+  topics: Array.isArray(t.topics) ? t.topics : [],
+  deployUrl: t.homepage ?? null
+});
+function f(t) {
+  try {
+    Object.keys(localStorage).forEach((e) => {
+      e.startsWith("gh_projects_") && !e.includes(t) && localStorage.removeItem(e);
+    });
+  } catch (e) {
+    console.warn("Erro ao limpar caches antigos:", e);
+  }
+}
+async function y(t, e = "port") {
+  if (!t)
+    return console.error("GitHubPortfolio: Username é obrigatório."), [];
+  const o = `gh_projects_${t}`;
+  try {
+    f(t);
+    const r = localStorage.getItem(o);
+    if (r) {
+      const { data: l, timestamp: p } = JSON.parse(r);
+      if (Date.now() - p < 72e5)
+        return l;
+    }
+    const n = encodeURIComponent(`user:${t} topic:${e}`), c = await fetch(`https://api.github.com/search/repositories?q=${n}&sort=updated&order=desc`);
+    if (!c.ok)
+      throw new Error(`GitHub API error: ${c.status}`);
+    const a = ((await c.json()).items || []).map(u), i = {
+      data: a,
+      timestamp: Date.now()
+    };
+    return localStorage.setItem(o, JSON.stringify(i)), a;
+  } catch (r) {
+    console.error(`GitHubPortfolio: Erro ao buscar dados de ${t}:`, r);
+    const n = localStorage.getItem(o);
+    return n ? (console.warn("GitHubPortfolio: Usando cache expirado devido a erro de rede."), JSON.parse(n).data) : [];
+  }
+}
+const v = {
+  react: { name: "React", icon: "react", color: "61DAFB" },
+  vue: { name: "Vue.js", icon: "vuedotjs", color: "4FC08D" },
+  angular: { name: "Angular", icon: "angular", color: "DD0031" },
+  nextjs: { name: "Next.js", icon: "nextdotjs", color: "000000" },
+  typescript: { name: "TypeScript", icon: "typescript", color: "3178C6" },
+  javascript: { name: "JavaScript", icon: "javascript", color: "F7DF1E" },
+  html5: { name: "HTML5", icon: "html5", color: "E34F26" },
+  css3: { name: "CSS3", icon: "css3", color: "1572B6" },
+  sass: { name: "Sass", icon: "sass", color: "CC6699" },
+  "tailwind-css": { name: "Tailwind", icon: "tailwindcss", color: "06B6D4" },
+  bootstrap: { name: "Bootstrap", icon: "bootstrap", color: "7952B3" },
+  "styled-components": { name: "Styled Components", icon: "styledcomponents", color: "DB7093" },
+  figma: { name: "Figma", icon: "figma", color: "F24E1E" },
+  nodejs: { name: "Node.js", icon: "nodedotjs", color: "339933" },
+  express: { name: "Express", icon: "express", color: "000000" },
+  nestjs: { name: "NestJS", icon: "nestjs", color: "E0234E" },
+  python: { name: "Python", icon: "python", color: "3776AB" },
+  java: { name: "Java", icon: "openjdk", color: "007396" },
+  php: { name: "PHP", icon: "php", color: "777BB4" },
+  postgresql: { name: "PostgreSQL", icon: "postgresql", color: "4169E1" },
+  mongodb: { name: "MongoDB", icon: "mongodb", color: "47A248" },
+  mysql: { name: "MySQL", icon: "mysql", color: "4479A1" },
+  firebase: { name: "Firebase", icon: "firebase", color: "FFCA28" },
+  prisma: { name: "Prisma", icon: "prisma", color: "2D3748" },
+  docker: { name: "Docker", icon: "docker", color: "2496ED" },
+  git: { name: "Git", icon: "git", color: "F05032" },
+  jest: { name: "Jest", icon: "jest", color: "C21325" },
+  "github-actions": { name: "GitHub Actions", icon: "githubactions", color: "2088FF" }
+}, d = (t) => typeof t == "string" ? document.getElementById(t) : t, g = (t, e = null) => {
+  if (!e)
+    return `
+      <button class="ghp-filter-btn active" data-topic="all">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/>
+          <rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>
+        </svg>
+        <p>Todos</p>
+      </button>
+    `;
+  const o = `https://cdn.simpleicons.org/${e.icon}/${e.color}`;
+  return `
+    <button class="ghp-filter-btn" data-topic="${t}" style="--tech-color: #${e.color}">
+      <img src="${o}" alt="${e.name}" loading="lazy">
+      <p>${e.name}</p>
+    </button>
+  `;
+}, j = (t, e) => {
+  const o = `https://raw.githubusercontent.com/${e}/${t.name}/main/preview.png`, r = `https://opengraph.githubassets.com/${e}/${t.name}`, n = `https://placehold.co/640x360?text=${encodeURIComponent(t.name)}`, c = t.deployUrl ? `<a href="${t.deployUrl}" target="_blank" rel="noopener noreferrer">Acessar</a>` : "", s = t.htmlUrl ? `<a href="${t.htmlUrl}" target="_blank" rel="noopener noreferrer">Github</a>` : "";
+  return `
+    <div class="ghp-project-card">
+      <div class="ghp-img-container">
+        <img 
+          src="${o}" 
+          alt="Preview do projeto ${t.name}" 
+          class="ghp-card-img" 
+          loading="lazy"
+          onerror="if (this.src.includes('preview.png')) { this.src='${r}'; } else { this.onerror=null; this.src='${n}'; }"
+        >
+      </div>
+      <div class="ghp-card-content">
+        <div>
+          <h3>${t.name}</h3>
+          <p title="${t.description}">${t.description}</p>
+        </div>
+        <div class="ghp-card-links">
+          ${s}
+          ${c}
+        </div>
+      </div>
+    </div>
+  `;
+};
+function C(t, e = 6) {
+  const o = d(t);
+  o && (o.className = "ghp-projects-grid", o.innerHTML = Array(e).fill('<div class="ghp-project-card ghp-skeleton ghp-skeleton-card"></div>').join(""));
+}
+function w(t, e) {
+  const o = d(e);
+  if (!o) return;
+  const r = t.flatMap((s) => s.topics || []), c = [...new Set(r)].reduce((s, a) => {
+    const i = v[a];
+    return i ? s + g(a, i) : s;
+  }, g("all"));
+  o.innerHTML = `<div class="ghp-filters-content">${c}</div>`;
+}
+function m(t, e, o = "", r) {
+  const n = d(e);
+  if (n) {
+    if (n.className = "ghp-projects-grid", n.style.minHeight = "auto", t.length === 0) {
+      n.innerHTML = '<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';
+      return;
+    }
+    n.innerHTML = t.map((c) => r ? r(c) : j(c, o)).join("");
+  }
+}
+function $(t) {
+  const e = d(t);
+  e && (e.innerHTML = `
+    <div class="ghp-search-container">
+      <svg class="ghp-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+      </svg>
+      <input type="text" id="gh-port-search" class="ghp-search-input" placeholder="Buscar projeto..." autocomplete="off">
+    </div>
+  `);
+}
+function b(t, e, o, r, n) {
+  const c = document.getElementById(t);
+  c && c.addEventListener("click", (s) => {
+    const i = s.target.closest(".ghp-filter-btn");
+    if (!i) return;
+    const l = i.dataset.topic, p = l === "all" ? e : e.filter((h) => h.topics.includes(l));
+    m(p, o, r, n), c.querySelectorAll(".ghp-filter-btn").forEach((h) => h.classList.remove("active")), i.classList.add("active");
+  });
+}
+function E(t, e, o, r) {
+  const n = document.getElementById("gh-port-search");
+  n && n.addEventListener("input", (c) => {
+    const a = c.target.value.toLowerCase(), i = t.filter(
+      (l) => l.name.toLowerCase().includes(a) || (l.description || "").toLowerCase().includes(a) || l.topics.some((p) => p.toLowerCase().includes(a))
+    );
+    m(i, e, o, r);
+  });
+}
+async function S(t, e = {
+  searchContainer: "search-cont",
+  filtersContainer: "filters-cont",
+  projectsContainer: "projects-cont"
+}) {
+  try {
+    $(e.searchContainer), C(e.projectsContainer, 6);
+    const o = await y(t);
+    return w(o, e.filtersContainer), m(o, e.projectsContainer, t, e.customCardTemplate), b(e.filtersContainer, o, e.projectsContainer, t, e.customCardTemplate), E(o, e.projectsContainer, t, e.customCardTemplate), { projects: o, status: "success" };
+  } catch (o) {
+    console.error("Erro ao inicializar portfólio:", o);
+    const r = document.getElementById(e.projectsContainer);
+    return r && (r.innerHTML = '<p class="ghp-empty-msg">Erro ao carregar projetos.</p>'), { status: "error", message: o.message };
+  }
+}
+export {
+  y as getPortProjects,
+  S as initPortfolio,
+  w as renderFilters,
+  m as renderProjects,
+  $ as renderSearchBar
+};

package/dist/snap-port.umd.cjs

@@ -0,0 +1,43 @@
+(function(s,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(s=typeof globalThis<"u"?globalThis:s||self,h(s.SnapPort={}))})(this,(function(s){"use strict";const C=e=>({id:e.id,name:e.name??"Projeto sem nome",description:e.description??"Sem descrição disponível",htmlUrl:e.html_url,topics:Array.isArray(e.topics)?e.topics:[],deployUrl:e.homepage??null});function b(e){try{Object.keys(localStorage).forEach(t=>{t.startsWith("gh_projects_")&&!t.includes(e)&&localStorage.removeItem(t)})}catch(t){console.warn("Erro ao limpar caches antigos:",t)}}async function f(e,t="port"){if(!e)return console.error("GitHubPortfolio: Username é obrigatório."),[];const o=`gh_projects_${e}`;try{b(e);const r=localStorage.getItem(o);if(r){const{data:p,timestamp:d}=JSON.parse(r);if(Date.now()-d<72e5)return p}const n=encodeURIComponent(`user:${e} topic:${t}`),c=await fetch(`https://api.github.com/search/repositories?q=${n}&sort=updated&order=desc`);if(!c.ok)throw new Error(`GitHub API error: ${c.status}`);const a=((await c.json()).items||[]).map(C),l={data:a,timestamp:Date.now()};return localStorage.setItem(o,JSON.stringify(l)),a}catch(r){console.error(`GitHubPortfolio: Erro ao buscar dados de ${e}:`,r);const n=localStorage.getItem(o);return n?(console.warn("GitHubPortfolio: Usando cache expirado devido a erro de rede."),JSON.parse(n).data):[]}}const w={react:{name:"React",icon:"react",color:"61DAFB"},vue:{name:"Vue.js",icon:"vuedotjs",color:"4FC08D"},angular:{name:"Angular",icon:"angular",color:"DD0031"},nextjs:{name:"Next.js",icon:"nextdotjs",color:"000000"},typescript:{name:"TypeScript",icon:"typescript",color:"3178C6"},javascript:{name:"JavaScript",icon:"javascript",color:"F7DF1E"},html5:{name:"HTML5",icon:"html5",color:"E34F26"},css3:{name:"CSS3",icon:"css3",color:"1572B6"},sass:{name:"Sass",icon:"sass",color:"CC6699"},"tailwind-css":{name:"Tailwind",icon:"tailwindcss",color:"06B6D4"},bootstrap:{name:"Bootstrap",icon:"bootstrap",color:"7952B3"},"styled-components":{name:"Styled Components",icon:"styledcomponents",color:"DB7093"},figma:{name:"Figma",icon:"figma",color:"F24E1E"},nodejs:{name:"Node.js",icon:"nodedotjs",color:"339933"},express:{name:"Express",icon:"express",color:"000000"},nestjs:{name:"NestJS",icon:"nestjs",color:"E0234E"},python:{name:"Python",icon:"python",color:"3776AB"},java:{name:"Java",icon:"openjdk",color:"007396"},php:{name:"PHP",icon:"php",color:"777BB4"},postgresql:{name:"PostgreSQL",icon:"postgresql",color:"4169E1"},mongodb:{name:"MongoDB",icon:"mongodb",color:"47A248"},mysql:{name:"MySQL",icon:"mysql",color:"4479A1"},firebase:{name:"Firebase",icon:"firebase",color:"FFCA28"},prisma:{name:"Prisma",icon:"prisma",color:"2D3748"},docker:{name:"Docker",icon:"docker",color:"2496ED"},git:{name:"Git",icon:"git",color:"F05032"},jest:{name:"Jest",icon:"jest",color:"C21325"},"github-actions":{name:"GitHub Actions",icon:"githubactions",color:"2088FF"}},m=e=>typeof e=="string"?document.getElementById(e):e,y=(e,t=null)=>{if(!t)return`
+      <button class="ghp-filter-btn active" data-topic="all">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/>
+          <rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>
+        </svg>
+        <p>Todos</p>
+      </button>
+    `;const o=`https://cdn.simpleicons.org/${t.icon}/${t.color}`;return`
+    <button class="ghp-filter-btn" data-topic="${e}" style="--tech-color: #${t.color}">
+      <img src="${o}" alt="${t.name}" loading="lazy">
+      <p>${t.name}</p>
+    </button>
+  `},$=(e,t)=>{const o=`https://raw.githubusercontent.com/${t}/${e.name}/main/preview.png`,r=`https://opengraph.githubassets.com/${t}/${e.name}`,n=`https://placehold.co/640x360?text=${encodeURIComponent(e.name)}`,c=e.deployUrl?`<a href="${e.deployUrl}" target="_blank" rel="noopener noreferrer">Acessar</a>`:"",i=e.htmlUrl?`<a href="${e.htmlUrl}" target="_blank" rel="noopener noreferrer">Github</a>`:"";return`
+    <div class="ghp-project-card">
+      <div class="ghp-img-container">
+        <img 
+          src="${o}" 
+          alt="Preview do projeto ${e.name}" 
+          class="ghp-card-img" 
+          loading="lazy"
+          onerror="if (this.src.includes('preview.png')) { this.src='${r}'; } else { this.onerror=null; this.src='${n}'; }"
+        >
+      </div>
+      <div class="ghp-card-content">
+        <div>
+          <h3>${e.name}</h3>
+          <p title="${e.description}">${e.description}</p>
+        </div>
+        <div class="ghp-card-links">
+          ${i}
+          ${c}
+        </div>
+      </div>
+    </div>
+  `};function S(e,t=6){const o=m(e);o&&(o.className="ghp-projects-grid",o.innerHTML=Array(t).fill('<div class="ghp-project-card ghp-skeleton ghp-skeleton-card"></div>').join(""))}function v(e,t){const o=m(t);if(!o)return;const r=e.flatMap(i=>i.topics||[]),c=[...new Set(r)].reduce((i,a)=>{const l=w[a];return l?i+y(a,l):i},y("all"));o.innerHTML=`<div class="ghp-filters-content">${c}</div>`}function u(e,t,o="",r){const n=m(t);if(n){if(n.className="ghp-projects-grid",n.style.minHeight="auto",e.length===0){n.innerHTML='<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';return}n.innerHTML=e.map(c=>r?r(c):$(c,o)).join("")}}function j(e){const t=m(e);t&&(t.innerHTML=`
+    <div class="ghp-search-container">
+      <svg class="ghp-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+      </svg>
+      <input type="text" id="gh-port-search" class="ghp-search-input" placeholder="Buscar projeto..." autocomplete="off">
+    </div>
+  `)}function E(e,t,o,r,n){const c=document.getElementById(e);c&&c.addEventListener("click",i=>{const l=i.target.closest(".ghp-filter-btn");if(!l)return;const p=l.dataset.topic,d=p==="all"?t:t.filter(g=>g.topics.includes(p));u(d,o,r,n),c.querySelectorAll(".ghp-filter-btn").forEach(g=>g.classList.remove("active")),l.classList.add("active")})}function B(e,t,o,r){const n=document.getElementById("gh-port-search");n&&n.addEventListener("input",c=>{const a=c.target.value.toLowerCase(),l=e.filter(p=>p.name.toLowerCase().includes(a)||(p.description||"").toLowerCase().includes(a)||p.topics.some(d=>d.toLowerCase().includes(a)));u(l,t,o,r)})}async function P(e,t={searchContainer:"search-cont",filtersContainer:"filters-cont",projectsContainer:"projects-cont"}){try{j(t.searchContainer),S(t.projectsContainer,6);const o=await f(e);return v(o,t.filtersContainer),u(o,t.projectsContainer,e,t.customCardTemplate),E(t.filtersContainer,o,t.projectsContainer,e,t.customCardTemplate),B(o,t.projectsContainer,e,t.customCardTemplate),{projects:o,status:"success"}}catch(o){console.error("Erro ao inicializar portfólio:",o);const r=document.getElementById(t.projectsContainer);return r&&(r.innerHTML='<p class="ghp-empty-msg">Erro ao carregar projetos.</p>'),{status:"error",message:o.message}}}s.getPortProjects=f,s.initPortfolio=P,s.renderFilters=v,s.renderProjects=u,s.renderSearchBar=j,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "snapport",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/snap-port.umd.cjs",
+  "module": "./dist/snap-port.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/snap-port.js",
+      "require": "./dist/snap-port.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "license": "MIT",
+  "author": "Guilherme Godoy"
+}