Optimize Netlify deployments and bust image caches

Author: Llewellyn500

.github/workflows/deploy-to-netlify.yml

@@ -1,10 +1,11 @@
 name: Deploy to Netlify
 
 on:
-  push:
-    branches: [main]
-    paths-ignore:
-      - "functions/**"
+  workflow_dispatch:
+
+concurrency:
+  group: netlify-production-${{ github.repository }}
+  cancel-in-progress: true
 
 permissions:
   contents: read
@@ -34,8 +35,13 @@ jobs:
       - name: Install dependencies
         run: bun install
 
-      - name: Build project
-        run: bun run build
+      - name: Cache Next.js build
+        uses: actions/cache@v4
+        with:
+          path: .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('bun.lockb', 'package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-
 
       # Use npm for netlify-cli installation instead of bun
       - name: Install Netlify CLI
@@ -47,10 +53,3 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NEXT_PUBLIC_NETLIFY: "true" # Optional but recommended
-
-      - name: Cache Next.js build
-        uses: actions/cache@v3
-        with:
-          path: |
-            .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}

app/admin/articles/[id]/page.tsx

@@ -121,10 +121,14 @@ export default function EditArticlePage() {
         const { storage } = await import("@/lib/firebase");
 
         const storageRef = ref(storage, `Articles/${id}/thumbnail.webp`);
-        await uploadBytes(storageRef, thumbnailFile);
+        await uploadBytes(storageRef, thumbnailFile, {
+          contentType: "image/webp",
+          cacheControl: "public,max-age=300",
+        });
         const url = await getDownloadURL(storageRef);
 
-        setImg(url);
+        const versionedURL = `${url}${url.includes("?") ? "&" : "?"}v=${Date.now()}`;
+        setImg(versionedURL);
         const newAlt = `${title || "Article"} thumbnail`;
         setImgAlt(newAlt);
         toast({ title: "Thumbnail uploaded", variant: "success" });

app/admin/articles/new/page.tsx

@@ -118,10 +118,14 @@ export default function NewArticlePage() {
         const { storage } = await import("@/lib/firebase");
 
         const storageRef = ref(storage, `Articles/${articleId}/thumbnail.webp`);
-        await uploadBytes(storageRef, thumbnailFile);
+        await uploadBytes(storageRef, thumbnailFile, {
+          contentType: "image/webp",
+          cacheControl: "public,max-age=300",
+        });
         const url = await getDownloadURL(storageRef);
 
-        setImg(url);
+        const versionedURL = `${url}${url.includes("?") ? "&" : "?"}v=${Date.now()}`;
+        setImg(versionedURL);
         const newAlt = `${title || "Article"} thumbnail`;
         setImgAlt(newAlt);
         toast({ title: "Thumbnail uploaded", variant: "success" });

app/admin/profile/page.tsx

@@ -427,14 +427,18 @@ export default function ProfilePage() {
     setUploadingAvatar(true)
     try {
       const storageRef = ref(storage, `avatars/team/${auth.currentUser.uid}.webp`)
-      const uploadTask = await uploadBytes(storageRef, croppedBlob)
+      const uploadTask = await uploadBytes(storageRef, croppedBlob, {
+        contentType: "image/webp",
+        cacheControl: "public,max-age=300",
+      })
       const downloadURL = await getDownloadURL(uploadTask.ref)
+      const versionedURL = `${downloadURL}${downloadURL.includes("?") ? "&" : "?"}v=${Date.now()}`
 
-      setProfile((prev) => ({ ...prev, avatar: downloadURL }))
+      setProfile((prev) => ({ ...prev, avatar: versionedURL }))
 
       // Auto-save the profile with new avatar
       const userRef = doc(db, "authors", auth.currentUser.uid)
-      await updateDoc(userRef, { avatar: downloadURL })
+      await updateDoc(userRef, { avatar: versionedURL })
 
       toast({
         title: "Avatar updated",

app/admin/team/[id]/page.tsx

@@ -305,22 +305,26 @@ export default function EditTeamMemberPage() {
           .replace(/(^-|-$)+/g, "") || "unknown-member";
 
       const storageRef = ref(storage, `avatars/team/${nameSlug}.webp`);
-      const uploadTask = await uploadBytes(storageRef, croppedBlob);
+      const uploadTask = await uploadBytes(storageRef, croppedBlob, {
+        contentType: "image/webp",
+        cacheControl: "public,max-age=300",
+      });
       const downloadURL = await getDownloadURL(uploadTask.ref);
+      const versionedURL = `${downloadURL}${downloadURL.includes("?") ? "&" : "?"}v=${Date.now()}`;
 
       const newImgAlt = `${member.name} profile pic, a member of L.A.P`;
 
       // Update local state
       setMember((prev) =>
-        prev ? { ...prev, avatar: downloadURL, imgAlt: newImgAlt } : null,
+        prev ? { ...prev, avatar: versionedURL, imgAlt: newImgAlt } : null,
       );
-      setAvatarPreview(downloadURL);
+      setAvatarPreview(versionedURL);
 
       // Auto-save to Firestore
       if (id) {
         const ref = doc(db, "authors", id);
         await updateDoc(ref, {
-          avatar: downloadURL,
+          avatar: versionedURL,
           imgAlt: newImgAlt,
         });
       }