fix: replace placeholder alt text on people portraits

src/components/ScalingIframe/index.tsx

@@ -9,6 +9,8 @@ export const ScalingIframe = ({
 }) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const [scale, setScale] = useState(1);
+  const [error, setError] = useState(false);
+
   useLayoutEffect(() => {
     const fitToParent = () => {
       const iframe = iframeRef.current;
@@ -24,10 +26,56 @@ export const ScalingIframe = ({
     return () => window.removeEventListener("resize", fitToParent);
   }, [width]);
 
+  const handleError = () => {
+    setError(true);
+  };
+
+  if (error) {
+    return (
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f0f0f0",
+          color: "#333",
+          fontSize: "16px",
+          textAlign: "center",
+          padding: "20px",
+        }}
+      >
+        <div>
+          <p>Unable to load embedded content</p>
+          <p style={{ fontSize: "14px", marginTop: "10px" }}>
+            Please visit{" "}
+            <a
+              href={props.src?.replace("/embed", "")}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "#d63384" }}
+            >
+              the original sketch
+            </a>
+            {" "}on OpenProcessing
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <iframe
       width={width}
       {...props}
+      sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
+      allow="fullscreen; clipboard-write"
+      loading="lazy"
+      onError={handleError}
       style={{
         position: "absolute",
         top: 0,

src/content/people/en/kenneth-lim.yaml

@@ -2,7 +2,7 @@ name: Kenneth Lim
 url: https://limzykenneth.com/
 category: mentor
 image: ../images/kenneth-lim.jpeg
-imageAlt: WRITE ALT TEXT HERE
+imageAlt: Portrait of Kenneth Lim
 role: p5.js Mentor, 2023-present
 order: 4
 blurb: >

src/content/people/en/stalgia-grigg.yaml

@@ -1,7 +1,7 @@
 name: Stalgia Grigg
 category: alumni
 image: ../images/stalgia-grigg.png
-imageAlt: WRITE ALT TEXT HERE
+imageAlt: Portrait of Stalgia Grigg
 url: https://stalgiagrigg.name/
 role: p5.js Fellow 2019
 order: 9

src/layouts/SketchLayout.astro

@@ -84,6 +84,9 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
             src={makeSketchEmbedUrl(sketchIdNumber)}
             width="100%"
             height="100%"
+            sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
+            allow="fullscreen; clipboard-write"
+            loading="lazy"
             style={{
               position: "absolute",
               top: 0,