svgnest render fix
This commit is contained in:
parent
13879407f7
commit
582cafca0b
2 changed files with 48 additions and 110 deletions
|
|
@ -1,4 +1,3 @@
|
|||
// components/portal/UtilitySwitcher.tsx
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
|
@ -35,71 +34,13 @@ const FileBrowserPanel = dynamic(
|
|||
);
|
||||
|
||||
const ITEMS: Item[] = [
|
||||
// ✅ Laser Toolkit now renders inline with sub-tabs
|
||||
{
|
||||
key: "laser-toolkit",
|
||||
label: "Laser Toolkit",
|
||||
note: "convert laser settings, interval and more",
|
||||
icon: "toolkit.png",
|
||||
component: LaserToolkitSwitcher,
|
||||
href: "https://makearmy.io/laser-toolkit", // optional; component takes precedence
|
||||
},
|
||||
|
||||
// ✅ File Server inline (no iframe)
|
||||
{
|
||||
key: "files",
|
||||
label: "File Server",
|
||||
note: "download from our file explorer",
|
||||
icon: "fs.png",
|
||||
component: FileBrowserPanel,
|
||||
href: "https://makearmy.io/files",
|
||||
},
|
||||
|
||||
// Buying Guide moved to main portal tab — remove here to avoid duplication
|
||||
// { key: "buying-guide", ... }
|
||||
|
||||
// ✅ SVGnest inline (micro-frontend wrapper)
|
||||
{
|
||||
key: "svgnest",
|
||||
label: "SVGnest",
|
||||
note: "automatically nests parts and exports svg",
|
||||
icon: "nest.png",
|
||||
component: SVGNestPanel,
|
||||
href: "https://makearmy.io/svgnest",
|
||||
},
|
||||
|
||||
// ✅ Background Remover inline
|
||||
{
|
||||
key: "background-remover",
|
||||
label: "BG Remover",
|
||||
note: "open source background remover",
|
||||
icon: "bgrm.png",
|
||||
component: BackgroundRemoverPanel,
|
||||
href: "https://makearmy.io/background-remover",
|
||||
},
|
||||
|
||||
// Subdomains (new tab)
|
||||
{
|
||||
key: "picsur",
|
||||
label: "Picsur",
|
||||
note: "Simple Image Host",
|
||||
icon: "picsur.png",
|
||||
href: "https://images.makearmy.io",
|
||||
},
|
||||
{
|
||||
key: "privatebin",
|
||||
label: "PrivateBin",
|
||||
note: "Encrypted internet clipboard",
|
||||
icon: "privatebin.png",
|
||||
href: "https://paste.makearmy.io/",
|
||||
},
|
||||
{
|
||||
key: "forgejo",
|
||||
label: "Forgejo",
|
||||
note: "git for our community members",
|
||||
icon: "forgejo.png",
|
||||
href: "https://forge.makearmy.io",
|
||||
},
|
||||
{ key: "laser-toolkit", label: "Laser Toolkit", note: "convert laser settings, interval and more", icon: "toolkit.png", component: LaserToolkitSwitcher, href: "https://makearmy.io/laser-toolkit" },
|
||||
{ key: "files", label: "File Server", note: "download from our file explorer", icon: "fs.png", component: FileBrowserPanel, href: "https://makearmy.io/files" },
|
||||
{ key: "svgnest", label: "SVGnest", note: "automatically nests parts and exports svg", icon: "nest.png", component: SVGNestPanel, href: "https://makearmy.io/svgnest" },
|
||||
{ key: "background-remover", label: "BG Remover", note: "open source background remover", icon: "bgrm.png", component: BackgroundRemoverPanel, href: "https://makearmy.io/background-remover" },
|
||||
{ key: "picsur", label: "Picsur", note: "Simple Image Host", icon: "picsur.png", href: "https://images.makearmy.io" },
|
||||
{ key: "privatebin", label: "PrivateBin", note: "Encrypted internet clipboard", icon: "privatebin.png", href: "https://paste.makearmy.io/" },
|
||||
{ key: "forgejo", label: "Forgejo", note: "git for our community members", icon: "forge.png", href: "https://forge.makearmy.io" },
|
||||
];
|
||||
|
||||
function isExternal(urlStr: string | undefined) {
|
||||
|
|
@ -112,7 +53,6 @@ function isExternal(urlStr: string | undefined) {
|
|||
}
|
||||
}
|
||||
|
||||
/** For on-site URLs, convert absolute https://makearmy.io/path → /path for iframe src */
|
||||
function toOnsitePath(urlStr: string): string {
|
||||
try {
|
||||
const u = new URL(urlStr);
|
||||
|
|
@ -128,7 +68,7 @@ function Panel({ item }: { item: Item }) {
|
|||
const Cmp = item.component;
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{item.note ? <div className="text-sm opacity-70">{item.note}</div> : null}
|
||||
{/* Removed notes/headers to keep UI clean */}
|
||||
<Cmp embedded />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -138,16 +78,8 @@ function Panel({ item }: { item: Item }) {
|
|||
if (external) {
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
Opened <span className="font-medium">{item.label}</span> in a new tab.
|
||||
</div>
|
||||
<a
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Click here if it didn’t open.
|
||||
<a href={item.href} target="_blank" rel="noopener noreferrer" className="underline">
|
||||
Open {item.label}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -155,15 +87,13 @@ function Panel({ item }: { item: Item }) {
|
|||
|
||||
const src = toOnsitePath(item.href || "/");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{item.note ? <div className="text-sm opacity-70">{item.note}</div> : null}
|
||||
<iframe
|
||||
key={src}
|
||||
src={src}
|
||||
className="w-full h-[72vh] rounded-md border"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||
className="w-full"
|
||||
style={{ height: "72vh" }}
|
||||
// no sandbox; needs drag/drop etc.
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -212,6 +142,7 @@ export default function UtilitySwitcher() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{/* top buttons unchanged */}
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
{ITEMS.map((it) => {
|
||||
const isInline = Boolean(it.component);
|
||||
|
|
@ -257,9 +188,8 @@ export default function UtilitySwitcher() {
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border p-4">
|
||||
{/* ⛔️ removed the old border/padding frame here */}
|
||||
<Panel item={activeItem} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue