snapport 1.0.1 → 1.1.1

package/README.md

@@ -1,130 +1,76 @@
 <p align="center">
-  <a href="./README.pt-br.md">Leia isto em Português</a>
+  <img src="https://github.com/guilhermegodoydev/snapport/blob/main/preview.png" width="300" height="300" style="border-radius: 50%" alt="Logo" />
 </p>
 
+<h1 align="center">Snapport</h1>
+
 <p align="center">
-  <img src="https://img.shields.io/npm/dm/snapport?style=for-the-badge&logo=npm" alt="NPM Downloads">
-  <img src="https://img.shields.io/npm/v/snapport?style=for-the-badge" alt="NPM Version">
-  <img src="https://img.shields.io/github/license/guilhermegodoydev/snapport?style=for-the-badge" alt="License">
-  <img src="https://img.shields.io/bundlephobia/min/snapport?style=for-the-badge" alt="Bundle Size">
+  <strong>Seu portfólio alimentado automaticamente pelos tópicos do seu GitHub.</strong>
 </p>
 
-# Snap-Port 🚀
-
-**Snap-Port** is a zero-dependency **TypeScript** library designed to automate the display of GitHub projects on personal websites or portfolios.
-
-The core philosophy is to use GitHub as your **Single Source of Truth**: by simply tagging your repositories, the library handles fetching, processing, caching, and rendering data, eliminating manual updates to your portfolio's code.
-
----
-
-## 🛠 Technical Features
-
-### 1. Project Selection & Stack Control
-Snap-Port offers full control over what is displayed and how technologies are categorized:
-
-- **Discovery Tag**: By default, the library looks for repositories tagged with `port`, but you can define any custom tag during initialization.
-- **Stack Filters (Topics)**: For automatic filters and search to work correctly, list your technologies (e.g., `react`, `nodejs`, `css`) in your GitHub repository topics.
-- **Why avoid automatic "Language"?**: Snap-Port ignores the default GitHub `language` field to let you highlight the actual stack. This prevents a React project from being labeled merely as "HTML" or "JavaScript" due to build files, ensuring the filter reflects the real project stack.
-
-### 2. Intelligent Image Management
-Since the GitHub API does not return direct preview image links, Snap-Port implements an **automatic generation logic**:
-
-To ensure each project has its own image, follow these rules:
-- **Preview File**: Create a file named `preview.png` in the root of your repository.
-- **Note**: The filename must be exactly `preview.png` (case-sensitive).
-
-If the file is missing or a loading error occurs (such as Rate Limits), the library executes a **cascading fallback strategy**:
-1. **GitHub Open Graph**: Attempts to load the dynamic social card generated by GitHub.
-2. **Safety Placeholder**: If the request is blocked, it generates a neutral card with the project name via `placehold.co`.
+<p align="center">
+  <img src="https://img.shields.io/npm/v/snapport" alt="NPM Version">
+  <img src="https://img.shields.io/bundlephobia/minzip/snapport" alt="Bundle Size">
+  <img src="https://img.shields.io/npm/l/snapport" alt="License">
+</p>
 
-### 3. Integrated UI Components
-- **Search Bar**: Real-time text filtering (name, description, and topics).
-- **Filter Carousel**: Dynamic carousel based on repository topics.
-- **Project Cards (16:9 Layout)**: Responsive cards with technology badges and action buttons (Code and Deploy).
+<p align="center">
+  <a href="https://guilhermegodoydev.github.io/snapport"><strong>Explorar Documentação »</strong></a>
+  <br /><br />
+  <a href="https://github.com/guilhermegodoydev/snapport/issues">Reportar Bug</a>
+  ·
+  <a href="https://github.com/guilhermegodoydev/snapport/issues">Sugestão de Feature</a>
+</p>
 
 ---
 
-## 💡 Best Practices
+## 💡 Por que Snapport?
 
-- **Image Aspect Ratio**: To avoid cropping, save your `preview.png` files in **16:9** aspect ratio (e.g., 1280x720px).
-- **Live Demo (Deploy)**: The "Acessar" (Visit) button only appears if the **"Homepage"** field is filled in your GitHub repository settings.
+Cansado de atualizar manualmente o HTML do seu portfólio toda vez que termina um projeto? O **Snapport** transforma seus repositórios do GitHub na sua única fonte de verdade. Marque com uma tag, e seu site se atualiza sozinho.
 
