Portfolio
Třetí týden s Astro

Třetí týden s Astro

Týden 3: Práce s daty

27. října - 2. listopadu 2025

Tento týden bylo hlavně o tom, udělat web skutečně dynamický. Místo ručního psaní karet projektů jsem se naučil generovat je z dat.

Pole objektů

Začal jsem vytvořením souboru projects.js se všemi daty projektů strukturovanými takhle:

export const projects = [
{
id: 1,
title: "Osobní web",
description: "Moje portfolio postavené v Astro",
tags: ["astro", "css", "javascript"],
featured: true,
date: "Říjen 2025"
},
// další projekty...
];

Pak to jen importuješ a používáš. Mnohem čistší než mít všechna data roztříštěná po komponentách.

Mapování dat do komponent

Udělal jsem komponentu ProjectCard.astro, která bere props, a pak použil .map() na generování karet z dat:

{projects.map((project) => (
<ProjectCard
title={project.title}
description={project.description}
tags={project.tags}
/>
))}

Jedna definice komponenty, více instancí generovaných automaticky. Přidáš nový projekt do datového souboru a objeví se na webu.

Filtrování a řazení

Naučil jsem se filtrovat projekty před zobrazením:

// Zobraz jen vybrané projekty
const featured = projects.filter(p => p.featured);

// Seřaď podle data
const sorted = [...projects].sort((a, b) =>
new Date(b.date) - new Date(a.date)
);

Vytvořil jsem oddělené sekce pro vybrané práce a běžné projekty. Taky jsem udělal filtrování podle tagů, abych mohl ukázat jen JavaScriptové projekty, CSS projekty atd.

Vzory organizace dat

Věci se zkomplikovaly, když jsem chtěl propojit projekty se skillama. Vytvořil jsem samostatný soubor skills.js:

export const skills = [
{ id: "html", name: "HTML", category: "frontend" },
{ id: "css", name: "CSS", category: "frontend" },
// další...
];

Pak jsem v projektech odkazoval na ID skillů a napsal pomocné funkce na propojení:

function getSkillsForProject(projectId) {
const project = projects.find(p => p.id === projectId);
return project.skillIds.map(id =>
skills.find(skill => skill.id === id)
);
}

Nastavil jsem pořádnou strukturu:

src/
├── data/ (projects.js, skills.js)
├── utils/ (pomocné funkce)
└── components/ (UI komponenty)

Co nefungovalo

  • Zapomněl jsem spreadnout pole před řazením [...projects] a divil se, proč se mi mění původní data
  • Dělal jsem překlepy v názvech vlastností a všude jsem měl undefined
  • Zkoušel jsem filtrovat podle skillu, který v některých projektech neexistoval - musel jsem přidat kontroly
  • Pomocné funkce byly nejdřív hodně nepřehledné, než jsem je pořádně zrefaktoroval