Saif (A8K)

Work on the STEM Gharbiya website continued with a series of updates aimed at improving content, navigation, API integration, and code quality.

The alumni and team data structures were enhanced with social media integration, additional fields, sorting logic, and improved schema validation. Former members are now displayed alongside the current development team on the join page (PR #61).

Navigation received significant updates, including portal rendering, active-state highlighting, keyboard and pointer interactions, and ARIA improvements. The About section hero now includes smooth transitions for a more engaging user experience (PR #75). Links to unfinished pages were removed to prevent broken navigation, and the active mobile nav link was shaded to match desktop behavior (PR #78, PR #79).

Forms and API integration were refined by switching the frontend to use astro:env/client for API_BASE_URL and Turnstile keys, improving security and maintainability (PR #81). The site API worker was renamed to ‘site-api’ for clarity (PR #80).

To enforce code quality and maintain consistency, Husky pre-commit hooks, lint-staged, ESLint, and Prettier were fully configured. CI workflows were added for linting, formatting, and commit message verification, with commitlint rules documented to enforce conventional commits (PR #69, PR #70, PR #71, PR #72, PR #82, PR #83). Missing staff images were corrected as part of these updates (PR #70).

Additionally, site URLs and email addresses were updated to the official domain stemgh.org (PR #68), ensuring full production readiness.

With these changes, STEM Gharbiya has transitioned fully into production at stemgh.org, combining improved content management, interactive navigation, secure forms, and robust code quality enforcement.

This phase focused on refining PWA support, improving asset organization, and optimizing image handling across the site.

Work began with a refactor of the PWA manifest configuration to consolidate icon definitions and improve maintainability (PR #56). Building on that, additional PWA assets were introduced, including new 192×192 and 512×512 icons, optimized logo images, and layout updates to better support manifest integration and consistent branding (PR #57).

Asset organization was further improved by renaming dorm facility images to remove spaces and updating import paths. This ensured more reliable asset handling and cleaner naming conventions across the project (PR #58).

The PWA manifest was then enhanced with updated icon definitions and improved glob patterns for asset caching, strengthening offline support and service worker behavior (PR #59).

Finally, image handling was improved by introducing image layout configuration. This enables Astro to automatically generate responsive images, improving performance and ensuring images render efficiently across different screen sizes (PR #60).

Overall, these updates strengthened progressive web app functionality, improved asset reliability, and enhanced performance and maintainability across the project.

Note: stemgharbiya.surge.sh was used from testing the production behavior of the site but it isn’t the production url.

This phase focused on stability, documentation, structure, and progressive enhancement.

On February 23, the Team page was improved by adding status support for members, displaying former members, and linking the Join page to the current development team (PR #46). In parallel, frontend–workers integration was strengthened with a typed Hono client, unified form logic, shared error handling utilities, and a more reliable Turnstile reset flow (PR #45).

Documentation was overhauled on February 24. The main README and workers README were aligned with the current architecture, including updated environment variables, setup instructions, validation requirements, and deployment guidance (PR #48). Rate limiting documentation was updated to use Cloudflare’s Rate Limiting binding, and the local development port was corrected (PR #47).

On February 28, bundling was optimized by switching the frontend to direct fetch calls, preventing the workers’ Hono dependency from being bundled client-side (PR #53). A main About page was also introduced as a structured hub with summary content, hero section, and navigation links to related pages (PR #51).

Finally, March 3 focused on polish and progressive web app improvements. Theme handling was enhanced to respect saved and system preferences, with automatic dark mode detection and light/dark favicons (PR #54). A full PWA manifest with app details and shortcuts was added, along with proper asset integration and theme color configuration in the layout (PR #55).

Overall, this iteration improved performance, documentation clarity, structural consistency, theming behavior, and PWA completeness, moving the project closer to production-grade quality.

This update focused on consistency and frontend–backend improvements.

The About section was refactored by consolidating headers, removing per-page hero sections, and restyling Staff cards for better alignment with the design system (PR #44). This reduced duplication and improved visual consistency across pages.

On the infrastructure side, a typed Hono client was added to strengthen frontend–workers integration (PR #45). Form logic was unified across the site, and a Turnstile reset issue was fixed to improve reliability during resubmissions.

These changes improved structure, type safety, and overall user experience.

Work on the STEM Gharbiya website began on February 5 with the initial commit, establishing the foundation of the project. The Astro structure was set up, Tailwind CSS integrated, and global layout and theming refined for scalability. Dynamic meta tags and centralized site configuration were added early (PR #2), followed by PWA support, sitemap generation, and robots.txt integration (PR #3), ensuring strong SEO and architectural fundamentals.

On February 12, the homepage was enhanced with reusable components, layout refactoring, and Astro Icons integration (PR #16), improving structure and visual consistency.

Mid-February focused on backend infrastructure. The join repository was integrated under the workers directory (PR #25), and a full join system was implemented using Hono with D1 persistence, Turnstile protection, Resend email integration, and a connected frontend page (PR #28). This transitioned the site from static to backend-enabled.

Forms were unified through a reusable FormLayout and shared validation utilities, with clearer API validation errors (PR #30, #32).

On February 18, site structure and content were refined. The admission page was reorganized (PR #33), footer and contact configuration improved (PR #34), and an Alumni page with dynamic year filtering was introduced (PR #35).

February 22 marked a major expansion: a Team page (PR #37), improved footer navigation (PR #38), an Activities page with shared social utilities (PR #41), structured data and IndexNow integration for stronger SEO (PR #42), and ClientRouter with Astro lifecycle migration enabling smooth view transitions (PR #43).

In about two weeks, the project evolved into a scalable, SEO-optimized platform with backend APIs, structured content, improved accessibility, and modern navigation.

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 focused on solving the problem mentioned in the previous devlog: the @hackclub/icons pack contains icons with different margin sizes.

To fix this, I tried several approaches until I found the best solution: creating my own normalized version of the icons. I selected 36 icons from the package, normalized them, and added them to my code. The process wasn’t as easy as it sounds — it was my first time working deeply with SVG paths.

I cloned the Hack Club Icons Figma design
(https://www.figma.com/design/u8evOObGA4HCzUKlrVra1q/Hack-Club-Icon-Component),
normalized the icons, exported them, arranged them alphabetically, and then added them to my source code.

You can see the added icons here:
https://hc-starlight.pages.dev/icons/#all-icons

I also created an Icon component to make using these icons easier:
https://hc-starlight.pages.dev/components/icons/

I also updated the documentation to reflect these changes.
The npm package (v0.0.8) and the GitHub repository are now published and publicly available:

GitHub: https://github.com/saif-abdelrazek/hc-starlight
npm: https://www.npmjs.com/package/hc-starlight

During this devlog, I was trying to integrate @hackclub/icons for social media icons and hackclub icon. In addition, I also added client routing integration (give the mpa a spa routing behavior - no page loading) using astro-vtbot library (https://events-3bg.pages.dev/jotter/starlight/guide/). I made the behavior of the client routing optional so you could dis activate following the guides.
I am currently facing problem with the sizes of icons in @hackclub/icons since some icons with margins by default and that make using them show them smaller than other icons. I tried solving the problem on my side but found this overkilling. I may try add modification to the icons without margins but for now it is a known issue.
The docs site is in production at https://hc-starlight.pages.dev
but the npm packages and the github repo still not published

During this devlog, I learnt about astro starlight components overriding occur and its styling structure (that took most of the time). I read some previous starlight themes code from github also (becasue of some lack of learning resources). That take most of the time and while I am searching I found those useful doc and script that made me avoid wasting time in folder structuring:
https://hideoo.dev/notes/starlight-plugin-how-to-create-theme

Then, mainly:
1-I changed the colors used in the starlight to use hackclub css colors
(https://css.hackclub.com)

2-In addition, while I am searching I found a npm library of name astro-theme-toggle so I used it in the theme instead of default astro toggle.

3-I also created that beautiful houston logo as the main logo for the theme (astro comic charactar like dino for hackclub) with changing in colors and adding hackclub logo (used canva)

I would Iike to thank both HiDeoo and ocavue, since I have benefited from their documentations, scripts and starlight themes code base (starlight-theme-rapide and starlight-theme-nova respectively) in learning more things. BTW ocavue is the creator of astro-theme-toggle go star it https://github.com/ocavue/astro-theme-toggle

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)

During this devlog, I have worked on merging my legacy made three games. In addition, I have improved their styles, logic to fit in the gaming hub. The three games are hangman, speedtest, and guessword games. I also improved the styling of the home page, about page and solved some errors made by wrong understanding of Astro framework script dealing logic.

For all changes made during this devlog session you could look at today (2025-12-24) commits in the repo
https://github.com/saif-abdelrazek/a8k-games-hub/commits/main/?since=2025-12-24&until=2025-12-24

For the legacy source code, you could check my legacy projects org in github
https://github.com/a8k-legacy

During this devlog, I have created the Games (/games) page with its categorization functionality based on categories and difficulties. That page start with a top featured games section.

During this devlog, I have created the main components of the Games Hub including the navbar, footer and them toggle button (including the theming functionality). In addition, I have created the home page of the hub with its hero section and featured games section. I also created 404 page.

During this devlog, I have created the projects page, which contains coding stats, projects and repos. In addition, I created a MomentLayout that is used in projects pages like /projects/saifmarks and moments of education section (ex. /education/stem-gharbiya/passive-trap-dust-filter)