Added API docs!

The last devlog of this project on FT… After 100 hrs of code, these words are the last words before the final ship. Wrote docs for the API at exo-atlas/docs/API.md in a single file. It consists of regular docs and examples with python and JS examples too! Updates the project dependencies for the last time before shipping the project.

Tasks completed -

• Wrote API Docs (a149b9e)
• Updated deps (a499615)

Added README and fixed the error!

Figured out what was wrong earlier with compare page, it was due to ISR. I have now excluded the compare page from the ISR and also the atlas page which also has search params. Also added README - polished by claude to the project which I should I have changed a lot earlier! The readme has actually become a lot long. The attached images are now from hosted website as the planet compare page is working fine. Also, crossed 100 commits for this project. Working on the API docs now and then we are ready for the ship!!! Take a look at it now -

Tasks completed

• Updated deps (f7c9593)
• Fix compare page and atlas page by excluding them from ISR (87e678c)
• Change icon for the compare with button on planet page (36b452d)
• Add MIT License to the project (4b3fd95)
• Added README to the project (f03a68c)

Added comparision page!

Now you can compare planets on the /compare page or compare a planet with another planet from the planet page from compare with button. It compares the planets on basis of basic metrics and adds a buff or nerf style arrows. The compare page also shows an AI analysis, for that I have created on POST API endpoint which takes the IDs of the both planets. It currently doesnt have caching because it was hard to figure out caching with two planets, and I also might not add it because flavortown is ending soon. Idk, whats the error but the compare page only works on the local dev, not when deployed, sharing images of locally hosted stie. And I think I will need to ship this project by tmr itself. Till then check the compare page -

Tasks completed -

• Create POST API for AI comparision (0d506bf)
• Designed the planets comparision page and added it to navbar (f907249)
• Added compare with button on the planet passport page (821e274)
• Updated the CSS on a few pages (5cc3b64)

Added atmosphere visualization!

Added atmosphere section in the planet page where you can view the planets atmosphere composition (estimated), its breathability, and surface atmospheric pressure. All the atmosphere types and information are just an estimation and pre-loaded. The data is based on chatGPT and google search results. All the information is based on planet type and some other data like - radius, mass, temperature. Also, added atmosphere visuals over the planet. Take a look at it now!

Tasks completed -

• Added atmosphere visual to the planet canvas && Added its composition to planet page (0195962)

Added habitable zone visualizer!

Created a new section on the planet page to visualize the habitable zone range. It was possible with the help of claude and resources like https://arxiv.org/abs/1301.6674 and habitable zone calculations based on Kopparapu et al. (2013). I have more features to add! working on them. Till then take a look at this new section.

Tasks completed -

• Added react to solve error (54a98e4)
• Added habitable zone visualizer to planet page (297610c)

Added keyboard navigation!

Yes now you can finally navigate through your keyboard without leaving it! I have added a couple of shortcuts to navigate the website. And the hints for those shortcuts can be viewed by pressing ? button in the nav bar or typing ? on your keyboard. Keyboard shortcuts include travelling to different page by pressing G + initial of the targetted page, shortcuts also include focusing to search by pressing /, R for random page, enter to open focused planet, arrow keys to navigate atlas, esc to go back to atlas, s to share the page, and b to book mark the planet. Also added a section on the index page which include the link to other pages. Updated deps.

Tasks completed

• Updated deps (1eb34d3)
• Added links to other pages on index page (d8ad0f7)
• Added keyboard navigation (762f31d)

Added dynamic OG images!

Yes now when you share the exoplanet passorport pages you get a unique OG image for each planet. Well, it took long time to complete that but I still feel it to be unpolished and the images are not that good ig. I have created an API endpoint for that at /og/[slug].png and it uses satori and resvg for the image to render. Also, in order to use the geist font on the image I have hosted the geist.ttf geistMono.ttf on the web. I think it doesnt have support for woff2 files which are already present in the assets directory. And then added the props to base layout for OG stuff and added it to meta. Take a look at it. Ik the image seems small but it was my first time designing such an complex image. I had to play around with layouts and styles.

Tasks completed -

• Updated deps && added satori and resvg (020672e)
• Hosted geist fonts (d4d1ae4)
• Created dynamic OG image endpoint (3012cf2)
• Added OG meta tags and its props to the layout (4e10640)
• Passed the planet details to layout for OG meta (d994ff9)