----
+- **Zero Dependências:** TypeScript puro. Sem inchaço no seu bundle.
+- **Cache Inteligente:** Persistência local de 2 horas para respeitar os limites da API.
+- **Framework Agnostic:** Use com React, Vue, Angular ou apenas HTML puro.
 
-## 📦 Installation & Integration
+## 🚀 Início Rápido
 
-### Via NPM
 ```bash
 npm install snapport
 ```
 
-### Via CDN (Direct HTML)
-Use ``type="module"`` for modern ES module compatibility.
+```typescript
+import { initPortfolio } from 'snapport';
 
-```html
-<!-- 1. Library Styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net">
-
-<!-- 2. Logic and Initialization -->
-<script type="module">
-  import { initPortfolio } from 'https://cdn.jsdelivr.net';
-
-  initPortfolio('your-username', {
-    tag: 'port',                      // Optional: defaults to 'port'
-    searchContainer: 'id-search',     // Search container ID
-    filtersContainer: 'id-filters',   // Filters container ID
-    projectsContainer: 'id-projects'  // Projects grid container ID
-  });
-</script>
+initPortfolio('seu-usuario', {
+  searchContainer: 'search-id',
+  filtersContainer: 'filters-id',
+  projectsContainer: 'projects-id'
+});
 ```
 
----
+## 🎨 Personalização Visual
 
-## 🎨 Customization (CSS Variables)
-Adapt the UI to your theme by overriding these variables in your global CSS:
+O Snapport é totalmente customizável via **CSS Variables**. Adapte as cores ao seu tema sem esforço:
 
 ```css
 :root {
-  --ghp-accent: #333;           /* Accent color (buttons/icons) */
-  --ghp-bg: #ffffff;            /* Card background */
-  --ghp-text: #333;             /* Main headings and text */
-  --ghp-text-light: #666;       /* Descriptions and secondary text */
-  --ghp-border: rgba(226, 226, 228, 0.8); /* Borders */
-  --ghp-shadow: rgba(0, 0, 0, 0.1);       /* Card shadows */
+  --ghp-accent: #3178C6;
+  --ghp-bg: #ffffff;
+  --ghp-text: #333;
 }
 ```
 
----
+## 🛠️ Stacks Suportadas
 
-## ⚙️ Performance & Advanced Usage
-
-### Custom Template Injection
-Keep the search/cache logic but use your own design:
-
-```javascript
-initPortfolio('your-username', {
-  projectsContainer: 'id-projects',
-  customCardTemplate: (repo) => `
-    <div class="my-custom-card">
-      <h4>${repo.name}</h4>
-      <p>${repo.description}</p>
-      <a href="${repo.htmlUrl}">View Source</a>
-    </div>
-  `
-});
-```
+A lib reconhece automaticamente ícones e cores oficiais para diversas tecnologias:
+`React` • `TypeScript` • `Node.js` • `Docker` • `Tailwind` • `Sass` • `Python` • `e muito mais...`
 
-### Cache & Stability
-Data is stored via localStorage for better performance:
+---
 
-- Persistence: Data cached for up to 2 hours.
-- Isolation: Cache is separated by GitHub username.
+## 🤝 Contribuição
 
----
+Contribuições são o que fazem a comunidade open source um lugar incrível para aprender e criar. Confira nosso [Guia de Contribuição](https://guilhermegodoydev.github.io/snapport/projeto/contribuir.html) para começar.
 
-> **Note:**
-> This is an independent open-source project. Feel free to contribute! If you find a bug or have a feature idea, opening an Issue or a Pull Request is the best way to help.
-> 
-> To learn how to collaborate with the code, please check our [**Contributing Guide**](./CONTRIBUTING.md).
+## 📄 Licença
 
-**Author**: Guilherme Godoy (@guilhermegodoydev)
+Distribuído sob a licença MIT. Veja [`LICENSE`](https://github.com/guilhermegodoydev/snapport/blob/main/LICENSE) para mais informações.

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export declare function getPortProjects(username: string, tag?: string): Promise<SanitizedRepo[]>;
+export declare function getPortProjects(username: string, tag?: string, options?: {
+    forceRefresh?: boolean;
+}): Promise<SanitizedRepo[]>;
 
 export declare function initPortfolio(username: string, config?: PortfolioConfig): Promise<PortfolioResponse>;
 
@@ -28,6 +30,7 @@ export declare interface SanitizedRepo {
     description: string | null;
     htmlUrl: string;
     topics: string[];
+    stacks: string[];
     deployUrl: string | null;
 }
 

package/dist/snap-port.js

@@ -1,47 +1,4 @@
-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 = {
+const f = {
   react: { name: "React", icon: "react", color: "61DAFB" },
   vue: { name: "Vue.js", icon: "vuedotjs", color: "4FC08D" },
   angular: { name: "Angular", icon: "angular", color: "DD0031" },
@@ -70,7 +27,54 @@ const v = {
   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) => {
+}, u = typeof process < "u" && process.env.NODE_ENV !== "production" || typeof import.meta < "u" && import.meta.env.MODE !== "production", v = 7200 * 1e3, C = (t) => t ? t.filter((o) => !!f[o.toLocaleLowerCase().trim()]) : [], j = (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 : [],
+  stacks: Array.isArray(t.topics) ? C(t.topics) : [],
+  deployUrl: t.homepage ?? null
+});
+function w(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 $(t, e = "port", o = {}) {
+  if (!t)
+    return console.error("GitHubPortfolio: Username é obrigatório."), [];
+  const r = `gh_projects_${t}`, c = u || o.forceRefresh;
+  try {
+    if (w(t), c)
+      u && console.info(`[GitHubPortfolio]: Dev mode detectado. Cache ignorado para ${t}.`);
+    else {
+      const p = localStorage.getItem(r);
+      if (p) {
+        const { data: d, timestamp: y } = JSON.parse(p);
+        if (Date.now() - y < v)
+          return d;
+      }
+    }
+    const n = encodeURIComponent(`user:${t} topic:${e}`), s = await fetch(`https://api.github.com/search/repositories?q=${n}&sort=updated&order=desc`);
+    if (!s.ok)
+      throw new Error(`GitHub API error: ${s.status}`);
+    const a = ((await s.json()).items || []).map(j), l = {
+      data: a,
+      timestamp: Date.now()
+    };
+    return localStorage.setItem(r, JSON.stringify(l)), a;
+  } catch (n) {
+    console.error(`GitHubPortfolio: Erro ao buscar dados de ${t}:`, n);
+    const s = localStorage.getItem(r);
+    return s ? (console.warn("GitHubPortfolio: Usando cache expirado devido a erro de rede."), JSON.parse(s).data) : [];
+  }
+}
+const h = (t) => typeof t == "string" ? document.getElementById(t) : t, g = (t, e = null) => {
   if (!e)
     return `
       <button class="ghp-filter-btn active" data-topic="all">
@@ -88,8 +92,8 @@ const v = {
       <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>` : "";
+}, b = (t, e) => {
+  const o = `https://raw.githubusercontent.com/${e}/${t.name}/main/preview.png`, r = `https://opengraph.githubassets.com/${e}/${t.name}`, c = `https://placehold.co/640x360?text=${encodeURIComponent(t.name)}`, n = 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">
@@ -98,7 +102,7 @@ const v = {
           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}'; }"
+          onerror="if (this.src.includes('preview.png')) { this.src='${r}'; } else { this.onerror=null; this.src='${c}'; }"
         >
       </div>
       <div class="ghp-card-content">
@@ -108,37 +112,37 @@ const v = {
         </div>
         <div class="ghp-card-links">
           ${s}
-          ${c}
+          ${n}
         </div>
       </div>
     </div>
   `;
 };
-function C(t, e = 6) {
-  const o = d(t);
+function E(t, e = 6) {
+  const o = h(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);
+function S(t, e) {
+  const o = h(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;
+  const r = t.flatMap((s) => s.topics || []), n = [...new Set(r)].reduce((s, i) => {
+    const a = f[i];
+    return a ? s + g(i, a) : s;
   }, g("all"));
-  o.innerHTML = `<div class="ghp-filters-content">${c}</div>`;
+  o.innerHTML = `<div class="ghp-filters-content">${n}</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>';
+  const c = h(e);
+  if (c) {
+    if (c.className = "ghp-projects-grid", c.style.minHeight = "auto", t.length === 0) {
+      c.innerHTML = '<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';
       return;
     }
-    n.innerHTML = t.map((c) => r ? r(c) : j(c, o)).join("");
+    c.innerHTML = t.map((n) => r ? r(n) : b(n, o)).join("");
   }
 }
-function $(t) {
-  const e = d(t);
+function x(t) {
+  const e = h(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">
@@ -148,34 +152,34 @@ function $(t) {
     </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 k(t, e, o, r, c) {
+  const n = document.getElementById(t);
+  n && n.addEventListener("click", (s) => {
+    const a = s.target.closest(".ghp-filter-btn");
+    if (!a) return;
+    const l = a.dataset.topic, p = l === "all" ? e : e.filter((d) => d.topics.includes(l));
+    m(p, o, r, c), n.querySelectorAll(".ghp-filter-btn").forEach((d) => d.classList.remove("active")), a.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))
+function B(t, e, o, r) {
+  const c = document.getElementById("gh-port-search");
+  c && c.addEventListener("input", (n) => {
+    const i = n.target.value.toLowerCase(), a = t.filter(
+      (l) => l.name.toLowerCase().includes(i) || (l.description || "").toLowerCase().includes(i) || l.topics.some((p) => p.toLowerCase().includes(i))
     );
-    m(i, e, o, r);
+    m(a, e, o, r);
   });
 }
-async function S(t, e = {
+async function L(t, e = {
   searchContainer: "search-cont",
   filtersContainer: "filters-cont",
   projectsContainer: "projects-cont"
 }) {
   try {
     const o = e.tag || "port";
-    $(e.searchContainer), C(e.projectsContainer, 6);
-    const r = await y(t, o);
-    return w(r, e.filtersContainer), m(r, e.projectsContainer, t, e.customCardTemplate), b(e.filtersContainer, r, e.projectsContainer, t, e.customCardTemplate), E(r, e.projectsContainer, t, e.customCardTemplate), { projects: r, status: "success" };
+    x(e.searchContainer), E(e.projectsContainer, 6);
+    const r = await $(t, o);
+    return S(r, e.filtersContainer), m(r, e.projectsContainer, t, e.customCardTemplate), k(e.filtersContainer, r, e.projectsContainer, t, e.customCardTemplate), B(r, e.projectsContainer, t, e.customCardTemplate), { projects: r, status: "success" };
   } catch (o) {
     console.error("Erro ao inicializar portfólio:", o);
     const r = document.getElementById(e.projectsContainer);
@@ -183,9 +187,9 @@ async function S(t, e = {
   }
 }
 export {
-  y as getPortProjects,
-  S as initPortfolio,
-  w as renderFilters,
+  $ as getPortProjects,
+  L as initPortfolio,
+  S as renderFilters,
   m as renderProjects,
-  $ as renderSearchBar
+  x as renderSearchBar
 };

package/dist/snap-port.umd.cjs

@@ -1,4 +1,4 @@
-(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`
+(function(a,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(a=typeof globalThis<"u"?globalThis:a||self,p(a.SnapPort={}))})(this,(function(a){"use strict";var p=typeof document<"u"?document.currentScript:null;const f={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"}},y=typeof process<"u"&&process.env.NODE_ENV!=="production"||typeof{url:typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:p&&p.tagName.toUpperCase()==="SCRIPT"&&p.src||new URL("snap-port.umd.cjs",document.baseURI).href}<"u"&&(void 0).MODE!=="production",w=7200*1e3,S=e=>e?e.filter(o=>!!f[o.toLocaleLowerCase().trim()]):[],$=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:[],stacks:Array.isArray(e.topics)?S(e.topics):[],deployUrl:e.homepage??null});function E(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 v(e,t="port",o={}){if(!e)return console.error("GitHubPortfolio: Username é obrigatório."),[];const r=`gh_projects_${e}`,s=y||o.forceRefresh;try{if(E(e),s)y&&console.info(`[GitHubPortfolio]: Dev mode detectado. Cache ignorado para ${e}.`);else{const u=localStorage.getItem(r);if(u){const{data:h,timestamp:x}=JSON.parse(u);if(Date.now()-x<w)return h}}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 i=((await c.json()).items||[]).map($),d={data:i,timestamp:Date.now()};return localStorage.setItem(r,JSON.stringify(d)),i}catch(n){console.error(`GitHubPortfolio: Erro ao buscar dados de ${e}:`,n);const c=localStorage.getItem(r);return c?(console.warn("GitHubPortfolio: Usando cache expirado devido a erro de rede."),JSON.parse(c).data):[]}}const m=e=>typeof e=="string"?document.getElementById(e):e,C=(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"/>
@@ -11,7 +11,7 @@
       <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`
+  `},P=(e,t)=>{const o=`https://raw.githubusercontent.com/${t}/${e.name}/main/preview.png`,r=`https://opengraph.githubassets.com/${t}/${e.name}`,s=`https://placehold.co/640x360?text=${encodeURIComponent(e.name)}`,n=e.deployUrl?`<a href="${e.deployUrl}" target="_blank" rel="noopener noreferrer">Acessar</a>`:"",c=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 
@@ -19,7 +19,7 @@
           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}'; }"
+          onerror="if (this.src.includes('preview.png')) { this.src='${r}'; } else { this.onerror=null; this.src='${s}'; }"
         >
       </div>
       <div class="ghp-card-content">
@@ -28,16 +28,16 @@
           <p title="${e.description}">${e.description}</p>
         </div>
         <div class="ghp-card-links">
-          ${i}
           ${c}
+          ${n}
         </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=`
+  `};function T(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 j(e,t){const o=m(t);if(!o)return;const r=e.flatMap(c=>c.topics||[]),n=[...new Set(r)].reduce((c,l)=>{const i=f[l];return i?c+C(l,i):c},C("all"));o.innerHTML=`<div class="ghp-filters-content">${n}</div>`}function g(e,t,o="",r){const s=m(t);if(s){if(s.className="ghp-projects-grid",s.style.minHeight="auto",e.length===0){s.innerHTML='<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';return}s.innerHTML=e.map(n=>r?r(n):P(n,o)).join("")}}function b(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{const o=t.tag||"port";j(t.searchContainer),S(t.projectsContainer,6);const r=await f(e,o);return v(r,t.filtersContainer),u(r,t.projectsContainer,e,t.customCardTemplate),E(t.filtersContainer,r,t.projectsContainer,e,t.customCardTemplate),B(r,t.projectsContainer,e,t.customCardTemplate),{projects:r,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"})}));
+  `)}function k(e,t,o,r,s){const n=document.getElementById(e);n&&n.addEventListener("click",c=>{const i=c.target.closest(".ghp-filter-btn");if(!i)return;const d=i.dataset.topic,u=d==="all"?t:t.filter(h=>h.topics.includes(d));g(u,o,r,s),n.querySelectorAll(".ghp-filter-btn").forEach(h=>h.classList.remove("active")),i.classList.add("active")})}function B(e,t,o,r){const s=document.getElementById("gh-port-search");s&&s.addEventListener("input",n=>{const l=n.target.value.toLowerCase(),i=e.filter(d=>d.name.toLowerCase().includes(l)||(d.description||"").toLowerCase().includes(l)||d.topics.some(u=>u.toLowerCase().includes(l)));g(i,t,o,r)})}async function L(e,t={searchContainer:"search-cont",filtersContainer:"filters-cont",projectsContainer:"projects-cont"}){try{const o=t.tag||"port";b(t.searchContainer),T(t.projectsContainer,6);const r=await v(e,o);return j(r,t.filtersContainer),g(r,t.projectsContainer,e,t.customCardTemplate),k(t.filtersContainer,r,t.projectsContainer,e,t.customCardTemplate),B(r,t.projectsContainer,e,t.customCardTemplate),{projects:r,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}}}a.getPortProjects=v,a.initPortfolio=L,a.renderFilters=j,a.renderProjects=g,a.renderSearchBar=b,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "snapport",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.1.1",
+  "keywords": [
+    "portfolio",
+    "github-api",
+    "typescript",
+    "zero-dependencies",
+    "automation",
+    "frontend",
+    "showcase",
+    "headless-ui"
+  ],
   "type": "module",
   "files": [
     "dist"
@@ -18,15 +28,21 @@
     "./style.css": "./dist/snap-port.css"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite playground",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "docs:deploy": "npm run docs:build && gh-pages -d docs/.vitepress/dist"
   },
   "devDependencies": {
-    "@types/node": "^25.2.2",
+    "@types/node": "^25.6.0",
+    "gh-pages": "^6.3.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitepress": "^1.6.4"
   },
   "license": "MIT",
   "author": "Guilherme Godoy"

package/README.pt-br.md

@@ -1,137 +0,0 @@
-<p align="center">
-  <a href="./README.md">Read this in English</a>
-</p>
-
-<p align="center">
-  <img src="https://img.shields.io/npm/dm/snapport?style=for-the-badge&logo=npm" alt="NPM Downloads">
-  <img src="https://img.shields.io/npm/v/snapport?style=for-the-badge" alt="NPM Version">
-  <img src="https://img.shields.io/github/license/guilhermegodoydev/snapport?style=for-the-badge" alt="License">
-  <img src="https://img.shields.io/bundlephobia/min/snapport?style=for-the-badge" alt="Bundle Size">
-</p>
-
-# Snap-Port 🚀
-
-O **Snap-Port** é uma biblioteca desenvolvida em **TypeScript**, sem dependências externas, projetada para automatizar a exibição de projetos do GitHub em sites pessoais ou portfólios.
-
-A proposta central é utilizar o GitHub como **fonte única de verdade:** ao marcar seus repositórios com a tag escolhida, a biblioteca se encarrega de buscar, tratar, aplicar cache e renderizar os dados, eliminando a manutenção manual no código do seu site.
-
----
-
-## 🛠 Funcionalidades Técnicas
-
-### 1. Seleção de Projetos e Controle de Stacks
-O Snap-Port oferece controle total sobre o que é exibido e como as tecnologias são categorizadas:
-
-- **Tag de Descoberta**: Por padrão, a biblioteca busca repositórios com a tag ``port``, mas você pode definir qualquer outra tag no momento da inicialização.
-- **Filtros por Stacks (Topics):** Para que os filtros automáticos e a barra de busca funcionem corretamente, você deve listar as tecnologias (ex: ``react``, ``nodejs``, ``css``) nos topics do seu repositório no GitHub.
-- **Por que não usar a "Language" automática?** A lib ignora o campo ``language`` do GitHub para permitir que você decida quais ferramentas quer destacar. Isso evita que um projeto de React seja classificado apenas como "HTML" ou "JavaScript" devido ao volume de arquivos gerados por ferramentas de build, garantindo que o filtro reflita a stack real do projeto.
-
-### 2. Gestão Inteligente de Imagens
-Como a API do GitHub não retorna links diretos de imagens de preview, o Snap-Port utiliza uma lógica de **geração automática** integrada aos componentes de UI.
-
-Para que cada projeto tenha sua própria imagem, siga estas regras:
-
-- **Arquivo de Preview:** Você deve criar um arquivo chamado ``preview.png`` na raiz do seu repositório.
-- **Importante:** O nome deve ser exatamente preview.png (letras minúsculas), pois o GitHub diferencia maiúsculas de minúsculas (*case-sensitive*).
-
-Caso o arquivo não exista ou ocorra algum erro de carregamento (como *Rate Limits*), a lib executa uma **estratégia de fallback em cascata:**
-
-- **GitHub Open Graph:** Tenta carregar o card dinâmico gerado pelo próprio GitHub.
-- **Placeholder de Segurança:** Se o GitHub bloquear a requisição, gera um card neutro contendo o nome do projeto via placehold.co.
-
-### 3. Componentes de UI Integrados
-
-- **Search Bar:** Filtro textual em tempo real (nome, descrição e tópicos).
-- **Filter** Carousel: Carrossel dinâmico baseado nos tópicos definidos nos repositórios.
-- **Project Cards (Layout 16:9):** Cards responsivos com badges de tecnologia e botões de ação (Código e Deploy).
-
----
-
-## 💡 Dicas para um melhor Resultado
-
-- **Proporção de Imagem:** Para que as imagens não fiquem com partes cortadas nos cards, salve seus arquivos ``preview.png`` na proporção **16:9** (ex: 1280x720px).
-- **Link de Acesso (Deploy):** O botão "Acessar" só aparecerá se o campo **"Homepage"** estiver preenchido nas configurações do seu repositório no GitHub.
-
----
-
-## 📦 Instalação e Integração
-
-### Via NPM
-
-```bash
-npm install snapport
-```
-
-### Via CDN (Direto no HTML)
-Se você preferir não usar gerenciadores de pacotes, pode importar os arquivos diretamente de um CDN. Recomendamos o uso de type="module" para melhor compatibilidade com o padrão moderno da biblioteca.
-
-```html
-<!-- 1. Estilos da Biblioteca -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/snapport/dist/snap-port.css">
-
-<!-- 2. Lógica e Inicialização -->
-<script type="module">
-  // Importação do módulo oficial ES
-  import { initPortfolio } from 'https://cdn.jsdelivr.net/npm/snapport/dist/snap-port.js';
-
-  initPortfolio('seu-usuario', {
-    tag: 'port',                      // Opcional: padrão é 'port'
-    searchContainer: 'id-search',     // ID do container da busca
-    filtersContainer: 'id-filters',   // ID do container dos filtros
-    projectsContainer: 'id-projects'  // ID do container do grid
-  });
-</script>
-```
-
----
-
-## 🎨 Personalização Visual (CSS Variables)
-Se você utiliza o layout padrão da biblioteca, pode adaptar as cores e o estilo ao seu tema sem modificar o código interno. O Snap-Port utiliza **Variáveis CSS** que podem ser facilmente sobrescritas no seu arquivo global:
-
-```css
-:root {
-  --ghp-accent: #333;           /* Cor de destaque (botões e ícones) */
-  --ghp-bg: #ffffff;            /* Fundo dos cards */
-  --ghp-text: #333;             /* Título e textos principais */
-  --ghp-text-light: #666;       /* Descrições e textos secundários */
-  --ghp-border: rgba(226, 226, 228, 0.8); /* Bordas */
-  --ghp-shadow: rgba(0, 0, 0, 0.1);       /* Sombras dos cards */
-}
-```
-
----
-
-## ⚙️ Customização e Performance
-
-### Injeção de Template Customizado
-Mantenha a inteligência de busca e cache, mas use seu próprio design:
-
-```javascript
-initPortfolio('seu-usuario', {
-  searchContainer: 'id-search',
-  filtersContainer: 'id-filters',
-  projectsContainer: 'id-projects',
-  customCardTemplate: (repo) => `
-    <div class="meu-card-personalizado">
-      <h4>${repo.name}</h4>
-      <p>${repo.description}</p>
-      <a href="${repo.htmlUrl}">Ver código</a>
-    </div>
-  `
-});
-```
-
-### Cache e Estabilidade
-A biblioteca utiliza localStorage para garantir performance:
-
-- **Persistência:** Dados armazenados por até 2 horas.
-- **Isolamento:** Cache separado por usuário do GitHub.
-
----
-
-> **Nota sobre Manutenção:**  
-> Este é um projeto de código aberto mantido de forma independente. Sinta-se à vontade para contribuir! Se encontrar um bug ou tiver uma ideia de funcionalidade, abrir uma **Issue** ou um **Pull Request** é a melhor forma de ajudar o projeto a crescer.
->
-> Para entender como colaborar com o código, consulte o nosso [**Guia de Contribuição**](./CONTRIBUTING.md).
-
-**Autor**: Guilherme Godoy (@guilhermegodoydev)