fix: enable OpenProcessing sketch embeds on detail pages

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/layouts/ReferenceItemLayout.astro

@@ -90,13 +90,13 @@ const { showBanner, englishUrl } = checkTranslationBanner(
   Astro.url.pathname,
   Astro.url.origin
 );
-// Normalizes malformed p5.* reference anchors (e.g. "#/p5.Element")
-// to proper reference routes ("/reference/p5/p5.Element/")
+// Normalizes malformed p5.* reference anchors (e.g. "#/p5.Element" or "#/p5/rectMode")
+// to proper reference routes ("/reference/p5/p5.Element/" or "/reference/p5/rectMode/")
 function normalizeP5ReferenceLinks(html: string | undefined): string | undefined {
   if (!html) return html;
   return html.replace(
-    /href="#\/(p5\.[^"]+)"/g,
-    'href="/reference/p5/$1/"'
+    /href="#\/p5([.\/][^"]+)"/g,
+    'href="/reference/p5$1/"'
   );
 }
 ---

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,