Added another page!

I feel better and better when I add new pages. Added another page the “explore” page which is like shorts / reels kind of thing where you get the snapshots of random planets with brief information and AI Summary. You can either press the next planet button or use keyboard key “r” to go to the next planet, which is basically refresh of SSR page. Also, you can bookmark the planet directly from the explore page! Updated index page canvas size issue, due to which it wasn’t centered and added THREE.js in built with section of footer.

Tasks completed -

• Added THREE.js under built with in footer (62402cf)
• Designed the explore page && Added it to the navbar (389e647)
• Fix canvas size on index page (c091760)

Updated the index page!

Added a new section - EPOD (exoplanet of the day) just like APOD from the project astroDaily. Its like a introductory card of passport of the planet page containing information like habitability, host star, radius, mass, period, temperature, ESI, Distance, and AI summary. It uses a custom supabase function to get planet of the day by asscoiating random dates to random IDs and shuffling that data. Also updated the heading styles on the index page and updated styling. Also, added the new pages link to the footer.

Tasks completed -

• Create supabase function to get the planet of the day (4936d47)
• Add planet of the day section (EPOD) (390a335)
• Add more links to the footer (390a335)
• Update styles and heading style (f121ee7) (4c8924b)

Added planet orbit visualization (again, but now 3D)

Added planet’s orbital view again, but this time its in 3D. I have used THREE.js for this because i feel it a lot easier to use. Its again canvas based on the planet / passport page. You can drag the canvas move the perspective and click on the canvas to pause the simulation. It consists of 3 components - star / sun, the planet, and the orbit. Also, there are stars in the background. Take a look at it here. Also, performed astro check and removed unwanted variables and imports, and simplifies ingest script, and added a custom github actions CI workflow, where it performs bun astro check and bun run lint (bun tsc --noEmit under the hood).

Tasks completed

• Added 3D planet orbit visualization (d3f9bf1)
• Simplify Ingest script (99af6fb)
• Created custom GH actions CI workflow && Fixed it (thrice) (6019b2e)(5f889eb)(1f80f63)(322921b)
• Fixes after bun astro check (13c96d6)(b4135cc)

Added planet radius gap (Fulton gap) diagram!

Added the the third section to science plot page - planet radius gap (Fulton gap). From the Kepler data it can be inferred that the exoplanets barely have radii between 1.5-2 Earth radii (1.5x - 2x times of earth radius). I have created another graph (number of planets vs radii (earth radii)), which helps us to visualize that gap. Though the gap in not very clear on the graph, it is a real discovery from Kepler data. Also, enlarged font for descriptions as it wasnt that very visible.

Tasks completed -

• Add Fulton gap diagram (736420a)

Added Hertzsprung - Russell diagram!

Basically, this again a graph this time, radius (solar radii, log scale) vs temperature (kelvin). And the stars are plotted on the graph. It has bands (O, B, A, F, G, K and M) based on the temperature range. The stars are plotted with colors depending on these bands. And again this time you can hover to see the planets of the respective hovered star. Nothing much really, though I am doing math from 2 days. Working on another chart diagram! Take a look at this -

Tasks completed -

• Added Hertzsprung - Russell graph (b9b4ffa)

Added another page!

Yes! this page is not an ordinary one, its for real scientists and physists. LOL, jk, it is just a page having more scientific knowledge and comparision graphs. I have worked on one of its section that is mass radius graph presentend on a logarithmic scale. I will continue with two another graphs tmr. The mass-radius graph shows all the exo-planets with known mass and radius, along with that, there are three lines - the water-world line and the earth like conditioned line, and pure iron line to give idea about the planets density. All the planets are represented in the form of dots of theit respective type colors. You can hover the planet to see its name and click it to view its passport just like the systems page. Also fixed the fonts issue on chromium based browser due default font weight was missing.

Tasks completed -

• Fixed typo in footer (c2b097b)
• Added font default weight to astro config (f55dc5b)
• Fixed type errors in collections page (f55dc5b)
• Design the mass vs radius graph (log scale) section in new science page (784b52d)
• Fixed pixel font for chromium based browsers (784b52d)

Added AI overview!

