Astro Tab — a custom new-tab page that fetches NASA's Astronomy Picture of the Day (APOD) API and shows the title, image or video, and explanation. Built with plain HTML, CSS, and JS via Vite, with a space-themed UI (clip-path zigzag decorations, Google Fonts) and a date picker to browse past pictures. Deployed on GitHub Pages.
Built Astro Tab, my NASA APOD new-tab page, following the "Give Your Website a Pulse" guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA's APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn't always send an image; some days it's a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site.
Built Astro Tab, my NASA APOD new-tab page, following the “Give Your Website a Pulse” guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA’s APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn’t always send an image; some days it’s a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site.
