snapport 1.0.0 → 1.0.1

package/LICENSE

@@ -1,21 +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
+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

@@ -1,130 +1,130 @@
-<p align="center">
-  <a href="./README.pt-br.md">Leia isto em Português</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 🚀
-
-**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`.
-
-### 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).
-
----
-
-## 💡 Best Practices
-
-- **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.
-
----
-
-## 📦 Installation & Integration
-
-### Via NPM
-```bash
-npm install snapport
-```
-
-### Via CDN (Direct HTML)
-Use ``type="module"`` for modern ES module compatibility.
-
-```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>
-```
-
----
-
-## 🎨 Customization (CSS Variables)
-Adapt the UI to your theme by overriding these variables in your global CSS:
-
-```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 */
-}
-```
-
----
-
-## ⚙️ 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>
-  `
-});
-```
-
-### 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.
-
----
-
-> **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).
-
-**Author**: Guilherme Godoy (@guilhermegodoydev)
+<p align="center">
+  <a href="./README.pt-br.md">Leia isto em Português</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 🚀
+
+**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`.
+
+### 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).
+
+---
+
+## 💡 Best Practices
+
+- **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.
+
+---
+
+## 📦 Installation & Integration
+
+### Via NPM
+```bash
+npm install snapport
+```
+
+### Via CDN (Direct HTML)
+Use ``type="module"`` for modern ES module compatibility.
+
+```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>
+```
+
+---
+
+## 🎨 Customization (CSS Variables)
+Adapt the UI to your theme by overriding these variables in your global CSS:
+
+```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 */
+}
+```
+
+---
+
+## ⚙️ 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>
+  `
+});
+```
+
+### 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.
+
+---
+
+> **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).
+
+**Author**: Guilherme Godoy (@guilhermegodoydev)

package/README.pt-br.md

@@ -1,137 +1,137 @@
-<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)
+<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)

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+export declare function getPortProjects(username: string, tag?: string): Promise<SanitizedRepo[]>;
+
+export declare function initPortfolio(username: string, config?: PortfolioConfig): Promise<PortfolioResponse>;
+
+export declare interface PortfolioConfig {
+    tag?: string;
+    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,191 @@
+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 {
+    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" };
+  } 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{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"})}));

package/package.json

@@ -1,33 +1,33 @@
-{
-  "name": "snapport",
-  "private": false,
-  "version": "1.0.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/snap-port.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"
-}
+{
+  "name": "snapport",
+  "private": false,
+  "version": "1.0.1",
+  "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/snap-port.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"
+}