Yeah, AI is here too! I dont like AI everywhere though I added it here to add some text to the planet pages. I have used groq AI for this. I created two APIs - narrative AI (What if you lived on the planet) and summary (AI overview). These two sections are added in the planet passport page. And yes it took much time! but the result is not bad. Also created another supabase table which is just a cache of these ai responses generated on every visit. This is just to prevent my groq AI credits. And also to prevent that attacks, I have used the planet id instead of planet name to generate those AI responses. Also, removed ISR from APIs, updates dependencies, simplified HTML in some components.

Tasks completed -

• Updates deps && Added astro check (256daf3)
• Removed ISR from APIs (cc09e6c)
• Simplified HTML structure for SEO (ad37fc7)
• Created groq client (5316c32)
• Create AI response cache table in supabase (31cc645)
• Create AI summary and narrative APIs (ee814a3)
• Added AI overview and “What if I lived there?” section to planet page (b67af1d)
• Updates CSS with keyframes (80af626)

Created a vercel cron job and ISR!

Added two things - first, added Vercel ISR to all the pages and a prerender states to all of the pages. The second things is, created a custom API for vercel cron job and added its config with the cron job! This cron job will check for new planets available and sync the database.

Tasks completed -

• Added prerender states to all pages (801041c)
• Added ISR to pages (86362de)
• Created a custom vercel cron job API (d520f25)
• Added vercel.json config file with cron job (d52403e)

Added footer and bookmarks!

Found out the favicon was from project astroDaily, therefore updates it to that of this project. Also designed the footer (similar to that from project astroDaily) and added the footer to base layout. I just love that footer, thus added to this project also! And fixed some HTML errors from previous commits and prettified it too. Worked on another feature - bookmarks! Now you can bookmark you favorite planet and comeback to collections page to see them! Designed a collections page and added it to navbar. Take a look at the new collections page and bookmarks -

Tasks completed -

• Updated favicon (35a16f5)
• Designed the footer (2b58e79)
• Added footer to base layout (2b58e79)
• Fixed HTML and prettify code (fe3f7ec)
• Added bookmarks to lib (265ae60)
• Designed the bookmarks (collection) page && Added bookmark button to planet page and collections page link to navbar(e22e9d3)

Added the similar planets section!

I worked on the planets similarity by factors such as planet type and habitibily percentage - and created a custom supabase function. And then created a section in planet passport page frontend by calling the similar planets in frontmatter and then mapping it inside HTML. Working on other features! Nothing much to day about. Take a look -

Tasks completd -

• Added get_similar_planets function (0660029)
• Added similar planets section (a38ea53)

Designed another page “systems”!

Worked on another page ‘systems’ which basically contains a network of exoplanet systems show beautifully on canvas - planets as nodes connected with their respective stars! And all those together create a network of systems. It was really tough and could have been possible to made without claude’s assistance. It took too much time just for a canvas! But the result is extremely good. There are three other boxes which show the no. of systems shown, planets shown and the nearest planet system. There are buttons to filter the planets based on their distance but I have to figure it out its working. The default distance is set to 2000 ly and 1000 planets are shown (supabse max rows returned limit).

Task completed -

• Design the systems page (2a5092d)

Designed the timeline page!

Yet another big devlog! Worked on the new timeline page and it has got some cool look! It consists of 2 sections - discoveries per year, where you can filter it by discovery method and view the year-wise discovery graph. Also, you can click any column to list the planets discovered in that particular year. Another section consists of planets disovered per discovery method shown in a bar chart. Take a look at newly added things -

Task completed -

• Updated project dependencies (a67ce01)
• Fixed tailwind css on several pages/components (51a7d93)
• Added the new timeline page (36036b8)

Added planet location map!

This is definitely the biggest devlog… Worked on a big thing not that big actually. Added the planet location section where you can see the planet’s location on the canvas like a map with co-ordinates. No words, just take a look at it. Also, updated the icons so that it can be color dynamic or change the color depending on the parent element and fixed the icon component where the icon path was not resolved. And added the icons to the index page and the atlas page!

Task completed -

• Updated icons with fill as current color (3fde803)
• Fix icon path in the icons.astro component (99cb0d1)
• Added icons to the index and planet page (e3974b7)
• Designed the sky map section for the planet page (0d34a67)

Added host star section!

