Tab Zero - Custom New Tab Page

Ship #1

@crazydave on Tab Zero - Custom New Tab Page · 25 days ago

I made a custom new tab page that fetches a random nature image from unsplash using their api and it also shows weather information in the background using the open meteo api. You can also search on multiple sources using slash commands as outlined in the README. It was hard to get the slash commands to work and for the icons to switch as the user typed, but after some googling I figured it out. I'm proud of the clean way that the icon switches as the user types in a different slash command and love how it immediately searches on that website. I struggled to get the API key working on the GitHub pages but realised I was still using the nasa api key in the deploy.yml file.

Try project → See source code →

Open comments for this post

@crazydave on Tab Zero - Custom New Tab Page · 25 days ago

2h 56m 57s logged

I first followed the guide to create the nasa daily astronomy site but I didn’t do the part for CSS as I knew I wanted to take the site in a completely different direction. I wanted to make a custom new tab page like the chrome extensions I used to use in primary school so I first added a basic searcher that can search on google. I then added slash commands that let you search on YouTube, duckduckgo, GitHub, and chatgpt and made it so the icon updates alongside it. I also added unsplash images for the background using the Unsplash image api. I then added a weather widget by first getting the user’s location and then using the free open-meteo api to get the weather at that location. I wanted to show an icon for the weather but the API, to my knowledge, doesn’t support return images but instead returns weather codes that correspond to the descriptions, like partly cloudy, and the icons that you normally see on weather apps, so I got chatgpt to code an array that maps the weather codes to the description and icon. I then added hints for the slash commands below the searchbar.