HC Starlight – Docs Site Generator Theme banner

HC Starlight – Docs Site Generator Theme

3 devlogs
15h 21m 19s

Astro Starlight theme with Hack Club branding — for building beautiful documentation sites and playgrounds.

For simplicity, it is a documentation site generator with Hack Club branding (hc-starlight).
The demo links directly to the…

Astro Starlight theme with Hack Club branding — for building beautiful documentation sites and playgrounds.

For simplicity, it is a documentation site generator with Hack Club branding (hc-starlight).
The demo links directly to the documentation site, so you can see how it looks in a real project.

Documentations for the themehttps://hc-starlight.pages.dev
NPM Packagehttps://npmjs.org/package/hc-starlight

Built with:

Astrohttps://astro.build
Starlighthttps://starlight.astro.build
Hack Club branding & CSShttps://hackclub.com/brand, https://css.hackclub.com

This project uses AI

Used GitHub Copilot to help generate the Hack Club design tokens and global CSS configuration.

Demo Repository

Loading README...

Saif (A8K)

Shipped this project!

Hours: 15.36
Cookies: 🍪 459
Multiplier: 29.91 cookies/hr

I built this Starlight theme! This is my first time creating an Astro Starlight theme and my first npm package.

Saif (A8K)

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

Attachment
Attachment
Attachment
0
Saif (A8K)

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

Attachment
0
Saif (A8K)

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

Attachment
Attachment
0