Well completed the host star section but still there are bugs that need to be resolved. However UI is completed and here its is. It has the canvas which shows the host star with a different color with respect to its temperature! And also, it has information like spectral type, temperature, radius and name ofcourse. Also fixed some styling on the page! There are a lot of features in my mind that I just feel to add everthing together, but it will become a big devlog. Nvm, will devlog after every new feature!

Task completed -

• Add host star section && Change css to tailwind (dceee05)

Added orbit period comparision!

Added another section in the planet page, where you can see how much time 1 orbit takes, its speed compared to earth, and your age there, along with a canvas which shows comparision between the ornits of the earth and the planet by plotting them inside an orbit around the star. Also, deployed the website on vercel and fixed the padding on the base layout page. Worked on the a new section but it has errors, so showing only the working section. Will soon update about the another section in the next devlog.

Tasks completed -

• Deploy to vercel (c1a2d82)
• Fix padding on base layout (5d686a0)
• Add orbit section to planet page (7ba5746)

Designed the planet page!

Designed the planet page or the main page that will caontain all the details about the planet! I have added everything I could think of. It contains habitability, mass, distance, radius, ESI Score, and discovery year. It also has the size comparision between earth, neptune, jupiter and the exo-planet itself. And also, a light transit curve animations is there! And the bonus includes your weight calculator on the planet. The gravity is calculated from the mass and radius of the exo-planet and if not there it shows estimation. Also fixed the planet card, habitability percent width showing full and changed rocky plant type color. Take a look at the page -

Tasks completed -

• Change rocky planet type color && Fix habitability % width (b349ca7)
• Design the planet page (ae190d6)

Worked on Atlas!

Working on the atlas page showed me, where I stand. Got tired working on the Atlas page, moreover the search wasnt working on the atlas page, and I thought that I did something wrong. I tried to figure out the cause why was the atlas page not working. And after checking supabase, API, I got no clue. Therefore, I asked claude and I came to know that my API was static thats why it wasnt picking up the params from the URL. And thus, the search page also malfunctioned. However, I also came to know that there was some error on the ESI score due to which even unknown planets were shown with 100% scores. Thus fixed that so that only planets with known types get a proper ESI score.

Tasks completed -

• Fix API; add SSR to the planets API (f74b6f0)
• Design the Atlas page (a492e71)
• Changed planet type to any with highest habitability % (9cb9c4f)

Started with the UI!

I have started with main page page of the website, the index page. And I think looks cool. I am completly inspired by the vercel’s Geist design system and I think the page also looks cool. For now it consists of hero section with two buttons and another section consisting of three top planets (they are preview cards just like the preview APOD cards from my astroDaily project) as same as earth. And also, designed the navbar completely inspired from astroDaily project. Working on the atlas page now!

Tasks completed -

• Add vercel typography to css (c6c2ca2)
• Design the navbar (de41a1c)
• Added navbar and props for title and description to base layout (79797e5)
• Design the index page and hero section (fb9bbba)
• Design the planet card (f2de0ac)

Created supabase functions

I have much time today to work on the project, and I have started by creating 3 new supabase/sql functions - get_planet_by_slug, get_planets, and get_random_planet. Then I created a new API endpoint to search for the planets by using these supabase functions. And then I moved on to UI, work in progress and will be updating it soon! Found 1 typo inside astro config-astro.config.mjs and also updated the dependencies and upgraded to latest bun version.

Tasks completed -

• Create supabase functions (5464df5)
• Add search planets API (28cc457)
• Update dependencies && upgrade bun (b352585)
• Fix typo inside astro config file (229c205)

Add theme, assets, and layout

Today I configured the tailwindcss configuration file for the custom theme and also added the color, and font varaibles to the global css file. Also, added the Geist fonts - regular, monospace, and pixel using the new Astro v6 fonts API! All the font files are in the src/assets/fonts. And also added the Geist icon set along with that. All tge icon files are stored under the src/assets/icons directory, and created a custom astro components for using that icons. And also created the base astro layout.

Tasks completed -

• Add tailwind config and custom tailwind theme (d3e619c)
• Add geist fonts (d3e619c)
• Add geist icons and its astro component (bf105d6)
• Add astro base layout (e41c8b2)

Designed the logo banner and UI design system

I designed the logo/favicon for the website and the banner/og image in figma. Also worked on the UI design system putrely inspired by Vercel and my another project astroDaily. It consists of the same fonts as verecl - the Geist font and has the same color system as of vercel. Here is the newly UI design system.

Tasks completed -

• Designed the logo/favicon and banner/og image (27d4bbc)
• Decided the UI system and color palette

Started the project!

Started with the new project - exoplanet collection. It will be a webpage with the collection and information about various exoplanets. I have kept the tech stack simple and fast = Astro JS + Bun + Tailwind + Supabase. Started with creation of the project, then added typescript and tailwindcss. Afterwards, setup database in supabse, added supabase libraries, and created a re-usable supabase client (both public and admin). Then wrote a custom script for ingesting exoplanet data from the NASA exo-planet archive to the newly built supabase database, in which I found a typo in the database schema and fixed that. Also created a custom github workfow for remote access.

Tasks completed today -

• Initialize astro JS project (5c997a1)
• Add typescript + tailwindcss (0bdb92c)
• Create supabase table and schema && Add supabase && Create supabase client (6bd9824) (613ec3a)
• Create custom script for ingesting exoplanet data to supabase database (a8ce25f)
• Create a manual database ingestion workflow trigger on github actions (a516557)

Changed the library for globe!

After I deployed to vercel, when I opened the website in chromium based browsers, the 3D earth didn’t load up and after hours of trying I was unable to resolve the issue, however I have came with a different solution and switched the library to globe.gl from r3f-globe. Shipping the project!!! Check the new look-

Deployed the website!

Yes! Finally the site is hosted. There were errors on errors that I had to solve first, then the globe wasn’t rendering on the hosted site, and I kept on trying things until I had to resize the texture image into smaller size and less resolution. But now its time to enjoy! Also, I have added the README file. The website is live now and will be soon shipping the project!!

Added the sidebar

And there we go, almost completed the project ig, there were some UI changes and added another important thing the side bar which shows the live feed of ongoing events and volcanoes. You can click to visit that even and a detailed pop-up will appear! Also, you can search up the live feed from the search bar on the top. It also shows the total no. events present in the feed and gets updated based on what you search. Take a look at the newly added sidebar -

Added status bar and layer controls

Now you control the visible layers and also see the information about the events that are taking place, also the co-ordinates of ISS! The status bar shows up the no. earthquakes past 2.5 days, the maximum earthquake magnitude recorded, the number of active volcanoes, the ISS altitude, the ISS speed, and aurora Kp. Sidebar is almost complete which will have the ability to search up through the ongoin events and you can click the event to visit it! There will be an update soon!

First leak!

jk, completed a main breakthrough, the placement of points wasn’t working well until I turned on merge points option. There are a lot of bugs to be fixed and four errors too! Currently working on the statusbar, the sidebar and floating pills. I guess the decision of switching to react proved to be a huge success and has made my work a lot easier!!! I will soon update with the deployment and addition of new features. Just take a look at this-

Change in plan!

Uhm idk where to start, but when I was working on earthPulse, specifically the textures and shaders parts, I got so much tired of writing raw vanilla scripts that I decided to quit the project. But I got an idea instead to switch the project stack and keep it simple and less messy. I dont know why I chose astro JS before but now I am switching to react and make the project more fruitful and usable. I literally got headaches while using astro JS. I did a little research on re-implementation of the project inside react. And I got some nice results from which I specifically chose the react three fiber option as it will give me more flexibility. I will be updating soon about the new add-on!

There are resources worth mentioning here, check them out-

• Cesium JS
• Resium JS (react wrapper for cesium js)
• React Three Fiber (R3F)
• R3F Globe

Added the main thing!

Three.js is amazing as well as boring at the same time. Worked on the main thing, the globe - the heart of the project. I have started with a canvas, inside the globe component which is powered by three.js and rendered by WebGL. Currently, it consists of 3D earth which has grid lines (latitudes and longitudes), ISS position, and the aurora rings along with the star-field background. It currently features auto-rotation of earth + drag to rotate. Also, you can hover over the different natural activities point markers to know the about their information. I will continue this component by adding the earth texture to give it a real look

Tasks completed:

• Optimized dependencies (6a83a10)
• Build the globe.astro component (5e9d6e1)
• Add globe with grid lines
• Add star-field background
• Add auto-rotation, drag to rotate
• Hover the points to know info

