94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
# Drizz.li
|
|
|
|
An open-source, high-performance weather forecast website built with SvelteKit and powered by the [Open-Meteo APIs](https://open-meteo.com/).
|
|
|
|
## Goals
|
|
|
|
Our objective is to provide a comprehensive, user-friendly weather platform for end-users. We aim to offer professional-grade weather visualizations and detailed meteorological data while maintaining the transparency and community-driven nature of open-source software.
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework**: [SvelteKit](https://kit.svelte.dev/)
|
|
- **Language**: [TypeScript](https://www.typescriptlang.org/)
|
|
- **Data Source**: [Open-Meteo API](https://open-meteo.com/)
|
|
- **Visualization**: custom canvas charts (`src/lib/charts`)
|
|
|
|
## Developing
|
|
|
|
Once you've cloned the project and installed dependencies with `npm install`:
|
|
|
|
```sh
|
|
npm run dev
|
|
|
|
# or start the server and open the app in a new browser tab
|
|
npm run dev -- --open
|
|
```
|
|
|
|
## Building
|
|
|
|
To create a production version of your app:
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
You can preview the production build with `npm run preview`.
|
|
|
|
## Deployment (static hosting)
|
|
|
|
The build output in `build/` is a fully static site. Two pieces of server
|
|
configuration are needed:
|
|
|
|
### 1. SPA fallback
|
|
|
|
Pages that are not prerendered (unlisted cities, GPS coordinate routes like
|
|
`/weather/week/52.09N5.12E/`) are served by `404.html`, which boots the app
|
|
and resolves the location client-side. Configure the server to serve
|
|
`404.html` for unknown paths.
|
|
|
|
### 2. Cross-origin isolation (SharedArrayBuffer for the embedded map)
|
|
|
|
The `/weather/maps/` page embeds `maps.open-meteo.com`, which uses
|
|
`SharedArrayBuffer` for its decoding worker pool. A cross-origin iframe only
|
|
gets `SharedArrayBuffer` when the **embedding** page is cross-origin
|
|
isolated, so this site must be served with:
|
|
|
|
```
|
|
Cross-Origin-Opener-Policy: same-origin
|
|
Cross-Origin-Embedder-Policy: require-corp
|
|
```
|
|
|
|
(The map already serves `Cross-Origin-Resource-Policy: cross-origin` and its
|
|
own COOP/COEP, so it is embeddable under these headers. All other assets are
|
|
same-origin and the weather APIs are CORS requests, so `require-corp` is safe
|
|
here.)
|
|
|
|
### Example: Caddy
|
|
|
|
```caddy
|
|
drizzli.example.com {
|
|
root * /srv/drizzli
|
|
file_server
|
|
try_files {path} {path}/ /404.html
|
|
header {
|
|
Cross-Origin-Opener-Policy "same-origin"
|
|
Cross-Origin-Embedder-Policy "require-corp"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Example: nginx
|
|
|
|
```nginx
|
|
server {
|
|
server_name drizzli.example.com;
|
|
root /srv/drizzli;
|
|
error_page 404 /404.html;
|
|
add_header Cross-Origin-Opener-Policy "same-origin" always;
|
|
add_header Cross-Origin-Embedder-Policy "require-corp" always;
|
|
location / {
|
|
try_files $uri $uri/ =404;
|
|
}
|
|
}
|
|
```
|