Use Astro as framework

[ddamato]

This PR refactors the project to use the Astro framework.

Development

npm run start

This will launch a server at localhost:4321.

The project uses Astro as a framework and is hosted by Netlify. The build configuration for Netlify is handled by the netlify.toml which runs the npm run build command to create a static site in CI/CD.

Anatomy

The project has several folders in /src:

/assets

This holds static assets that are typical used for the astro:image service. For bitmap images, the service will optimize the image before serving. However, moving to SVGs might make this folder obsolete in favor of SVG components.

/components

This holds components written as .astro files. These are mostly HTML and scoped CSS. In some cases, there is additional JS that makes the component interactive. For more complex components, the script is imported from /scripts.

/layouts

This holds special page layout templates that could be used for more than the HTML provided by /pages. This also holds global styles meant to be unscoped and affect all pages.

/pages

This holds content that will eventually be rendered as static pages. This includes not only HTML but also .json data, as in the case for providing the large amount of static city data.

/scripts

This holds the complex scripts that are used by components or shared between the scripts.

Ecosystem

When a user selects a city, the location-select.js script will cause a cascade of requests to eventually provide a collection of forecasts that are appropriate to play in an outdoor event. The result is dispatched on the window as forecasts.

The <Map/> component will also render when a city is select.

Other components listen for the forecasts event on the window in order to render results, specifically the <Results/> and <Calendar/> components.

[netlify[bot]]

✅ Deploy Preview for whencanipickle ready!

Name	Link
🔨 Latest commit	d1fb64fb49a440ac75c215416bd8ab7f0291061e
🔍 Latest deploy log	https://app.netlify.com/sites/whencanipickle/deploys/66b0257bc008890008398950
😎 Deploy Preview	https://deploy-preview-22--whencanipickle.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stanchanpsu]

Is this ready for review :) if so, i'll spend some time on it this week (I want to learn how it all works).

[stanchanpsu]

LGTM. Merging and deploying. I'll check the map is still all good.