Started with the project!

This project is going to be big one. It will have a 3D earth model which will show the live activities on earth like earthquakes, volcanic eruptions, meteor showers, ISS position, solar flares etc. all beautifully present on the 3D earth with the help three.js along with a modern dashboard of activities over time and information about them. I have researched on the APIs and information available on the internet and I have planned the following things-

• Earthquake - USGS Earthquake API
• Volcanic eruption - SGVP Program + USGS volcano
• ISS position - Open notify ISS
• Solar flares - NASA DONKI API
• Meteor shower - Predicted / calendar based
• Aurora - NOAA Space Weather API

Tasks completed:

• Create the project (1aa784a)
• Add libraries tailwind and three.js (b2b1afc)
• Design the favicon and banner (ffe4c73)
• Design the color palette
• Set up the tailwind theme (1a09158)
• Research on the available APIs
• Set up the project file structure (ed69f19)
• Write all the TS interface (ad49b59)
• Update the README (7ebdb6b)

rewrote the readme and fixed some small UI and bugs. I think I am ready to ship this!

Added the documentation for APOD API with various examples of almost all the parameters of the API. Fixed the ISR issue on the archive/search page where the query wasn’t loaded on the page from the URL params. Also made it reload-proof where the script malfunctioned on changing the page and coming back. Fixed the UI for the navBar.

The third day of heavy work session! Today I have added one of the most cool things - the filter system in the search page along with the help of claude. I had re-work on the search API for adding up a new filter system. Take a look of it! Also now you can directly search from the url by adding params for search and filter and therefore the redirect from the index archive page will work now. Now I am realizing that I will need to document everything 😭. Also there were several small UI fixes especially for the small devices. I have also fixed the sharing of APOD page where the website url wasnt loaded poperly. The another UI addition is the blurred shadow around the main APOD image. check it out. Also added the related APODs section inside the APOD archive page based on the postgres search. Also fixed the large padding in gallery section for small devices.

Another heavy session today!!!! Added the footer and I think I have cooked it. Just take a look. Also completed one of the important things- the public API v1. It has many features!! Firstly it is free to use, no API key needed, unlimited requests, features include params like date, start_date, end_date, hd, query (Database FTS), thumbnails, random, limits with pagination, media_type, order (new/old first) and specific fields you want, year/month wise filtering. And the max limit is 1000 (1k)!!! You also get a meta data about the returned data regarding pagination, total, and order. There was other stuff done too like ui improvements, added video support (not youtube yet), also the image will be visible in single page now.

Fixed the horizontal scrollbar on chrome. Working on the API which will have many features with unlimited calls and no API key required!

Heavy work session! Worked on the archive index page, archive search page, new public API work in progress. The ISR was also not working properly and the astro view transitions also glitched due to which javascript also malfunctioned. I have prettified some code today as it looked messy. Also, updated the dependencies along with fixing of view transitions, and the javascript issues due to that. The main thing done today is the adding of new search page (with debouncing) on archive where you can use the postgres full text search. I have also worked on the index archive page which contains three things - a search query box which takes you to the search page (not working now), a date-wise url maker with 3 examples, and a year-wise list of APODs that even shows the months (in the form of dots)! Sorry for making this devlog big!

https://cdn.hackclub.com/019d29d8-23d0-7641-a3ad-8e2cf5e52c56/2026-03-26_16-21-24.mp4

I am sorry for not consistently working on this project. I was focusing on the studies and got sick. I am better now. The re-validation and ISR was not setup correctly, so I had to fix that first. Now the site will be re-validated every 24hrs. Also added blurred loading of images for fast preview along with skeleton loading. There’s only blurred loading for the APOD archive page for now. Almost completed the search API and TS vector in Supabase with update trigger (not committed yet).

Changed to static paths and kept APIs dynamic. Updated the dependencies and upgraded to astroJS v6! Also added the vercel analytics and vercel speed insights. Fixed the internal server error completely and the gallery preview is available now. Working on the archive page with search and filter features.

I am back after a break. Focused on studies. There were two important things to fix, the internal server error on website in preview of gallery section. The other problem is that the image load very slow. So to fix that, I used https://wsrv.nl for webP conversion and caching. Now I can feel the difference. Check it out yourself.

