+ ); +} \ No newline at end of file diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx new file mode 100644 index 0000000..2ee3fa1 --- /dev/null +++ b/src/components/Slider.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import RcSlider from 'rc-slider'; +import { PLAYBACK_SLOTS } from "../config"; +import "rc-slider/assets/index.css"; + +interface GeshemSliderProps { + playback?: string; + slider: number; + setSlider: React.Dispatch>; +} + +export function Slider({ playback, slider, setSlider }: GeshemSliderProps) { + const handleStyle = { + height: 40, + width: 40, + border: 0, + marginTop: -10, + boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)" + }; + + const railStyle = { + height: 20, + backgroundColor: "#3498db" + }; + + const trackStyle = { + display: "none" + }; + + return ( +

+ setSlider(val as number)} + /> +

+ ); +} \ No newline at end of file diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..6d838be --- /dev/null +++ b/src/config.ts @@ -0,0 +1,19 @@ +const hostname = typeof window !== 'undefined' && window.location && window.location.hostname; + +const PRODUCTION = hostname ? hostname.includes("geshem") : false; + +export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : ""; + +export const MAPBOX_ACCESS_TOKEN = + "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw"; + +export const IMAGE_COORDINATES: [number, number][] = [ + [31.7503896894, 34.4878044232], + [37.8574239563, 34.5078463729], + [37.7157066403, 29.4538271687], + [31.9347389087, 29.4373462909] +]; + +export const PLAYBACK_HOURS = 2; + +export const PLAYBACK_SLOTS = (PLAYBACK_HOURS * 6) - 1; \ No newline at end of file diff --git a/src/functions/scheduled.ts b/src/functions/scheduled.ts new file mode 100644 index 0000000..5aa3fa0 --- /dev/null +++ b/src/functions/scheduled.ts @@ -0,0 +1,178 @@ +// Cloudflare Workers scheduled handler for cron jobs +import type { ScheduledController, ScheduledEvent } from '@cloudflare/workers-types'; + +interface Env { + BASE_URL: string; + AUTH_USER: string; + AUTH_PASS: string; + IMGS_BUCKET: R2Bucket; +} + +interface ImageData { + [key: string]: string[]; +} + +class GeshemUpdate { + private bucket: R2Bucket; + private env: Env; + + constructor(bucket: R2Bucket, env: Env) { + this.bucket = bucket; + this.env = env; + } + + private async authenticate(request: Request): Promise { + const headers = new Headers(request.headers); + const credentials = btoa(`${this.env.AUTH_USER}:${this.env.AUTH_PASS}`); + headers.set('Authorization', `Basic ${credentials}`); + + return new Request(request.url, { + method: request.method, + headers, + body: request.body + }); + } + + private async getLatestImages(): Promise { + const authenticatedRequest = await this.authenticate(new Request(this.env.BASE_URL)); + const response = await fetch(authenticatedRequest); + const html = await response.text(); + + const regex = /radar280comp_\d+\.png/g; + const matches = html.match(regex) || []; + const uniqueImages = [...new Set(matches)]; + + return uniqueImages.sort().slice(-10); + } + + private async getLatestBucketKeys(): Promise { + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + const yesterdayStr = yesterday.toISOString().slice(0, 10).replace(/-/g, ''); + + try { + const objects = await this.bucket.list({ + prefix: 'imgs/', + startAfter: `imgs/${yesterdayStr}` + }); + + return objects.objects.map(obj => obj.key); + } catch (error) { + console.error('Error listing bucket objects:', error); + return []; + } + } + + private async fetchMissingImages(): Promise { + const images = await this.getLatestImages(); + const s3Images = await this.getLatestBucketKeys(); + let updated = false; + + for (const img of images) { + const key = this.keyFromFilename(img); + if (!s3Images.includes(key)) { + await this.fetchImage(img, key); + updated = true; + } + } + + return updated; + } + + private async fetchImage(imgName: string, key: string): Promise { + console.log(`Downloading ${imgName} from web server`); + + const imageUrl = `${this.env.BASE_URL}/${imgName}`; + const authenticatedRequest = await this.authenticate(new Request(imageUrl)); + const response = await fetch(authenticatedRequest); + + if (!response.ok) { + throw new Error(`Failed to fetch image: ${response.statusText}`); + } + + const imageData = await response.arrayBuffer(); + + console.log(`Uploading to ${key}`); + await this.bucket.put(key, imageData, { + httpMetadata: { + contentType: 'image/png', + cacheControl: 'public, max-age=31536000' + } + }); + } + + private keyFromFilename(filename: string): string { + const [name, dateStr] = filename.split('.')[0].split('_'); + const res = 280; + + // Parse date: YYYYMMDDHHMM + const year = dateStr.slice(0, 4); + const month = dateStr.slice(4, 6); + const day = dateStr.slice(6, 8); + const hour = dateStr.slice(8, 10); + const minute = dateStr.slice(10, 12); + + const d = `${year}${month}${day}`; + const t = `${hour}${minute}`; + + return `imgs/${d}/${t}/${res}.png`; + } + + private async generateJson(): Promise { + const latestKeys = await this.getLatestBucketKeys(); + const keys = latestKeys + .filter(key => key.endsWith('280.png')) + .sort() + .slice(-10); + + const index: ImageData = { '280': keys }; + + await this.bucket.put('imgs.json', JSON.stringify(index), { + httpMetadata: { + contentType: 'application/json', + cacheControl: 'public, max-age=60' + } + }); + } + + async run(): Promise { + try { + const updated = await this.fetchMissingImages(); + if (updated) { + await this.generateJson(); + } + return `Updated: ${updated}`; + } catch (error) { + console.error('Error in GeshemUpdate.run():', error); + throw error; + } + } +} + +export default { + async scheduled( + controller: ScheduledController, + env: Env, + ctx: ExecutionContext + ): Promise { + console.log('Cron job triggered at', new Date().toISOString()); + + try { + if (!env?.BASE_URL || !env?.AUTH_USER || !env?.AUTH_PASS) { + throw new Error('Missing environment variables'); + } + + if (!env.IMGS_BUCKET) { + throw new Error('R2 bucket not configured'); + } + + const updater = new GeshemUpdate(env.IMGS_BUCKET, env); + const result = await updater.run(); + + console.log(`Cron job completed: ${result}`); + } catch (error) { + console.error('Error in scheduled function:', error); + throw error; + } + } +}; \ No newline at end of file diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..4db6121 --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,67 @@ +--- +--- + + + + + + + 404 - Page Not Found | geshem.space + + + +

