Add location slides and header scroller

.github/workflows/deploy.yml

@@ -13,9 +13,9 @@ jobs:
     if: ${{ !startsWith(github.event.head_commit.message, '[skip build]') }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v6
         with:
           version: latest
       - name: Install Vercel CLI
@@ -25,7 +25,7 @@ jobs:
       - name: Install Dependencies
         run: pnpm i --frozen-lockfile
       - name: Lint
-        run: pnpm run lint
+        run: pnpm exec eslint
       - name: Build Project Artifacts
         run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
       - name: Deploy Project Artifacts to Vercel

.github/workflows/preview-snapshot.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v6
         with:
           version: latest
       - name: Install Dependencies
@@ -26,11 +26,11 @@ jobs:
           NEXT_PUBLIC_IP_API_KEY: ${{ secrets.NEXT_PUBLIC_IP_API_KEY }}
           NEXT_PUBLIC_WEATHER_API_KEY: ${{ secrets.NEXT_PUBLIC_WEATHER_API_KEY }}
       - name: Upload Preview
-        uses: ryand56/r2-upload-action@v1.2
+        uses: ryand56/r2-upload-action@latest
         with:
           r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
           r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
           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/

.github/workflows/preview.yml

@@ -12,14 +12,14 @@ jobs:
     if: ${{ !startsWith(github.event.head_commit.message, '[skip build]') }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v6
         with:
           version: latest
       - name: Install Dependencies
         run: pnpm i --frozen-lockfile
       - name: Lint
-        run: pnpm run lint
+        run: pnpm exec eslint
       - name: Build
-        run: pnpm run build
+        run: pnpm run build

components/CCIcon.tsx

@@ -6,20 +6,13 @@ interface CCIconProps {
     windData: number
 }
 
-const CCIcon = ({ iconCode, windData }: CCIconProps) => {
-    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]);
+const CCIcon = ({ iconCode = 44, windData = 0 }: CCIconProps) => {
+    const icon = getIcon(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"
+            className="absolute left-conditions-icon-l w-conditions-icon h-conditions-icon bg-no-repeat bg-center bg-cover top-conditions-icon-t z-0"
             style={{ backgroundImage: `url(images/icons2010/${icon < 10 ? `0${icon}` : icon}.png)` }}
         />
     );

components/Current.tsx

@@ -7,29 +7,34 @@ interface CurrentProps {
 }
 
 const Current = ({ temp, info }: CurrentProps) => {
-    const [cycle, setCycle] = React.useState<string[]>([]);
+    const cycle = React.useMemo(() => {
+        if (!info || info.phrase === "") {
+            return [];
+        }
+
+        return [
+            `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}`
+        ];
+    }, [info]);
+
     const [idx, setIdx] = React.useState<number>(0);
-    const [infoMsg, setInfoMsg] = React.useState<string>("");
+    const infoMsg = cycle[idx] ?? "";
 
     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}`
-                ];
-
-                setCycle(tempCycle);
+                if (cycle.length === 0) return;
 
                 intervalTimer = setInterval(() => {
                     setIdx((idx) => {
-                        if (idx >= (tempCycle.length - 1)) {
+                        if (idx >= (cycle.length - 1)) {
                             return 0;
                         } else {
                             return idx + 1;
@@ -40,16 +45,7 @@ const Current = ({ temp, info }: CurrentProps) => {
         }
 
         return () => clearInterval(intervalTimer);
-    }, [info]);
-
-    React.useEffect(() => {
-        if (cycle) {
-            if (cycle.length > 0) {
-                const msg = cycle[idx];
-                setInfoMsg(msg);
-            }
-        }
-    }, [idx]);
+    }, [info, cycle.length]);
 
     return (
         <div id="current-conditions" className="font-interstate absolute top-current-t left-0 h-current w-current text-left z-current">

components/CustomMarquee/index.tsx

@@ -40,69 +40,59 @@ const CustomMarquee = ({
     onCycleComplete,
     children
 }: CustomMarqueeProps) => {
-    const [isMounted, setIsMounted] = React.useState<boolean>(false);
-
-    React.useEffect(() => {
-        setIsMounted(true);
-    }, []);
-
     const rgbaGradientColor = `rgba(${gradientColor[0]}, ${gradientColor[1]}, ${gradientColor[2]})`;
 
     return (
-        <>
-            {!isMounted ? null : (
+        <div
+            style={{
+                ...style,
+                ["--pause-on-hover" as string]: !play || pauseOnHover ? "paused" : "running",
+                ["--pause-on-click" as string]: !play || (pauseOnHover && !pauseOnClick) || pauseOnClick ? "paused" : "running"
+            }}
+            className={styles["marquee-container"] + (className !== "" ? ` ${className}` : "")}
+        >
+            {gradient && (
                 <div
                     style={{
-                        ...style,
-                        ["--pause-on-hover" as string]: !play || pauseOnHover ? "paused" : "running",
-                        ["--pause-on-click" as string]: !play || (pauseOnHover && !pauseOnClick) || pauseOnClick ? "paused" : "running"
+                        ["--gradient-color" as string]: `${rgbaGradientColor}, 1), ${rgbaGradientColor}, 0)`,
+                        ["--gradient-width" as string]:
+                        typeof gradientWidth === "number"
+                            ? `${gradientWidth}px`
+                            : gradientWidth,
                     }}
-                    className={styles["marquee-container"] + (className !== "" ? ` ${className}` : "")}
-                >
-                    {gradient && (
-                        <div
-                            style={{
-                                ["--gradient-color" as string]: `${rgbaGradientColor}, 1), ${rgbaGradientColor}, 0)`,
-                                ["--gradient-width" as string]:
-                                typeof gradientWidth === "number"
-                                    ? `${gradientWidth}px`
-                                    : gradientWidth,
-                            }}
-                            className={styles.overlay}
-                        />
-                    )}
-                    <div
-                        style={{
-                          ["--play" as string]: play ? "running" : "paused",
-                          ["--direction" as string]:
-                            direction === "left" ? "normal" : "reverse",
-                          ["--duration" as string]: `${duration}s`,
-                          ["--delay" as string]: `${delay}s`,
-                          ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
-                        }}
-                        className={styles.marquee}
-                        onAnimationIteration={onCycleComplete}
-                        onAnimationEnd={onFinish}
-                    >
-                        {children}
-                    </div>
-                    <div
-                        style={{
-                        ["--play" as string]: play ? "running" : "paused",
-                        ["--direction" as string]:
-                            direction === "left" ? "normal" : "reverse",
-                        ["--duration" as string]: `${duration}s`,
-                        ["--delay" as string]: `${delay}s`,
-                        ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
-                        }}
-                        className={styles.marquee}
-                        aria-hidden="true"
-                    >
-                        {children}
-                    </div>
-                </div>
+                    className={styles.overlay}
+                />
             )}
-        </>
+            <div
+                style={{
+                  ["--play" as string]: play ? "running" : "paused",
+                  ["--direction" as string]:
+                    direction === "left" ? "normal" : "reverse",
+                  ["--duration" as string]: `${duration}s`,
+                  ["--delay" as string]: `${delay}s`,
+                  ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
+                }}
+                className={styles.marquee}
+                onAnimationIteration={onCycleComplete}
+                onAnimationEnd={onFinish}
+            >
+                {children}
+            </div>
+            <div
+                style={{
+                ["--play" as string]: play ? "running" : "paused",
+                ["--direction" as string]:
+                    direction === "left" ? "normal" : "reverse",
+                ["--duration" as string]: `${duration}s`,
+                ["--delay" as string]: `${delay}s`,
+                ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
+                }}
+                className={styles.marquee}
+                aria-hidden="true"
+            >
+                {children}
+            </div>
+        </div>
     );
 };
 

components/DateTime.tsx

@@ -1,36 +1,47 @@
 import * as React from "react";
+import { useRouter } from "next/router";
 
 interface DateTimeProps {
     tz: string
 }
 
 const DateTime = ({ tz }: DateTimeProps) => {
+    const router = useRouter();
     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);
+    const stdTimezoneOffset = (date: Date) => {
+        var jan = new Date(date.getFullYear(), 0, 1);
+        var jul = new Date(date.getFullYear(), 6, 1);
+        return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
+    };
+
+    const isDstObserved = (date: Date) => {
+        return date.getTimezoneOffset() < stdTimezoneOffset(date);
     };
 
     React.useEffect(() => {
-        let interval: NodeJS.Timeout;
+        if (tz === "") return;
+
+        const update = () => {
+            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);
+        };
+
+        update();
 
-        if (tz !== "") {
-            updateTime();
-            interval = setInterval(updateTime, 500);
-        }
+        const interval = setInterval(update, 500);
 
         return () => clearInterval(interval);
     }, [tz]);