91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
|
||
/**
|
||
* SVGNest panel – same-origin iframe wrapper (clean, frameless).
|
||
* Hides the legacy page’s heading/tagline and the "Back to Main" link.
|
||
*/
|
||
export default function SVGNestPanel() {
|
||
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
||
const [ready, setReady] = useState(false);
|
||
const [err, setErr] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
const el = iframeRef.current;
|
||
if (!el) return;
|
||
|
||
const onLoad = () => {
|
||
setReady(true);
|
||
|
||
// Tidy up the embedded vendor page (no edits to files on disk)
|
||
try {
|
||
const doc = el.contentDocument;
|
||
if (!doc) return;
|
||
|
||
// 1) Hide the first H1 (their big title)
|
||
const h1 = doc.querySelector("h1");
|
||
if (h1) (h1 as HTMLElement).style.display = "none";
|
||
|
||
// 2) Hide the tagline "automatically nests parts and exports svg"
|
||
const all = Array.from(doc.querySelectorAll<HTMLElement>("body *"));
|
||
for (const n of all) {
|
||
const t = (n.textContent || "").trim().toLowerCase();
|
||
if (t.includes("automatically nests parts") && t.includes("exports svg")) {
|
||
n.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// 3) Hide "Back to Main" link(s)
|
||
const anchors = Array.from(doc.querySelectorAll<HTMLAnchorElement>("a"));
|
||
for (const a of anchors) {
|
||
const text = (a.textContent || "").trim().toLowerCase();
|
||
const href = a.getAttribute("href") || "";
|
||
const isBackText = text === "back to main" || text === "← back to main";
|
||
const isRootHref =
|
||
href === "/" ||
|
||
/^https?:\/\/[^/]+\/?$/.test(href); // absolute site root
|
||
if (isBackText || isRootHref) {
|
||
(a as HTMLElement).style.display = "none";
|
||
}
|
||
}
|
||
|
||
// 4) Tighten top spacing a touch
|
||
(doc.body as HTMLElement).style.marginTop = "4px";
|
||
} catch {
|
||
// same-origin, so this *should* succeed; ignore if not
|
||
}
|
||
};
|
||
|
||
const onError = () => setErr("Failed to load /svgnest/index.html");
|
||
|
||
el.addEventListener("load", onLoad);
|
||
el.addEventListener("error", onError);
|
||
return () => {
|
||
el.removeEventListener("load", onLoad);
|
||
el.removeEventListener("error", onError);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="w-full">
|
||
{!ready && !err && (
|
||
<div className="mb-2 text-sm text-zinc-400">Loading SVGnest…</div>
|
||
)}
|
||
{err && (
|
||
<div className="mb-2 rounded border border-rose-600/40 bg-rose-600/10 p-3 text-sm">
|
||
Couldn’t load SVGnest: {err}
|
||
</div>
|
||
)}
|
||
|
||
{/* Frameless iframe (no border, no wrapper frame) */}
|
||
<iframe
|
||
ref={iframeRef}
|
||
src="/svgnest/index.html"
|
||
title="SVGNest"
|
||
className="w-full"
|
||
style={{ height: "72vh", background: "transparent", border: "none" }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|