Switch to Open-Meteo API

.editorconfig

@@ -0,0 +1,3 @@
+[*.{js,ts,tsx}]
+indent_size = 2
+indent_style = space

.github/workflows/preview.yml

@@ -22,7 +22,7 @@ jobs:
         run: node scripts/preview.mjs "${{ github.sha }}"
         env:
           NEXT_PUBLIC_IP_API_KEY: ${{ secrets.NEXT_PUBLIC_IP_API_KEY }}
-          NEXT_PUBLIC_WEATHER_API_KEY: ${{ secrets.NEXT_PUBLIC_WEATHER_API_KEY }}
+          NEXT_PUBLIC_OPEN_WEATHER_API_KEY: ${{ secrets.NEXT_PUBLIC_OPEN_WEATHER_API_KEY }}
       - name: Upload Preview
         if: ${{ startsWith(github.event.head_commit.message, '[pre]') }}
         uses: elementemerald/[email protected]
@@ -32,4 +32,4 @@ jobs:
           r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
           r2-bucket: ${{ secrets.R2_BUCKET }}
           source-dir: scripts/dist/
-          destination-dir: projects/weatherscan-rewritten/autopreviews/
+          destination-dir: projects/weatherscan-rewritten/autopreviews/

components/CCIcon.tsx

@@ -2,27 +2,31 @@ import * as React from "react";
 import { Icons2010, getIcon } from "../hooks/useIconMap";
 
 interface CCIconProps {
-    iconCode: number
-    windData: number
+  iconCode: number;
+  windData: number;
 }
 
 const CCIcon = ({ iconCode, windData }: CCIconProps) => {
-    const [icon, setIcon] = React.useState<number>(Icons2010.UNK);
+  const [icon, setIcon] = React.useState<number>(Icons2010.UNK);
 
-    React.useEffect(() => {
-        if (typeof iconCode === "number" && typeof windData === "number") {
-            const mapped = getIcon(iconCode, windData);
-            setIcon(mapped);
-        }
-    }, [iconCode, windData]);
+  React.useEffect(() => {
+    if (typeof iconCode === "number" && typeof windData === "number") {
+      const mapped = getIcon(iconCode, windData);
+      setIcon(mapped);
+    }
+  }, [iconCode, windData]);
 
-    return (
-        <div
-            id="conditions-icon"
-            className="absolute left-conditions-icon-l bg-conditions-icon w-conditions-icon h-conditions-icon bg-no-repeat top-conditions-icon-t z-0"
-            style={{ backgroundImage: `url(images/icons2010/${icon < 10 ? `0${icon}` : icon}.png)` }}
-        />
-    );
+  return (
+    <div
+      id="conditions-icon"
+      className="absolute left-conditions-icon-l bg-conditions-icon w-conditions-icon h-conditions-icon bg-no-repeat top-conditions-icon-t z-0"
+      style={{
+        backgroundImage: `url(images/icons2010/${
+          icon < 10 ? `0${icon}` : icon
+        }.png)`,
+      }}
+    />
+  );
 };
 
 export default CCIcon;

components/Current.tsx

