Public website for the AI4EOSC initiative. Built with Astro + Tailwind CSS.

Commands

npm install # install dependencies (Node >=22.12.0)
npm run dev # local dev server at localhost:4321
npm run build # production build to ./dist/
npm run preview # preview the production build
npm run astro check # TypeScript type checking

---

Content editing guide

Site content is split into three layers based on how often it changes.

---

1. Collections (src/content/)

Structured entities with one file per item. Each folder contains a _template.yml / _template.md as a reference for all available fields.

Products — src/content/products/*.yml

The platform's own products (AI4EOSC Platform, LLM, Agents…).

• Order: manual via the order: <number> field inside each YAML. Change the number to reorder.
• Add: copy _template.yml, fill in the fields, and save with a descriptive filename.

Projects — src/content/projects/*.yml

EU-funded projects that originated or extend the platform.

• Order: automatic by end year extracted from the period field (e.g. "2022 – 2024" → sorts by 2024). Ongoing projects go last.
• Add: copy _template.yml. The lead field and the partners array are informational — they do not affect which logos appear on the site.

Communities — src/content/communities/*.yml

Scientific communities using the platform (Marine Science, Climate, Bioinformatics…).

• Order: automatic alphabetical by title. No order field needed.
• Add: copy _template.yml. The slug field must be unique and in kebab-case.

Gateways — src/content/gateways/*.yml

Platform deployments for specific projects or scientific domains.

• Order: automatic alphabetical by title. No order field needed.
• Add: copy _template.yml. The slug field must be unique and in kebab-case.

Stories — src/content/stories/*.md

Articles, news, case studies and videos. There are two types:

Internal story — full article written in Markdown below the frontmatter:

---title: Article titletype: Case study # Case study | News | Research | Videodate: 2026-05-01excerpt: Short summary shown on the card.image: /images/stories/filename.jpg # optionalicon: microscope # optional Lucide icon, used when there is no image---
Full article content in Markdown here...

External story — links to an external URL (blog post, YouTube video…). No Markdown body needed:

---title: Article titletype: Newsdate: 2026-04-10excerpt: Short description.image: https://cdn.example.com/image.jpg # optionalexternalUrl: https://...---

• Order: automatic by date descending (newest first).
• File naming: use the pattern type-short-title.md (e.g. case-study-imagine.md, video-webinar-federated-learning.md).
• Template: _template.md covers both internal and external cases with inline comments.
• Images: place story images in public/images/stories/ and reference them as /images/stories/filename.jpg in the image field. External stories can also use a remote image URL directly.

OG preview images

Open Graph images (used by social media link previews) are generated automatically at build time for every page and story. No manual work needed — they are rendered from the page metadata and output to dist/og/:

dist/og/
├── home.png
├── about.png
├── products.png
├── projects.png
├── communities.png
├── gateways.png
├── stories.png
├── stories/
│ ├── case-study-imagine.png
│ └── ...
└── ...

Each story gets its own OG image generated from its title, type and excerpt. To trigger regeneration, run npm run build.

---

2. Editable data (src/data/)

YAML files with content that changes occasionally but does not have its own per-item entity.

File	Content	Notes
numbers.yml	Metrics shown in the Numbers section	Some values are computed automatically (see comments in the file). Manual values must be updated by hand.
testimonials.yml	Quotes in the Testimonials section	Add or edit objects in the items array.
faq.yml	FAQ questions grouped by category	Edit questions/answers or add new categories.
about.yml	Timeline on the About page	Each timeline entry has year and phase.
nav.yml	Navbar labels and CTA	Change navigation labels.
footer.yml	Footer text and links	Brand name, description, and link columns.

partners.yml — global partner registry

This file is a lookup table for all known partners in the ecosystem. It defines for each partner:

items:
- name: CSIC # exact name — acts as the IDlogo: CSIC.svg # file in src/assets/logos/ (optional)url: https://... # institutional website (optional)country: Spainlat: 40.4# coordinates for the map (optional)lon: -3.7

Important: every active entry in this file appears on the site — in the partner table, the logo marquee, and the map. Commented-out entries are ignored. To add a new partner: place their logo in src/assets/logos/, uncomment or add their entry in partners.yml with the logo filename, and set the appropriate role.

---

3. Static content

More stable copy (section titles, introductory descriptions, CTA text…) is written directly as constants inside Astro components and pages:

• src/components/sections/*.astro — landing page sections (Hero, HowItWorks, OpenSourceBanner…)
• src/components/ui/*.astro — reusable components (CtaFinal, PageHero…)
• src/pages/*.astro and src/pages/**/*.astro — copy specific to each interior page

To edit this content, modify the relevant .astro file directly.