404

Page Not Found

The page you're looking for doesn't exist.

← Back to Rain Radar

+ + \ No newline at end of file diff --git a/src/pages/api/update.ts b/src/pages/api/update.ts new file mode 100644 index 0000000..88dfa3c --- /dev/null +++ b/src/pages/api/update.ts @@ -0,0 +1,200 @@ +import type { APIRoute } from 'astro'; + +export const prerender = false; + +interface ImageData { + [key: string]: string[]; +} + +interface CloudflareEnv { + BASE_URL: string; + AUTH_USER: string; + AUTH_PASS: string; + BUCKET_NAME: string; + SCHEDULED?: boolean; +} + +class GeshemUpdate { + private bucket: R2Bucket; + private env: CloudflareEnv; + + constructor(bucket: R2Bucket, env: CloudflareEnv) { + this.bucket = bucket; + this.env = env; + } + + private async authenticate(request: Request): Promise { + const headers = new Headers(request.headers); + const credentials = btoa(`${this.env.AUTH_USER}:${this.env.AUTH_PASS}`); + headers.set('Authorization', `Basic ${credentials}`); + + return new Request(request.url, { + method: request.method, + headers, + body: request.body + }); + } + + private async getLatestImages(): Promise { + const authenticatedRequest = await this.authenticate(new Request(this.env.BASE_URL)); + const response = await fetch(authenticatedRequest); + const html = await response.text(); + + const regex = /radar280comp_\d+\.png/g; + const matches = html.match(regex) || []; + const uniqueImages = [...new Set(matches)]; + + return uniqueImages.sort().slice(-10); + } + + private async getLatestBucketKeys(): Promise { + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + const yesterdayStr = yesterday.toISOString().slice(0, 10).replace(/-/g, ''); + + try { + const objects = await this.bucket.list({ + prefix: 'imgs/', + startAfter: `imgs/${yesterdayStr}` + }); + + return objects.objects.map(obj => obj.key); + } catch (error) { + console.error('Error listing bucket objects:', error); + return []; + } + } + + private async fetchMissingImages(): Promise { + const images = await this.getLatestImages(); + const s3Images = await this.getLatestBucketKeys(); + let updated = false; + + for (const img of images) { + const key = this.keyFromFilename(img); + if (!s3Images.includes(key)) { + await this.fetchImage(img, key); + updated = true; + } + } + + return updated; + } + + private async fetchImage(imgName: string, key: string): Promise { + console.log(`Downloading ${imgName} from web server`); + + const imageUrl = `${this.env.BASE_URL}/${imgName}`; + const authenticatedRequest = await this.authenticate(new Request(imageUrl)); + const response = await fetch(authenticatedRequest); + + if (!response.ok) { + throw new Error(`Failed to fetch image: ${response.statusText}`); + } + + const imageData = await response.arrayBuffer(); + + console.log(`Uploading to ${key}`); + await this.bucket.put(key, imageData, { + httpMetadata: { + contentType: 'image/png', + cacheControl: 'public, max-age=31536000' + } + }); + } + + private keyFromFilename(filename: string): string { + const [name, dateStr] = filename.split('.')[0].split('_'); + const res = 280; + + // Parse date: YYYYMMDDHHMM + const year = dateStr.slice(0, 4); + const month = dateStr.slice(4, 6); + const day = dateStr.slice(6, 8); + const hour = dateStr.slice(8, 10); + const minute = dateStr.slice(10, 12); + + const d = `${year}${month}${day}`; + const t = `${hour}${minute}`; + + return `imgs/${d}/${t}/${res}.png`; + } + + private async generateJson(): Promise { + const latestKeys = await this.getLatestBucketKeys(); + const keys = latestKeys + .filter(key => key.endsWith('280.png')) + .sort() + .slice(-10); + + const index: ImageData = { '280': keys }; + + await this.bucket.put('imgs.json', JSON.stringify(index), { + httpMetadata: { + contentType: 'application/json', + cacheControl: 'public, max-age=60' + } + }); + } + + async run(): Promise { + try { + const updated = await this.fetchMissingImages(); + if (updated) { + await this.generateJson(); + } + return `Updated: ${updated}`; + } catch (error) { + console.error('Error in GeshemUpdate.run():', error); + throw error; + } + } +} + +export const GET: APIRoute = async ({ platform, request }) => { + // This endpoint should only be accessible via Cloudflare Cron + const cron = request.headers.get('CF-Cron'); + if (!cron) { + return new Response('Unauthorized', { status: 401 }); + } + + try { + const env = platform?.env as unknown as CloudflareEnv; + + if (!env?.BASE_URL || !env?.AUTH_USER || !env?.AUTH_PASS) { + return new Response('Missing environment variables', { status: 500 }); + } + + // Get R2 bucket (this would be configured in your Cloudflare Workers environment) + const bucket = env.BUCKET_NAME ? platform?.env[env.BUCKET_NAME] as R2Bucket : null; + + if (!bucket) { + return new Response('R2 bucket not configured', { status: 500 }); + } + + const updater = new GeshemUpdate(bucket, env); + const result = await updater.run(); + + return new Response(JSON.stringify({ + message: `SUCCESS: ${result}`, + timestamp: new Date().toISOString() + }), { + status: 200, + headers: { + 'Content-Type': 'application/json' + } + }); + + } catch (error) { + console.error('Error in update handler:', error); + return new Response(JSON.stringify({ + message: 'ERROR', + error: error instanceof Error ? error.message : 'Unknown error' + }), { + status: 500, + headers: { + 'Content-Type': 'application/json' + } + }); + } +}; \ No newline at end of file diff --git a/src/pages/history/[date].astro b/src/pages/history/[date].astro new file mode 100644 index 0000000..0bd1e40 --- /dev/null +++ b/src/pages/history/[date].astro @@ -0,0 +1,23 @@ +--- +import { Geshem } from '../../components/Geshem'; +import '../../styles/global.css'; +import '../../styles/geshem.css'; + +export const prerender = false; + +const { date } = Astro.params; +--- + + + + + + + + Geshem - Rain Radar History + + + + + + \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 2d14107..fb90246 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,16 +1,21 @@ --- +import { Geshem } from '../components/Geshem'; +import '../styles/global.css'; +import '../styles/geshem.css'; +const { date } = Astro.params; --- - + - Astro + Geshem - Rain Radar + -

Astro

+ diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro new file mode 100644 index 0000000..12ac001 --- /dev/null +++ b/src/pages/privacy.astro @@ -0,0 +1,38 @@ +--- + +--- + + + + + + + + + + + + Privacy Policy | geshem.space + + + +

We do not collect any data.

+ + diff --git a/src/styles/geshem.css b/src/styles/geshem.css new file mode 100644 index 0000000..2dba79f --- /dev/null +++ b/src/styles/geshem.css @@ -0,0 +1,45 @@ +#datetime { + position: absolute; + top: 20px; + left: 20px; + color: white; + font-family: monospace; +} + +#date { + font-size: 1.4em; +} + +#time { + font-size: 2.8em; +} + +#slider { + position: fixed; + bottom: 8vh; + width: 30vw; + margin-left: 35vw; +} + +@media only screen and (max-device-width: 812px) { + #slider { + width: 80vw; + margin-left: 8vw; + z-index: 10; + } +} + +body { + margin: 0; + padding: 0; + position: fixed; + overflow: hidden; + width: 100vw; + height: 100vh; + user-select: none; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} \ No newline at end of file -- cgit v1.3.1