@@ -2,79 +2,97 @@ import * as React from "react";
 import type { CurrentCond } from "../hooks/useWeather";
 
 interface CurrentProps {
-    temp: number
-    info: Partial<CurrentCond>
+  temp: number;
+  info: Partial<CurrentCond>;
 }
 
 const Current = ({ temp, info }: CurrentProps) => {
-    const [cycle, setCycle] = React.useState<string[]>([]);
-    const [idx, setIdx] = React.useState<number>(0);
-    const [infoMsg, setInfoMsg] = React.useState<string>("");
+  const [cycle, setCycle] = React.useState<string[]>([]);
+  const [idx, setIdx] = React.useState<number>(0);
+  const [infoMsg, setInfoMsg] = React.useState<string>("");
 
-    React.useEffect(() => {
-        let intervalTimer: NodeJS.Timeout;
-        if (info) {
-            if (info.phrase !== "") {
-                const tempCycle = [
-                    `visibility ${info.visib} ${info.visib != 1 ? "miles" : "mile"}`,
-                    `UV index ${info.uvIndex}`,
-                    info.phrase,
-                    `wind ${info.wind}`,
-                    `humidity ${info.humidity}%`,
-                    `dew point ${info.dewpt}°`,
-                    `pressure ${info.pres}`
-                ];
+  React.useEffect(() => {
+    let intervalTimer: NodeJS.Timeout;
+    if (info) {
+      if (info.phrase !== "") {
+        const tempCycle = [
+          `Visibility: ${Math.round(info.visib / 1000)}km`,
+          `Humidity: ${info.humidity}%`,
+          `Wind: ${info.windSpeed}km/h ${info.windDirection}`,
+          `Pressure: ${info.pres}hPa`,
+          `Dew Point: ${info.dewpt}°C`,
+        ];
 
-                setCycle(tempCycle);
-
-                intervalTimer = setInterval(() => {
-                    setIdx((idx) => {
-                        if (idx >= (tempCycle.length - 1)) {
-                            return 0;
-                        } else {
-                            return idx + 1;
-                        }
-                    });
-                }, 6000);
+        setCycle(tempCycle);
+
+        intervalTimer = setInterval(() => {
+          setIdx((idx) => {
+            if (idx >= tempCycle.length - 1) {
+              return 0;
+            } else {
+              return idx + 1;
             }
-        }
+          });
+        }, 6000);
+      }
+    }
 
-        return () => clearInterval(intervalTimer);
-    }, [info]);
+    return () => clearInterval(intervalTimer);
+  }, [info]);
 
-    React.useEffect(() => {
-        if (cycle) {
-            if (cycle.length > 0) {
-                const msg = cycle[idx];
-                setInfoMsg(msg);
-            }
-        }
-    }, [idx]);
+  React.useEffect(() => {
+    if (cycle) {
+      if (cycle.length > 0) {
+        const msg = cycle[idx];
+        setInfoMsg(msg);
+      }
+    }
+  }, [idx]);
 
-    return (
-        <div id="current-conditions" className="font-interstate absolute top-current-t left-0 h-current w-current text-left z-current">
-            {(temp !== NaN) ? <>
-                <div id="current-now" className="text-now absolute top-now-t left-now-l tracking-now text-left transform scale-x-105 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-right text-dark z-now">now</div>
-                <div
-                    id="current-nowwide"
-                    className="text-now absolute top-now-t left-nowwide-l tracking-now text-left transform scale-x-105 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-dark"
-                >now</div>
-                <div
-                    id="current-temp"
-                    className="text-temp absolute top-temp-t -left-temp-l text-center w-full transform scale-x-102-5 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-dark"
-                >{temp.toString()}</div>
-                <div
-                    id="current-info"
-                    className="font-parrow text-info absolute left-info-l top-info-t text-left w-info font-normal leading-info transform scale-x-106 scale-y-100 origin-left whitespace-normal text-shadow-none text-dark"
-                >{infoMsg}</div>
-            </> : <>
-                <div
-                    id="current-noreport"
-                    className="font-interstate2 font-semibold text-current-noreport absolute top-current-noreport-t left-current-noreport-l text-left w-current-noreport leading-none tracking-current-noreport transform scale-x-110 scale-y-100 text-shadow-noreport origin-left text-dark"
-                >no report</div>
-            </>}
-        </div>
-    );
+  return (
+    <div
+      id="current-conditions"
+      className="font-interstate absolute top-current-t left-0 h-current w-current text-left z-current"
+    >
+      {!Number.isNaN(temp) ? (
+        <>
+          <div
+            id="current-now"
+            className="text-now absolute top-now-t left-now-l tracking-now text-left transform scale-x-105 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-right text-dark z-now"
+          >
+            now
+          </div>
+          <div
+            id="current-nowwide"
+            className="text-now absolute top-now-t left-nowwide-l tracking-now text-left transform scale-x-105 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-dark"
+          >
+            now
+          </div>
+          <div
+            id="current-temp"
+            className="text-temp absolute top-temp-t -left-temp-l text-center w-full transform scale-x-102-5 scale-y-100 origin-left font-interstate font-bold text-shadow-none text-dark"
+          >
+            {temp.toString() + " °C"}
+          </div>
+          <div
+            id="current-info"
+            className="font-parrow text-info absolute left-info-l top-info-t text-left w-info font-normal leading-info transform scale-x-106 scale-y-100 origin-left whitespace-normal text-shadow-none text-dark"
+          >
+            {infoMsg}
+          </div>
+        </>
+      ) : (
+        <>
+          <div
+            id="current-noreport"
+            className="font-interstate2 font-semibold text-current-noreport absolute top-current-noreport-t left-current-noreport-l text-left w-current-noreport leading-none tracking-current-noreport transform scale-x-110 scale-y-100 text-shadow-noreport origin-left text-dark"
+          >
+            no report
+          </div>
+        </>
+      )}
+    </div>
+  );
 };
 
 export default Current;

components/DateTime.tsx

@@ -1,46 +1,62 @@
 import * as React from "react";
 
 interface DateTimeProps {
-    tz: string
+  tz: string;
 }
 
 const DateTime = ({ tz }: DateTimeProps) => {
-    const [date, setDate] = React.useState<string>("Jan 01");
-    const [time, setTime] = React.useState<string>("12:00:00pm");
-
-    const updateTime = () => {
-        const date = new Date();
-
-        const formatDate = date.toString().slice(4, 10).trimEnd();
-        const formatTime = date.toLocaleTimeString("en-US", {
-            hour: "numeric",
-            hour12: true,
-            minute: "numeric",
-            second: "numeric",
-            timeZone: tz
-        }).replace(/ /g, "").toLowerCase();
-
-        setDate(formatDate);
-        setTime(formatTime);
-    };
-
-    React.useEffect(() => {
-        let interval: NodeJS.Timeout;
-
-        if (tz !== "") {
-            updateTime();
-            interval = setInterval(updateTime, 500);
-        }
-
-        return () => clearInterval(interval);
-    }, [tz]);
-
-    return (
-        <div id="date-time" className="absolute top-date-time-t w-date-time font-interstate font-bold text-shadow-none text-right text-dark">
-            <div id="date" className="font-interstate-mono text-date leading-date font-bold text-shadow-none text-right text-dark">{date}</div>
-            <div id="time" className="font-interstate-mono text-date leading-date font-bold text-shadow-none text-right text-dark">{time}</div>
-        </div>
-    );
+  const [date, setDate] = React.useState<string>("Jan 01");
+  const [time, setTime] = React.useState<string>("12:00:00pm");
+
+  const updateTime = () => {
+    const date = new Date();
+
+    const formatDate = date.toString().slice(4, 10).trimEnd();
+    const formatTime = date
+      .toLocaleTimeString("en-US", {
+        hour: "numeric",
+        hour12: true,
+        minute: "numeric",
+        second: "numeric",
+        timeZone: tz,
+      })
+      .replace(/ /g, "")
+      .toLowerCase();
+
+    setDate(formatDate);
+    setTime(formatTime);
+  };
+
+  React.useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (tz !== "") {
+      updateTime();
+      interval = setInterval(updateTime, 500);
+    }
+
+    return () => clearInterval(interval);
+  }, [tz]);
+
+  return (
+    <div
+      id="date-time"
+      className="absolute top-date-time-t w-date-time font-interstate font-bold text-shadow-none text-right text-dark"
+    >
+      <div
+        id="date"
+        className="font-interstate-mono text-date leading-date font-bold text-shadow-none text-right text-dark"
+      >
+        {date}
+      </div>
+      <div
+        id="time"
+        className="font-interstate-mono text-date leading-date font-bold text-shadow-none text-right text-dark"
+      >
+        {time}
+      </div>
+    </div>
+  );
 };
 
 export default DateTime;