Merge branch 'master' into fix/event-page-performance

Author: saurabhraghuvanshii

.github/workflows/build-and-preview-site.yml

@@ -13,9 +13,17 @@ concurrency:
   group: preview-${{ github.event.pull_request.number || github.run_id }}
   cancel-in-progress: true
 
+defaults:
+  run:
+    shell: bash
+
 jobs:
   preview:
     runs-on: ubuntu-latest
+    outputs:
+      removed_prs_json: ${{ steps.prune-previews.outputs.removed_prs_json }}
+    env:
+      PREVIEW_RETENTION_LIMIT: 6
 
     steps:
 
@@ -67,15 +75,116 @@ jobs:
           action: auto
           comment: false
 
+      - name: Checkout gh-pages for preview retention
+        if: github.event.action != 'closed'
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          fetch-depth: 0
+          path: gh-pages-maintenance
+
+      - name: Prune old PR previews
+        id: prune-previews
+        if: github.event.action != 'closed'
+        run: |
+          cd gh-pages-maintenance
+          mkdir -p pr-preview
+          removed_prs=()
+
+          mapfile -t previews < <(
+            while IFS= read -r preview; do
+              timestamp="$(git log -1 --format=%ct -- "pr-preview/$preview" 2>/dev/null || echo 0)"
+              printf '%s %s\n' "$timestamp" "$preview"
+            done < <(find pr-preview -mindepth 1 -maxdepth 1 -type d -name 'pr-*' -printf '%f\n') \
+              | sort -nr \
+              | awk '{print $2}'
+          )
+
+          if (( ${#previews[@]} <= PREVIEW_RETENTION_LIMIT )); then
+            echo "removed_prs_json=[]" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          for preview in "${previews[@]:PREVIEW_RETENTION_LIMIT}"; do
+            rm -rf "pr-preview/$preview"
+            removed_prs+=("${preview#pr-}")
+          done
+
+          if git diff --quiet -- pr-preview; then
+            echo "removed_prs=" >> "$GITHUB_OUTPUT"
+            echo "removed_prs_json=[]" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add pr-preview
+          git commit -m "Prune old PR previews"
+          git push
+
+          echo "removed_prs=$(IFS=,; echo "${removed_prs[*]}")" >> "$GITHUB_OUTPUT"
+          echo "removed_prs_json=$(printf '%s\n' "${removed_prs[@]}" | jq -R . | jq -sc .)" >> "$GITHUB_OUTPUT"
+
       - name: Comment PR with Preview URL
         if: github.event.action != 'closed'
         uses: marocchino/sticky-pull-request-comment@v2
         with:
           header: pr-preview
           message: |
             🚀 Preview deployment: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-preview/pr-${{ github.event.pull_request.number }}/
+            > *Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment [here](https://github.com/${{ github.repository }}/actions/workflows/pages/pages-build-deployment)*
+
+      - name: Comment on pruned previews
+        if: github.event.action != 'closed' && steps.prune-previews.outputs.removed_prs_json != '[]'
+        uses: actions/github-script@v7
+        env:
+          REMOVED_PRS_JSON: ${{ steps.prune-previews.outputs.removed_prs_json }}
+          PREVIEW_RETENTION_LIMIT: ${{ env.PREVIEW_RETENTION_LIMIT }}
+        with:
+          script: |
+            const removedPrs = JSON.parse(process.env.REMOVED_PRS_JSON);
+            const retentionLimit = process.env.PREVIEW_RETENTION_LIMIT;
+            const header = "pr-preview";
+            const marker = `<!-- Sticky Pull Request Comment${header} -->`;
+
+            for (const prNumber of removedPrs) {
+              const body =
+                `Preview deployment for PR #${prNumber} removed.\n\n` +
+                `This PR preview was automatically pruned because we keep only the ${retentionLimit} most recently updated previews on GitHub Pages to stay within deployment size limits.\n\n` +
+                `If needed, push a new commit to this PR to generate a fresh preview.\n` +
+                `${marker}`;
+
+              const { data: comments } = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: Number(prNumber),
+                per_page: 100,
+              });
+
+              const existingComment = [...comments].reverse().find((comment) =>
+                comment.user?.login === "github-actions[bot]" &&
+                comment.body?.includes(marker)
+              );
+
+              if (existingComment) {
+                await github.rest.issues.updateComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  comment_id: existingComment.id,
+                  body,
+                });
+                continue;
+              }
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: Number(prNumber),
+                body,
+              });
+            }
 
