snapport 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -27
- package/dist/index.d.ts +44 -0
- package/dist/snap-port.css +1 -0
- package/dist/snap-port.js +242 -0
- package/dist/snap-port.umd.cjs +43 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://github.com/guilhermegodoydev/snapport/blob/main/preview.png" width="
|
|
2
|
+
<img src="https://github.com/guilhermegodoydev/snapport/blob/main/preview.png" width="120" height="120" style="border-radius: 50%" alt="Logo" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">Snapport</h1>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
<strong>
|
|
8
|
+
<strong>Gere automaticamente a seção de projetos do seu portfólio a partir dos seus repositórios do GitHub.</strong>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
@@ -15,42 +15,96 @@
|
|
|
15
15
|
</p>
|
|
16
16
|
|
|
17
17
|
<p align="center">
|
|
18
|
-
<a href="https://guilhermegodoydev.github.io/snapport"><strong>
|
|
19
|
-
<br /><br />
|
|
20
|
-
<a href="https://github.com/guilhermegodoydev/snapport/issues">Reportar Bug</a>
|
|
21
|
-
·
|
|
22
|
-
<a href="https://github.com/guilhermegodoydev/snapport/issues">Sugestão de Feature</a>
|
|
18
|
+
<a href="https://guilhermegodoydev.github.io/snapport"><strong>Ver Documentação »</strong></a>
|
|
23
19
|
</p>
|
|
24
20
|
|
|
25
21
|
---
|
|
26
22
|
|
|
27
|
-
## 💡
|
|
23
|
+
## 💡 O problema
|
|
28
24
|
|
|
29
|
-
|
|
25
|
+
Manter a seção de projetos do portfólio atualizada manualmente é repetitivo:
|
|
30
26
|
|
|
31
|
-
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
27
|
+
- você cria um novo projeto
|
|
28
|
+
- atualiza o GitHub
|
|
29
|
+
- esquece de atualizar o portfólio
|
|
30
|
+
- seu portfólio fica desatualizado
|
|
34
31
|
|
|
35
|
-
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## ✨ O que o Snapport faz
|
|
35
|
+
|
|
36
|
+
O Snapport automatiza a geração da seção de projetos do seu portfólio com base nos seus repositórios do GitHub.
|
|
37
|
+
|
|
38
|
+
Você define onde os projetos serão renderizados e a lib cuida da sincronização.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 🔥 Antes vs Depois
|
|
43
|
+
|
|
44
|
+
### ❌ Antes (manual)
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<div>
|
|
48
|
+
<h2>Projetos</h2>
|
|
49
|
+
<ul>
|
|
50
|
+
<li>Projeto A</li>
|
|
51
|
+
<li>Projeto B</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### ✅ Depois (automático)
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
import { initPortfolio } from 'snapport';
|
|
60
|
+
|
|
61
|
+
initPortfolio('seu-usuario-github', {
|
|
62
|
+
tag: 'port',
|
|
63
|
+
searchContainer: 'meu-search',
|
|
64
|
+
filtersContainer: 'meu-filters',
|
|
65
|
+
projectsContainer: 'meu-projects'
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 🚀 Início rápido
|
|
72
|
+
|
|
73
|
+
### Via npm
|
|
36
74
|
|
|
37
75
|
```bash
|
|
38
76
|
npm install snapport
|
|
39
77
|
```
|
|
40
78
|
|
|
41
|
-
```
|
|
79
|
+
```js
|
|
42
80
|
import { initPortfolio } from 'snapport';
|
|
43
81
|
|
|
44
|
-
initPortfolio('seu-usuario', {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
82
|
+
initPortfolio('seu-usuario-github', {
|
|
83
|
+
tag: 'port',
|
|
84
|
+
searchContainer: 'meu-search',
|
|
85
|
+
filtersContainer: 'meu-filters',
|
|
86
|
+
projectsContainer: 'meu-projects'
|
|
48
87
|
});
|
|
49
88
|
```
|
|
50
89
|
|
|
51
|
-
|
|
90
|
+
### Via CDN (vanilla JS)
|
|
52
91
|
|
|
53
|
-
|
|
92
|
+
```html
|
|
93
|
+
<script type="module">
|
|
94
|
+
import { initPortfolio } from 'https://cdn.jsdelivr.net/npm/snapport/dist/snap-port.js';
|
|
95
|
+
|
|
96
|
+
initPortfolio('seu-usuario-github', {
|
|
97
|
+
tag: 'port',
|
|
98
|
+
searchContainer: 'meu-search',
|
|
99
|
+
filtersContainer: 'meu-filters',
|
|
100
|
+
projectsContainer: 'meu-projects'
|
|
101
|
+
});
|
|
102
|
+
</script>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## 🎨 Personalização
|
|
54
108
|
|
|
55
109
|
```css
|
|
56
110
|
:root {
|
|
@@ -60,17 +114,24 @@ O Snapport é totalmente customizável via **CSS Variables**. Adapte as cores ao
|
|
|
60
114
|
}
|
|
61
115
|
```
|
|
62
116
|
|
|
63
|
-
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## ⚙️ Características
|
|
64
120
|
|
|
65
|
-
|
|
66
|
-
|
|
121
|
+
- Zero dependências em runtime
|
|
122
|
+
- Cache local (2h)
|
|
123
|
+
- Funciona com qualquer framework
|
|
124
|
+
- Baseado em GitHub Topics
|
|
125
|
+
- Leve e direto ao ponto
|
|
67
126
|
|
|
68
127
|
---
|
|
69
128
|
|
|
70
|
-
##
|
|
129
|
+
## 🛠 Tecnologias suportadas
|
|
71
130
|
|
|
72
|
-
|
|
131
|
+
React • TypeScript • Node.js • Docker • Tailwind • Python • etc
|
|
73
132
|
|
|
74
|
-
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## 🤝 Contribuição
|
|
75
136
|
|
|
76
|
-
|
|
137
|
+
Veja a documentação: [CONTRIBUIR](https://guilhermegodoydev.github.io/snapport/projeto/contribuir.html)
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export declare function getPortProjects(username: string, tag?: string, options?: {
|
|
2
|
+
forceRefresh?: boolean;
|
|
3
|
+
cache?: boolean;
|
|
4
|
+
}): Promise<SanitizedRepo[]>;
|
|
5
|
+
|
|
6
|
+
export declare function initPortfolio(username: string, config?: PortfolioConfig): Promise<PortfolioResponse>;
|
|
7
|
+
|
|
8
|
+
export declare interface PortfolioConfig {
|
|
9
|
+
tag?: string;
|
|
10
|
+
searchContainer: string;
|
|
11
|
+
filtersContainer: string;
|
|
12
|
+
projectsContainer: string;
|
|
13
|
+
customCardTemplate?: (repo: SanitizedRepo) => string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export declare interface PortfolioResponse {
|
|
17
|
+
projects?: any[];
|
|
18
|
+
status: 'success' | 'error';
|
|
19
|
+
message?: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export declare function renderFilters(projects: SanitizedRepo[], containerElement: HTMLElement | string): void;
|
|
23
|
+
|
|
24
|
+
export declare function renderProjects(projects: SanitizedRepo[], containerElement: HTMLElement | string, username?: string, customTemplate?: (repo: SanitizedRepo) => string): void;
|
|
25
|
+
|
|
26
|
+
export declare function renderSearchBar(containerElement: HTMLElement | string): void;
|
|
27
|
+
|
|
28
|
+
export declare interface SanitizedRepo {
|
|
29
|
+
id: number;
|
|
30
|
+
name: string;
|
|
31
|
+
description: string | null;
|
|
32
|
+
htmlUrl: string;
|
|
33
|
+
topics: string[];
|
|
34
|
+
stacks: string[];
|
|
35
|
+
deployUrl: string | null;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export declare interface TechInfo {
|
|
39
|
+
icon: string;
|
|
40
|
+
name: string;
|
|
41
|
+
color: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { }
|
|
@@ -0,0 +1 @@
|
|
|
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}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
const C = {
|
|
2
|
+
react: { name: "React", icon: "react", color: "61DAFB" },
|
|
3
|
+
vue: { name: "Vue.js", icon: "vuedotjs", color: "4FC08D" },
|
|
4
|
+
angular: { name: "Angular", icon: "angular", color: "DD0031" },
|
|
5
|
+
nextjs: { name: "Next.js", icon: "nextdotjs", color: "000000" },
|
|
6
|
+
typescript: { name: "TypeScript", icon: "typescript", color: "3178C6" },
|
|
7
|
+
javascript: { name: "JavaScript", icon: "javascript", color: "F7DF1E" },
|
|
8
|
+
html5: { name: "HTML5", icon: "html5", color: "E34F26" },
|
|
9
|
+
css3: { name: "CSS3", icon: "css3", color: "1572B6" },
|
|
10
|
+
sass: { name: "Sass", icon: "sass", color: "CC6699" },
|
|
11
|
+
"tailwind-css": { name: "Tailwind", icon: "tailwindcss", color: "06B6D4" },
|
|
12
|
+
bootstrap: { name: "Bootstrap", icon: "bootstrap", color: "7952B3" },
|
|
13
|
+
"styled-components": { name: "Styled Components", icon: "styledcomponents", color: "DB7093" },
|
|
14
|
+
figma: { name: "Figma", icon: "figma", color: "F24E1E" },
|
|
15
|
+
nodejs: { name: "Node.js", icon: "nodedotjs", color: "339933" },
|
|
16
|
+
express: { name: "Express", icon: "express", color: "000000" },
|
|
17
|
+
nestjs: { name: "NestJS", icon: "nestjs", color: "E0234E" },
|
|
18
|
+
python: { name: "Python", icon: "python", color: "3776AB" },
|
|
19
|
+
java: { name: "Java", icon: "openjdk", color: "007396" },
|
|
20
|
+
php: { name: "PHP", icon: "php", color: "777BB4" },
|
|
21
|
+
postgresql: { name: "PostgreSQL", icon: "postgresql", color: "4169E1" },
|
|
22
|
+
mongodb: { name: "MongoDB", icon: "mongodb", color: "47A248" },
|
|
23
|
+
mysql: { name: "MySQL", icon: "mysql", color: "4479A1" },
|
|
24
|
+
firebase: { name: "Firebase", icon: "firebase", color: "FFCA28" },
|
|
25
|
+
prisma: { name: "Prisma", icon: "prisma", color: "2D3748" },
|
|
26
|
+
docker: { name: "Docker", icon: "docker", color: "2496ED" },
|
|
27
|
+
git: { name: "Git", icon: "git", color: "F05032" },
|
|
28
|
+
jest: { name: "Jest", icon: "jest", color: "C21325" },
|
|
29
|
+
"github-actions": { name: "GitHub Actions", icon: "githubactions", color: "2088FF" }
|
|
30
|
+
}, j = 7200 * 1e3, w = (t = []) => t.filter(
|
|
31
|
+
(e) => !!C[e?.toLowerCase().trim()]
|
|
32
|
+
), S = (t) => {
|
|
33
|
+
const e = Array.isArray(t.topics) ? t.topics : [];
|
|
34
|
+
return {
|
|
35
|
+
id: t.id,
|
|
36
|
+
name: t.name ?? "Projeto sem nome",
|
|
37
|
+
description: t.description ?? "Sem descrição disponível",
|
|
38
|
+
htmlUrl: t.html_url,
|
|
39
|
+
topics: e,
|
|
40
|
+
stacks: w(e),
|
|
41
|
+
deployUrl: t.homepage ?? null
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
function $(t) {
|
|
45
|
+
try {
|
|
46
|
+
Object.keys(localStorage).forEach((e) => {
|
|
47
|
+
e.startsWith("gh_projects_") && e !== `gh_projects_${t}` && localStorage.removeItem(e);
|
|
48
|
+
});
|
|
49
|
+
} catch (e) {
|
|
50
|
+
console.warn("Erro ao limpar caches antigos:", e);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
async function b(t, e = "port", r = {}) {
|
|
54
|
+
if (!t)
|
|
55
|
+
return console.error("[Snapport]: Username é obrigatório."), [];
|
|
56
|
+
const o = `gh_projects_${t}`, c = r.cache !== !1, n = r.forceRefresh === !0, a = c && !n;
|
|
57
|
+
try {
|
|
58
|
+
if ($(t), a) {
|
|
59
|
+
const y = localStorage.getItem(o);
|
|
60
|
+
if (y)
|
|
61
|
+
try {
|
|
62
|
+
const d = JSON.parse(y);
|
|
63
|
+
if (d && typeof d == "object" && Array.isArray(d.data) && typeof d.timestamp == "number" && Date.now() - d.timestamp < j)
|
|
64
|
+
return d.data;
|
|
65
|
+
} catch {
|
|
66
|
+
localStorage.removeItem(o);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
const i = encodeURIComponent(`user:${t} topic:${e}`), s = await fetch(`https://api.github.com/search/repositories?q=${i}&sort=updated&order=desc`);
|
|
70
|
+
if (!s.ok)
|
|
71
|
+
throw new Error(`GitHub API error: ${s.status}`);
|
|
72
|
+
const l = ((await s.json()).items || []).map(S), p = {
|
|
73
|
+
data: l,
|
|
74
|
+
timestamp: Date.now()
|
|
75
|
+
};
|
|
76
|
+
return c && localStorage.setItem(o, JSON.stringify(p)), l;
|
|
77
|
+
} catch (i) {
|
|
78
|
+
console.error(`[Snapport]: Erro ao buscar dados de ${t}:`, i);
|
|
79
|
+
const s = localStorage.getItem(o);
|
|
80
|
+
if (s)
|
|
81
|
+
try {
|
|
82
|
+
return JSON.parse(s).data;
|
|
83
|
+
} catch {
|
|
84
|
+
localStorage.removeItem(o);
|
|
85
|
+
}
|
|
86
|
+
return [];
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
function u(t, e = 5e3) {
|
|
90
|
+
return new Promise((r, o) => {
|
|
91
|
+
const c = Date.now(), n = () => {
|
|
92
|
+
const a = document.getElementById(t);
|
|
93
|
+
if (a) return r(a);
|
|
94
|
+
if (Date.now() - c > e)
|
|
95
|
+
return o(`Snapport: container "${t}" não encontrado`);
|
|
96
|
+
requestAnimationFrame(n);
|
|
97
|
+
};
|
|
98
|
+
n();
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
function g(t) {
|
|
102
|
+
return Array.isArray(t.topics) ? t.topics : [];
|
|
103
|
+
}
|
|
104
|
+
const m = (t) => {
|
|
105
|
+
if (typeof t == "string") {
|
|
106
|
+
const e = document.getElementById(t);
|
|
107
|
+
return e || console.warn(
|
|
108
|
+
`[Snapport] Container "${t}" não encontrado. Verifique se o elemento existe no DOM antes de inicializar.`
|
|
109
|
+
), e;
|
|
110
|
+
}
|
|
111
|
+
return t;
|
|
112
|
+
}, v = (t, e = null) => {
|
|
113
|
+
if (!e)
|
|
114
|
+
return `
|
|
115
|
+
<button class="ghp-filter-btn active" data-topic="all">
|
|
116
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
117
|
+
<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/>
|
|
118
|
+
<rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>
|
|
119
|
+
</svg>
|
|
120
|
+
<p>Todos</p>
|
|
121
|
+
</button>
|
|
122
|
+
`;
|
|
123
|
+
const r = `https://cdn.simpleicons.org/${e.icon}/${e.color}`;
|
|
124
|
+
return `
|
|
125
|
+
<button class="ghp-filter-btn" data-topic="${t}" style="--tech-color: #${e.color}">
|
|
126
|
+
<img src="${r}" alt="${e.name}" loading="lazy">
|
|
127
|
+
<p>${e.name}</p>
|
|
128
|
+
</button>
|
|
129
|
+
`;
|
|
130
|
+
}, E = (t, e) => {
|
|
131
|
+
const r = `https://raw.githubusercontent.com/${e}/${t.name}/main/preview.png`, o = `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>` : "", a = t.htmlUrl ? `<a href="${t.htmlUrl}" target="_blank" rel="noopener noreferrer">Github</a>` : "";
|
|
132
|
+
return `
|
|
133
|
+
<div class="ghp-project-card">
|
|
134
|
+
<div class="ghp-img-container">
|
|
135
|
+
<img
|
|
136
|
+
src="${r}"
|
|
137
|
+
alt="Preview do projeto ${t.name}"
|
|
138
|
+
class="ghp-card-img"
|
|
139
|
+
loading="lazy"
|
|
140
|
+
onerror="if (this.src.includes('preview.png')) { this.src='${o}'; } else { this.onerror=null; this.src='${c}'; }"
|
|
141
|
+
>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="ghp-card-content">
|
|
144
|
+
<div>
|
|
145
|
+
<h3>${t.name}</h3>
|
|
146
|
+
<p title="${t.description}">${t.description}</p>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="ghp-card-links">
|
|
149
|
+
${a}
|
|
150
|
+
${n}
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
`;
|
|
155
|
+
};
|
|
156
|
+
function x(t, e = 6) {
|
|
157
|
+
const r = m(t);
|
|
158
|
+
r && (r.classList.toggle("ghp-projects-grid", !0), r.innerHTML = Array(e).fill('<div class="ghp-project-card ghp-skeleton ghp-skeleton-card"></div>').join(""));
|
|
159
|
+
}
|
|
160
|
+
function B(t, e) {
|
|
161
|
+
const r = m(e);
|
|
162
|
+
if (!r) return;
|
|
163
|
+
const o = t.flatMap((a) => g(a)), n = [...new Set(o)].reduce((a, i) => {
|
|
164
|
+
const s = C[i];
|
|
165
|
+
return s ? a + v(i, s) : a;
|
|
166
|
+
}, v("all"));
|
|
167
|
+
r.innerHTML = `<div class="ghp-filters-content">${n}</div>`;
|
|
168
|
+
}
|
|
169
|
+
function f(t, e, r = "", o) {
|
|
170
|
+
const c = m(e);
|
|
171
|
+
if (c) {
|
|
172
|
+
if (c.className = "ghp-projects-grid", c.style.minHeight = "auto", t.length === 0) {
|
|
173
|
+
c.innerHTML = '<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
c.innerHTML = t.map((n) => o ? o(n) : E(n, r)).join("");
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function F(t) {
|
|
180
|
+
const e = m(t);
|
|
181
|
+
e && (e.innerHTML = `
|
|
182
|
+
<div class="ghp-search-container">
|
|
183
|
+
<svg class="ghp-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
184
|
+
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
|
|
185
|
+
</svg>
|
|
186
|
+
<input type="text" id="gh-port-search" class="ghp-search-input" placeholder="Buscar projeto..." autocomplete="off">
|
|
187
|
+
</div>
|
|
188
|
+
`);
|
|
189
|
+
}
|
|
190
|
+
function k(t, e, r, o, c) {
|
|
191
|
+
const n = document.getElementById(t);
|
|
192
|
+
if (!n) {
|
|
193
|
+
console.warn(
|
|
194
|
+
`[Snapport] setupFilters falhou: container "${t}" não encontrado. Possíveis causas: renderFilters não foi chamado ou DOM ainda não está pronto.`
|
|
195
|
+
);
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
n.addEventListener("click", (a) => {
|
|
199
|
+
const s = a.target.closest(".ghp-filter-btn");
|
|
200
|
+
if (!s) return;
|
|
201
|
+
const h = s.dataset.topic, l = h === "all" ? e : e.filter((p) => g(p).includes(h));
|
|
202
|
+
f(l, r, o, c), n.querySelectorAll(".ghp-filter-btn").forEach((p) => p.classList.remove("active")), s.classList.add("active");
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
function A(t, e, r, o) {
|
|
206
|
+
(() => {
|
|
207
|
+
const n = document.getElementById("gh-port-search");
|
|
208
|
+
return n ? (n.addEventListener("input", (a) => {
|
|
209
|
+
const s = a.target.value.toLowerCase(), h = t.filter(
|
|
210
|
+
(l) => l.name.toLowerCase().includes(s) || (l.description || "").toLowerCase().includes(s) || g(l).some((p) => p.toLowerCase().includes(s))
|
|
211
|
+
);
|
|
212
|
+
f(h, e, r, o);
|
|
213
|
+
}), !0) : !1;
|
|
214
|
+
})() || console.warn("[Snapport] Search input ainda não existe no DOM");
|
|
215
|
+
}
|
|
216
|
+
async function L(t, e = {
|
|
217
|
+
searchContainer: "search-cont",
|
|
218
|
+
filtersContainer: "filters-cont",
|
|
219
|
+
projectsContainer: "projects-cont"
|
|
220
|
+
}) {
|
|
221
|
+
try {
|
|
222
|
+
const r = e.tag || "port";
|
|
223
|
+
await Promise.all([
|
|
224
|
+
u(e.searchContainer),
|
|
225
|
+
u(e.filtersContainer),
|
|
226
|
+
u(e.projectsContainer)
|
|
227
|
+
]), F(e.searchContainer), x(e.projectsContainer, 6);
|
|
228
|
+
const o = await b(t, r);
|
|
229
|
+
return B(o, e.filtersContainer), f(o, e.projectsContainer, t, e.customCardTemplate), k(e.filtersContainer, o, e.projectsContainer, t, e.customCardTemplate), A(o, e.projectsContainer, t, e.customCardTemplate), { projects: o, status: "success" };
|
|
230
|
+
} catch (r) {
|
|
231
|
+
console.error("Erro ao inicializar portfólio:", r);
|
|
232
|
+
const o = document.getElementById(e.projectsContainer);
|
|
233
|
+
return o && (o.innerHTML = '<p class="ghp-empty-msg">Erro ao carregar projetos.</p>'), { status: "error", message: r.message };
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
export {
|
|
237
|
+
b as getPortProjects,
|
|
238
|
+
L as initPortfolio,
|
|
239
|
+
B as renderFilters,
|
|
240
|
+
f as renderProjects,
|
|
241
|
+
F as renderSearchBar
|
|
242
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
(function(i,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(i=typeof globalThis<"u"?globalThis:i||self,h(i.SnapPort={}))})(this,(function(i){"use strict";const h={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"}},b=7200*1e3,E=(e=[])=>e.filter(t=>!!h[t?.toLowerCase().trim()]),B=e=>{const t=Array.isArray(e.topics)?e.topics:[];return{id:e.id,name:e.name??"Projeto sem nome",description:e.description??"Sem descrição disponível",htmlUrl:e.html_url,topics:t,stacks:E(t),deployUrl:e.homepage??null}};function F(e){try{Object.keys(localStorage).forEach(t=>{t.startsWith("gh_projects_")&&t!==`gh_projects_${e}`&&localStorage.removeItem(t)})}catch(t){console.warn("Erro ao limpar caches antigos:",t)}}async function j(e,t="port",r={}){if(!e)return console.error("[Snapport]: Username é obrigatório."),[];const o=`gh_projects_${e}`,c=r.cache!==!1,n=r.forceRefresh===!0,a=c&&!n;try{if(F(e),a){const $=localStorage.getItem(o);if($)try{const m=JSON.parse($);if(m&&typeof m=="object"&&Array.isArray(m.data)&&typeof m.timestamp=="number"&&Date.now()-m.timestamp<b)return m.data}catch{localStorage.removeItem(o)}}const l=encodeURIComponent(`user:${e} topic:${t}`),s=await fetch(`https://api.github.com/search/repositories?q=${l}&sort=updated&order=desc`);if(!s.ok)throw new Error(`GitHub API error: ${s.status}`);const p=((await s.json()).items||[]).map(B),d={data:p,timestamp:Date.now()};return c&&localStorage.setItem(o,JSON.stringify(d)),p}catch(l){console.error(`[Snapport]: Erro ao buscar dados de ${e}:`,l);const s=localStorage.getItem(o);if(s)try{return JSON.parse(s).data}catch{localStorage.removeItem(o)}return[]}}function y(e,t=5e3){return new Promise((r,o)=>{const c=Date.now(),n=()=>{const a=document.getElementById(e);if(a)return r(a);if(Date.now()-c>t)return o(`Snapport: container "${e}" não encontrado`);requestAnimationFrame(n)};n()})}function v(e){return Array.isArray(e.topics)?e.topics:[]}const g=e=>{if(typeof e=="string"){const t=document.getElementById(e);return t||console.warn(`[Snapport] Container "${e}" não encontrado. Verifique se o elemento existe no DOM antes de inicializar.`),t}return e},C=(e,t=null)=>{if(!t)return`
|
|
2
|
+
<button class="ghp-filter-btn active" data-topic="all">
|
|
3
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
4
|
+
<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/>
|
|
5
|
+
<rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>
|
|
6
|
+
</svg>
|
|
7
|
+
<p>Todos</p>
|
|
8
|
+
</button>
|
|
9
|
+
`;const r=`https://cdn.simpleicons.org/${t.icon}/${t.color}`;return`
|
|
10
|
+
<button class="ghp-filter-btn" data-topic="${e}" style="--tech-color: #${t.color}">
|
|
11
|
+
<img src="${r}" alt="${t.name}" loading="lazy">
|
|
12
|
+
<p>${t.name}</p>
|
|
13
|
+
</button>
|
|
14
|
+
`},P=(e,t)=>{const r=`https://raw.githubusercontent.com/${t}/${e.name}/main/preview.png`,o=`https://opengraph.githubassets.com/${t}/${e.name}`,c=`https://placehold.co/640x360?text=${encodeURIComponent(e.name)}`,n=e.deployUrl?`<a href="${e.deployUrl}" target="_blank" rel="noopener noreferrer">Acessar</a>`:"",a=e.htmlUrl?`<a href="${e.htmlUrl}" target="_blank" rel="noopener noreferrer">Github</a>`:"";return`
|
|
15
|
+
<div class="ghp-project-card">
|
|
16
|
+
<div class="ghp-img-container">
|
|
17
|
+
<img
|
|
18
|
+
src="${r}"
|
|
19
|
+
alt="Preview do projeto ${e.name}"
|
|
20
|
+
class="ghp-card-img"
|
|
21
|
+
loading="lazy"
|
|
22
|
+
onerror="if (this.src.includes('preview.png')) { this.src='${o}'; } else { this.onerror=null; this.src='${c}'; }"
|
|
23
|
+
>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="ghp-card-content">
|
|
26
|
+
<div>
|
|
27
|
+
<h3>${e.name}</h3>
|
|
28
|
+
<p title="${e.description}">${e.description}</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="ghp-card-links">
|
|
31
|
+
${a}
|
|
32
|
+
${n}
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
`};function T(e,t=6){const r=g(e);r&&(r.classList.toggle("ghp-projects-grid",!0),r.innerHTML=Array(t).fill('<div class="ghp-project-card ghp-skeleton ghp-skeleton-card"></div>').join(""))}function w(e,t){const r=g(t);if(!r)return;const o=e.flatMap(a=>v(a)),n=[...new Set(o)].reduce((a,l)=>{const s=h[l];return s?a+C(l,s):a},C("all"));r.innerHTML=`<div class="ghp-filters-content">${n}</div>`}function f(e,t,r="",o){const c=g(t);if(c){if(c.className="ghp-projects-grid",c.style.minHeight="auto",e.length===0){c.innerHTML='<p class="ghp-empty-msg">Nenhum projeto encontrado.</p>';return}c.innerHTML=e.map(n=>o?o(n):P(n,r)).join("")}}function S(e){const t=g(e);t&&(t.innerHTML=`
|
|
37
|
+
<div class="ghp-search-container">
|
|
38
|
+
<svg class="ghp-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
39
|
+
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
|
|
40
|
+
</svg>
|
|
41
|
+
<input type="text" id="gh-port-search" class="ghp-search-input" placeholder="Buscar projeto..." autocomplete="off">
|
|
42
|
+
</div>
|
|
43
|
+
`)}function x(e,t,r,o,c){const n=document.getElementById(e);if(!n){console.warn(`[Snapport] setupFilters falhou: container "${e}" não encontrado. Possíveis causas: renderFilters não foi chamado ou DOM ainda não está pronto.`);return}n.addEventListener("click",a=>{const s=a.target.closest(".ghp-filter-btn");if(!s)return;const u=s.dataset.topic,p=u==="all"?t:t.filter(d=>v(d).includes(u));f(p,r,o,c),n.querySelectorAll(".ghp-filter-btn").forEach(d=>d.classList.remove("active")),s.classList.add("active")})}function k(e,t,r,o){(()=>{const n=document.getElementById("gh-port-search");return n?(n.addEventListener("input",a=>{const s=a.target.value.toLowerCase(),u=e.filter(p=>p.name.toLowerCase().includes(s)||(p.description||"").toLowerCase().includes(s)||v(p).some(d=>d.toLowerCase().includes(s)));f(u,t,r,o)}),!0):!1})()||console.warn("[Snapport] Search input ainda não existe no DOM")}async function A(e,t={searchContainer:"search-cont",filtersContainer:"filters-cont",projectsContainer:"projects-cont"}){try{const r=t.tag||"port";await Promise.all([y(t.searchContainer),y(t.filtersContainer),y(t.projectsContainer)]),S(t.searchContainer),T(t.projectsContainer,6);const o=await j(e,r);return w(o,t.filtersContainer),f(o,t.projectsContainer,e,t.customCardTemplate),x(t.filtersContainer,o,t.projectsContainer,e,t.customCardTemplate),k(o,t.projectsContainer,e,t.customCardTemplate),{projects:o,status:"success"}}catch(r){console.error("Erro ao inicializar portfólio:",r);const o=document.getElementById(t.projectsContainer);return o&&(o.innerHTML='<p class="ghp-empty-msg">Erro ao carregar projetos.</p>'),{status:"error",message:r.message}}}i.getPortProjects=j,i.initPortfolio=A,i.renderFilters=w,i.renderProjects=f,i.renderSearchBar=S,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "snapport",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"portfolio",
|
|
7
7
|
"github-api",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"files": [
|
|
17
17
|
"dist"
|
|
18
18
|
],
|
|
19
|
-
"main": "./dist/snap-port.
|
|
19
|
+
"main": "./dist/snap-port.js",
|
|
20
20
|
"module": "./dist/snap-port.js",
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"exports": {
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
"docs:dev": "vitepress dev docs",
|
|
35
35
|
"docs:build": "vitepress build docs",
|
|
36
36
|
"docs:preview": "vitepress preview docs",
|
|
37
|
-
"docs:deploy": "npm run docs:build && gh-pages -d docs/.vitepress/dist"
|
|
37
|
+
"docs:deploy": "npm run docs:build && gh-pages -d docs/.vitepress/dist",
|
|
38
|
+
"prepublishOnly": "npm run build"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@types/node": "^25.6.0",
|