prepare app migration to db.lasereverything.net
- remove hardcoded makearmy.io references - convert utilities to relative paths - fix external link detection - add svgnest middleware rule - update background remover navigation
This commit is contained in:
parent
e08d4d81b3
commit
3614acd297
3 changed files with 208 additions and 73 deletions
|
|
@ -6,11 +6,11 @@ import { useRouter, useSearchParams } from "next/navigation";
|
|||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Item = {
|
||||
key: string; // used in ?t=
|
||||
key: string; // used in ?t=
|
||||
label: string;
|
||||
note?: string;
|
||||
icon?: string; // optional icon (public/images/utils/<icon>)
|
||||
href?: string; // optional absolute URL (used if no component)
|
||||
icon?: string; // optional icon (public/images/utils/<icon>)
|
||||
href?: string; // optional absolute URL (used if no component)
|
||||
component?: React.ComponentType<{ embedded?: boolean }>;
|
||||
};
|
||||
|
||||
|
|
@ -19,10 +19,9 @@ const BackgroundRemoverPanel = dynamic(
|
|||
() => import("@/components/utilities/BackgroundRemoverPanel"),
|
||||
{ ssr: false }
|
||||
);
|
||||
const SVGNestPanel = dynamic(
|
||||
() => import("@/components/utilities/SVGNestPanel"),
|
||||
{ ssr: false }
|
||||
);
|
||||
const SVGNestPanel = dynamic(() => import("@/components/utilities/SVGNestPanel"), {
|
||||
ssr: false,
|
||||
});
|
||||
const LaserToolkitSwitcher = dynamic(
|
||||
() => import("@/components/portal/LaserToolkitSwitcher"),
|
||||
{ ssr: false }
|
||||
|
|
@ -34,33 +33,99 @@ const FileBrowserPanel = dynamic(
|
|||
);
|
||||
|
||||
const ITEMS: Item[] = [
|
||||
{ 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" },
|
||||
{
|
||||
key: "laser-toolkit",
|
||||
label: "Laser Toolkit",
|
||||
note: "convert laser settings, interval and more",
|
||||
icon: "toolkit.png",
|
||||
component: LaserToolkitSwitcher,
|
||||
href: "/laser-toolkit",
|
||||
},
|
||||
{
|
||||
key: "files",
|
||||
label: "File Server",
|
||||
note: "download from our file explorer",
|
||||
icon: "fs.png",
|
||||
component: FileBrowserPanel,
|
||||
href: "/files",
|
||||
},
|
||||
{
|
||||
key: "svgnest",
|
||||
label: "SVGnest",
|
||||
note: "automatically nests parts and exports svg",
|
||||
icon: "nest.png",
|
||||
component: SVGNestPanel,
|
||||
href: "/svgnest",
|
||||
},
|
||||
{
|
||||
key: "background-remover",
|
||||
label: "BG Remover",
|
||||
note: "open source background remover",
|
||||
icon: "bgrm.png",
|
||||
component: BackgroundRemoverPanel,
|
||||
href: "/background-remover",
|
||||
},
|
||||
|
||||
// These stay on makearmy (external services)
|
||||
{
|
||||
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) {
|
||||
if (!urlStr) return false;
|
||||
function isAbsoluteUrl(href: string) {
|
||||
return /^https?:\/\//i.test(href);
|
||||
}
|
||||
|
||||
/**
|
||||
* External if it's an absolute URL and NOT same-origin as the current site.
|
||||
* Relative paths are always internal.
|
||||
*/
|
||||
function isExternalHref(href?: string) {
|
||||
if (!href) return false;
|
||||
if (!isAbsoluteUrl(href)) return false;
|
||||
|
||||
try {
|
||||
const u = new URL(urlStr);
|
||||
return u.hostname !== "makearmy.io";
|
||||
const u = new URL(href);
|
||||
if (typeof window === "undefined") return true;
|
||||
return u.origin !== window.location.origin;
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function toOnsitePath(urlStr: string): string {
|
||||
/**
|
||||
* If href is absolute AND same-origin, convert it to a site-relative path.
|
||||
* Otherwise return as-is.
|
||||
*/
|
||||
function toSameOriginPath(href: string) {
|
||||
if (!isAbsoluteUrl(href)) return href;
|
||||
|
||||
try {
|
||||
const u = new URL(urlStr);
|
||||
if (u.hostname === "makearmy.io") {
|
||||
const u = new URL(href);
|
||||
if (typeof window === "undefined") return href;
|
||||
if (u.origin === window.location.origin) {
|
||||
return `${u.pathname}${u.search}${u.hash}`;
|
||||
}
|
||||
} catch {}
|
||||
return urlStr;
|
||||
return href;
|
||||
}
|
||||
|
||||
function Panel({ item }: { item: Item }) {
|
||||
|
|
@ -74,18 +139,25 @@ function Panel({ item }: { item: Item }) {
|
|||
);
|
||||
}
|
||||
|
||||
const external = isExternal(item.href);
|
||||
const href = item.href || "/";
|
||||
const external = isExternalHref(href);
|
||||
|
||||
if (external) {
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<a href={item.href} target="_blank" rel="noopener noreferrer" className="underline">
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Open {item.label}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const src = toOnsitePath(item.href || "/");
|
||||
const src = toSameOriginPath(href);
|
||||
return (
|
||||
<iframe
|
||||
key={src}
|
||||
|
|
@ -105,11 +177,11 @@ export default function UtilitySwitcher() {
|
|||
|
||||
const activeKey = useMemo(() => {
|
||||
const t = (sp.get("t") || ITEMS[0].key).toLowerCase();
|
||||
return ITEMS.some(i => i.key === t) ? t : ITEMS[0].key;
|
||||
return ITEMS.some((i) => i.key === t) ? t : ITEMS[0].key;
|
||||
}, [sp]);
|
||||
|
||||
const activeItem = useMemo(
|
||||
() => ITEMS.find(i => i.key === activeKey) || ITEMS[0],
|
||||
() => ITEMS.find((i) => i.key === activeKey) || ITEMS[0],
|
||||
[activeKey]
|
||||
);
|
||||
|
||||
|
|
@ -119,22 +191,25 @@ export default function UtilitySwitcher() {
|
|||
router.replace(`/portal/utilities?${q.toString()}`, { scroll: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Optional auto-open behavior for external tools when selected via URL (?t=...).
|
||||
* RECOMMENDED: keep this off to avoid popup blockers / surprise tabs.
|
||||
*/
|
||||
useEffect(() => {
|
||||
const item = activeItem;
|
||||
if (!item) return;
|
||||
if (!item?.href) return;
|
||||
if (item.component) return;
|
||||
const external = isExternal(item.href);
|
||||
if (!external) return;
|
||||
if (!isExternalHref(item.href)) return;
|
||||
|
||||
if (openedRef.current === item.key) return;
|
||||
openedRef.current = item.key;
|
||||
|
||||
const AUTO_OPEN_ON_FIRST_PAINT = true;
|
||||
const AUTO_OPEN_ON_FIRST_PAINT = false;
|
||||
if (AUTO_OPEN_ON_FIRST_PAINT || !firstPaint) {
|
||||
window.open(item.href!, "_blank", "noopener,noreferrer");
|
||||
window.open(item.href, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [activeItem?.key, activeItem?.href]);
|
||||
}, [activeItem?.key]);
|
||||
|
||||
useEffect(() => {
|
||||
setFirstPaint(false);
|
||||
|
|
@ -146,9 +221,10 @@ export default function UtilitySwitcher() {
|
|||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
{ITEMS.map((it) => {
|
||||
const isInline = Boolean(it.component);
|
||||
const external = !isInline && isExternal(it.href);
|
||||
const external = !isInline && isExternalHref(it.href);
|
||||
const iconSrc = it.icon ? `/images/utils/${it.icon}` : null;
|
||||
const isActive = it.key === activeKey;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={it.key}
|
||||
|
|
@ -160,7 +236,9 @@ export default function UtilitySwitcher() {
|
|||
}}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition",
|
||||
isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
title={it.note || it.label}
|
||||
>
|
||||
|
|
@ -177,7 +255,9 @@ export default function UtilitySwitcher() {
|
|||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<span className="truncate">{it.label}</span>
|
||||
|
||||
{!isInline && external && (
|
||||
<span className="rounded bg-muted px-1 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
new tab
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue