Gharbiya Fablab

During this devlog, I have completed the team page and also solved some problems related to previous builds.

Site: https://stemgharbiya.github.io/fablab/
Commits made: https://github.com/stemgharbiya/fablab/commits/main/?since=2026-01-12&until=2026-01-13

During this devlog, I started with updating the Astro configuration to enable hosting on GitHub Pages after using Netlify, to avoid personnel-dependent projects since it’s a school FabLab project. Then, I worked on building the foundation for a comprehensive team page feature on the FabLab website. I set up team member data with structured JSON files and TypeScript types. I added essential UI dependencies like Tailwind CSS and Astro Icon to support responsive theming and styling. Along the way, I resolved build issues, such as image path parsing errors and consolidated scattered contact fields into single objects for better data management. This groundwork prepares the way for creating the actual TeamCard components and the team page itself, with filtering and grid layouts.

The thing that took the most time was not the setup. I tried constructing the components many times but faced problems with optimizing images with the Astro Image component, since it requires importing images in the form of import image from "../assets/image.png" to be able to use as the src of the Astro Image components. I was torn between two approaches: making things simple for future colleagues (maybe non-techs) to add their names, and optimizing things as much as possible. After trying different data structures, I settled on a single team.json file, but that made me face the problem of importing images dynamically. Then, after some searching, I found that I could import it accurately but using
const image = await import(`../assets/team/${person.image}`)
thanks to (https://stackoverflow.com/a/70024111).

For all changes made during this devlog session, you could look at the commits in the repo (https://github.com/stemgharbiya/fablab/commits/main?since=2025-12-26&until=2025-12-26) and most of (https://github.com/stemgharbiya/fablab/pull/5/commits)