-      - name: Cleanup PR preview
+      - name: Cleanup PR preview on close
         if: github.event.action == 'closed'
         uses: rossjrw/[email protected]
         with:

src/sections/Kanvas/index.js

@@ -1,13 +1,12 @@
 import React from "react";
+import { StaticImage } from "gatsby-plugin-image";
 import KanvasWrapper from "./kanvas.style";
 import { Container } from "../../reusecore/Layout";
 import Features from "../../components/Features-carousel";
 import KanvasModes from "./kanvas-modes";
 import Catalog from "./kanvas-catalog";
 import Platform from "./kanvas-platform";
 import KanvasBanner from "./kanvas_banner";
-import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp";
-import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp";
 import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures";
 import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures";
 import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures";
@@ -28,9 +27,6 @@ import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/
 import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg";
 import { ReactComponent as Collab4 } from "./FeaturesSection/Collaborate/images/collab4-colorMode.svg";
 
-import Avatar1 from "./FeaturesSection/Collaborate/images/avatar1.webp";
-import Avatar2 from "./FeaturesSection/Collaborate/images/avatar2.webp";
-import Avatar3 from "./FeaturesSection/Collaborate/images/avatar3.webp";
 import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
 import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
 import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
@@ -56,12 +52,10 @@ const Kanvas = (props) => {
                   description:
                     "Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Collaborate wtih teammates using this self-service engineering platform. Using GitOps? Integrate advanced performance analysis into your pipeline.",
                   content: (
-                    <img
-                      src={designerImage}
+                    <StaticImage
+                      src="../../assets/images/kanvas/KanvasDesigner.webp"
                       alt="Designer Mode"
                       className="designer-img modes-image"
-                      width="100%"
-                      height="auto"
                       style={{ aspectRatio: "16/9" }}
                     />
                   ),
@@ -71,12 +65,10 @@ const Kanvas = (props) => {
                   description:
                     "Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
                   content: (
-                    <img
-                      src={visualizerImage}
+                    <StaticImage
+                      src="../../assets/images/kanvas/KanvasVisualizer.webp"
                       alt="Operator Mode"
                       className="modes-image"
-                      width="100%"
-                      height="auto"
                       style={{ aspectRatio: "16/9" }}
                     />
                   ),
@@ -165,13 +157,13 @@ const Kanvas = (props) => {
                   description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-1"
-                        src={Avatar1}
+                        src="./FeaturesSection/Collaborate/images/avatar1.webp"
                         alt=""
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab1 id="collaborate-image1" alt="collaborate-image1" />
                     </>
@@ -187,13 +179,13 @@ const Kanvas = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-2"
-                        src={Avatar2}
+                        src="./FeaturesSection/Collaborate/images/avatar2.webp"
                         alt="avatar-2"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab2 id="collaborate-image2" alt="collaborate-image2" />
                     </>
@@ -204,13 +196,13 @@ const Kanvas = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-3"
-                        src={Avatar3}
+                        src="./FeaturesSection/Collaborate/images/avatar3.webp"
                         alt="avatar-3"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab3 id="collaborate-image3" alt="collaborate-image3" />
                     </>
@@ -225,13 +217,13 @@ const Kanvas = (props) => {
                   description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-3"
-                        src={Avatar3}
+                        src="./FeaturesSection/Collaborate/images/avatar3.webp"
                         alt="avatar-3"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab4 id="collaborate-image4" alt="collaborate-image4" />
                     </>