native mango
Alright, I'm working on a project for school and I think I'm going about everything wrong. The most interactive thing on this site is a "weather widget" yes the course material is old, no it doesn't make sense for a pet shelter to have a weather widget. So part of it is in the mobile view, the widget is up in the top banner and when in desktop view it's in the right side panel. So I took the naïve approach and bulit a weather astro component with inline script to make the 2 API calls to populate the data. One to check IP geolocation data and another to get the weather data for that location. Obviously, I ran into problems when I added the second hidden widget in the sidebar. So now I'm thinking I should just redo all the query selectors to be class based and write a little function to for each apply the inner HTML, and put the inline script on the main page instead of in the component. BUT that all feels like a bad wrong hack and I know there is a better way. Since I am making the IP geolocation call the script has to run on the client, so I can't make those calls in the frontmatter I don't think. Maybe the best solution is to move the script out of the component and have it pass props to any instance of the weather component, but how would that work?
I'm probably overthinking it and a hacky solution is fine, because our work is barely looked over to be graded, and neither my advisor or the old instructor who is reviewing our work for free have used Astro to know a "right" way. It just bothers me, because I can feel there is a better way.
hasty turtle
