toine/mon-site-perso
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mise a jour du frontend

Browse source
This commit is contained in:
toine 2025-10-05 08:52:12 +02:00
parent 618b740588
commit 9737caff99
9 changed files with 332 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

64
frontend/app/projects/page.tsx
View file

@ -15,6 +15,29 @@ async function getProjects() {
return res.json();
}
function toTags(technologies: unknown): string[] {
if (Array.isArray(technologies)) return technologies.filter(Boolean).map(String);
if (typeof technologies === 'string') {
// Split on common separators and the word 'et' (French 'and')
return technologies
.split(/,|;|\||\//g)
.flatMap(part => part.split(/\bet\b/i))
.flatMap(part => part.split(/\s{2,}/))
.map(s => s.trim())
.filter(s => s.length > 0);
}
return [];
}
function normalizeImageUrl(img: unknown): string | null {
if (typeof img !== 'string' || img.trim() === '') return null;
const val = img.trim();
// If already absolute (http/https or data URL), return as is
if (/^(https?:)?\/\//i.test(val) || /^data:/i.test(val)) return val;
// Otherwise, try to use as-is; backend might serve it relatively
return val;
}
export default async function ProjectsPage() {
const projects = await getProjects();
@ -23,12 +46,41 @@ export default async function ProjectsPage() {
<div className="container">
<h2 className="section-title">Mes projets</h2>
<ul className="projects-list">
{projects.map((p: any) => (
<li key={p.id}>
<h3>{p.name}</h3>
<p>{p.description}</p>
</li>
))}
{projects.map((p: any) => {
const tags = toTags(p.technologies);
const href = p.link || p.url || '#';
const imgUrl = normalizeImageUrl(p.image);
return (
<li key={p.id} className="project-card">
<a href={href} target="_blank" rel="noopener noreferrer" className="project-card__link">
<div className="project-card__header" aria-hidden="true">
{p.image ? (
<div className="project-card__image" style={{ backgroundImage: `url(${p.image || ''})` }} />
) : (
<div className="project-card__image project-card__image--placeholder">
<span>{(p.name || '').slice(0, 1).toUpperCase()}</span>
</div>
)}
</div>
<div className="project-card__body">
<h3>{p.name}</h3>
<p>{p.description}</p>
</div>
<div className="project-card__footer">
<div className="tech-badges">
{tags.length > 0 ? (
tags.map((t: string, idx: number) => (
<span key={idx} className="badge badge--mono">{t}</span>
))
) : (
p.technologies ? <span className="badge badge--mono">{String(p.technologies)}</span> : null
)}
</div>
</div>
</a>
</li>
);
})}
</ul>
</div>
</section>