Added the scale up animation on loading of image and view transitions from astro. There were a few fixes. Added a version API which tells about the last commit and website version

I only test one URL and decided that the OG Image wasn’t working. But it wasnt true until I tested that in https://opengraph.dev So, I have updated the OG image banner (default OG image) with new favicon. Also added a fallback if the dynamic OG image fails. Also worked on the favicon.ico and on theme based changing of icons

Designed this beautiful logo/favicon! Not the main work done today but still took much time. The other things done today are the simplification optimization of website structure. Also edited the gallery preview on the index page. Take a look!

Sorry! Forgot to add a devlog yesterday. There are couple of new things added! I am still trying to fix the dynamic OG image generation. Added the banner (default OG image), designing favicon in figma, fixed the sync DB script and optimized it. the main thing done today was the simplification and modularity of website structure for better performance. Did dimplification on the landing page, navbar and the preview apod component. the navbar shows the current page now! .There were some UI changes too like adding of more roundedness and effects! have a look-

My HTML structure is looking shi , I need to modify and simplify every page. I am scared to check the SEO or a lighthouse report. Well, I am trying to make it good and minimal. I worked on prettifying that. The another good change is that I added a whole geist icon set on my project so that the code doesn’t look messy. I planning on unifying the meta data and the OG data. And yeah now the social media sharing is live. Also, added the copy button for the URL. Currently, there is a horizontal scrollbar on chrome idk, what’s wrong. Need to resolve that too. Here’s the lighthouse report.

Yeahhh! figured it out, the api got gallery was controlled by the vercel’s ISR. Now, the gallery works just fine. I did beautification, adding of simplification in the html structure. Also working on the the social media sharing options in archive.

Okay, there are a couple of things added! First of all I had to use Gemini in order to achieve the dynamic loading of the images on the gallery page as the user scrolled. The second thing added was to remove the ISR on the random APOD page. There are also some Fixes and optimizations on the code. Also added an “Archive” title on the archive page. And added the “LIVE_DATA” or “OLD_DATA” on the navbar, which basically tells if the data is latest. Currently, I am having issues on the gallery page. idk why the images are shown repeated. Will figure it out soon. Thus, adding a photo only. Will add a video on the next devlog.

First of all sorry for devlogging this much time. Actually, I had ran into a problem, my .git folder had got some issues. However, the issue is resolved now. I have added two main things, the gallery page, and the random APOD page. Both the pages are not finished yet, I am figuring out the loading of all the data from the db to the gallery page, and the random page is currently static. I have also added a “Today’s APOD” title which was missing in the APOD page. Also there were some minor UI fixes. The other thing is that I have worked on the dynamic OG image generation and converted it into a React component. I’m currently unsure about the loading of images in the gallery page but will soon figure it out.

The database wasn’t getting an update due to early API call so, changed the workflow time to 5:30 UTC. There were some UI fixes in navbar, misc. Also I have worked on the landing page. Take a look. I have added a section of posts that were posted on a particular day when you go to an APOD. Added a copyright section in the preview of APOD cards.

Okay so the yearly and monthly archive wasn’t looking that great, so I have worked to beautify it. It is very apple and vercel inspired. Also the navbar was not looking that good as I was thinking so I have redesigned it added blur like everyone else! it’s so beautiful!! But there are still very minute details that I need to add in the UI. Also, the surprise me, gallery , overall archive page is remaining. It is very time consuming !!! But please take a look at my work

A heavy session of UI! Designed the entire monthly archive page. No more energy to journal. Just check it out how beautiful!

Lets go! I have added the main thing on the page the APOD. Now you can go to https://astro--daily.vercel.app/apod to see the latest APOD. This page fetches the latest APOD from the database and shows it! Along with UI/UX, there are few things remaining for this page like caching for 24h so that the page remains static. I have also added the https://astro--daily.vercel.app/archive/[year]/[month]/[day] to show APOD for that particular day. It also uses the same idea as on the APOD page. I have also added vercel’s ISR on these pages so that the pages stay static without increasing the build times.

The first thing necessary is the data. I made a script that fetches my supabase database and checks the last date. If it doesn’t match with today’s date, the script fetches due APODs (Astronomy Picture of the Day) from NASA’s API and updates the database. I added a github action workflow which automatically runs that script everyday so that my database is always up to the date.