HC Starlight – Docs Site Generator Theme

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