From cf4a2c8ffe9adc85a000b760bc9a1df9156d9838 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner <73236783+michelroegl-brunner@users.noreply.github.com> Date: Thu, 24 Apr 2025 11:52:26 +0200 Subject: [PATCH] Feat: Add config path to website (#4005) * Feat: Add config path to website * Handel Responsive/Mobile --- .../public/json/podman-homeassistant.json | 2 +- frontend/public/json/watchyourlan.json | 2 +- .../src/app/json-editor/_schemas/schemas.ts | 1 + frontend/src/app/json-editor/page.tsx | 9 +++ .../app/scripts/_components/ScriptItem.tsx | 11 ++++ .../_components/ScriptItems/ConfigFile.tsx | 10 ++++ .../src/components/ui/config-copy-button.tsx | 55 +++++++++++++++++++ frontend/src/lib/types.ts | 1 + 8 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx create mode 100644 frontend/src/components/ui/config-copy-button.tsx diff --git a/frontend/public/json/podman-homeassistant.json b/frontend/public/json/podman-homeassistant.json index 503735ab2..22e38f839 100644 --- a/frontend/public/json/podman-homeassistant.json +++ b/frontend/public/json/podman-homeassistant.json @@ -12,7 +12,7 @@ "documentation": "https://www.home-assistant.io/docs/", "website": "https://www.home-assistant.io/", "logo": "https://raw.githubusercontent.com/selfhst/icons/refs/heads/main/svg/home-assistant.svg", - "config_path": "", + "config_path": "/var/lib/containers/storage/volumes/hass_config/_data", "description": "A standalone Podman container-based installation of Home Assistant Core means that the Home Assistant Core software is installed inside a container managed by Podman, separate from the host operating system. This provides a flexible and scalable solution for running the software, as the container can be easily moved between host systems or isolated from other processes for security. Podman is a popular open-source tool for managing containers that is similar to Docker, but designed for use on Linux systems without a daemon.\r\n\r\n\ud83d\udec8 If the LXC is created Privileged, the script will automatically set up USB passthrough.", "install_methods": [ { diff --git a/frontend/public/json/watchyourlan.json b/frontend/public/json/watchyourlan.json index ce537a82c..3bd33ad1d 100644 --- a/frontend/public/json/watchyourlan.json +++ b/frontend/public/json/watchyourlan.json @@ -12,7 +12,7 @@ "documentation": null, "website": "https://github.com/aceberg/WatchYourLAN", "logo": "https://raw.githubusercontent.com/selfhst/icons/refs/heads/main/webp/watchyourlan.webp", - "config_path": "", + "config_path": "/data/config.yaml", "description": "WatchYourLAN is a lightweight network IP scanner with web GUI.", "install_methods": [ { diff --git a/frontend/src/app/json-editor/_schemas/schemas.ts b/frontend/src/app/json-editor/_schemas/schemas.ts index 9ffe8f3a1..63c676e6a 100644 --- a/frontend/src/app/json-editor/_schemas/schemas.ts +++ b/frontend/src/app/json-editor/_schemas/schemas.ts @@ -33,6 +33,7 @@ export const ScriptSchema = z.object({ documentation: z.string().nullable(), website: z.string().url().nullable(), logo: z.string().url().nullable(), + config_path: z.string(), description: z.string().min(1, "Description is required"), install_methods: z.array(InstallMethodSchema).min(1, "At least one install method is required"), default_credentials: z.object({ diff --git a/frontend/src/app/json-editor/page.tsx b/frontend/src/app/json-editor/page.tsx index 1789b0a29..fd1a6e966 100644 --- a/frontend/src/app/json-editor/page.tsx +++ b/frontend/src/app/json-editor/page.tsx @@ -32,6 +32,7 @@ const initialScript: Script = { privileged: false, interface_port: null, documentation: null, + config_path: "", website: null, logo: null, description: "", @@ -174,6 +175,14 @@ export default function JSONGenerator() { onChange={(e) => updateScript("logo", e.target.value || null)} /> +
+ + updateScript("config_path", e.target.value || null)} + /> +
diff --git a/frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx b/frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx new file mode 100644 index 000000000..0f4f43fb0 --- /dev/null +++ b/frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx @@ -0,0 +1,10 @@ +import ConfigCopyButton from "@/components/ui/config-copy-button"; +import { Script } from "@/lib/types"; + +export default function ConfigFile({ item }: { item: Script }) { + return ( +
+ {item.config_path ? item.config_path : "No config path set"} +
+ ); +} diff --git a/frontend/src/components/ui/config-copy-button.tsx b/frontend/src/components/ui/config-copy-button.tsx new file mode 100644 index 000000000..45fc2e92d --- /dev/null +++ b/frontend/src/components/ui/config-copy-button.tsx @@ -0,0 +1,55 @@ +"use client"; +import { cn } from "@/lib/utils"; +import { CheckIcon, ClipboardIcon } from "lucide-react"; +import { useEffect, useState } from "react"; +import { toast } from "sonner"; +import { Card } from "./card"; + +export default function CodeCopyButton({ + children, +}: { + children: React.ReactNode; +}) { + const [hasCopied, setHasCopied] = useState(false); + const isMobile = window.innerWidth <= 640; + + useEffect(() => { + if (hasCopied) { + setTimeout(() => { + setHasCopied(false); + }, 2000); + } + }, [hasCopied]); + + const handleCopy = (type: string, value: any) => { + navigator.clipboard.writeText(value); + + setHasCopied(true); + + + // toast.success(`copied ${type} to clipboard`, { + // icon: , + // }); + }; + + return ( +
+ +
+ {!isMobile && children ? children : "Copy Config File Path"} +
+
handleCopy("install command", children)} + > + {hasCopied ? ( + + ) : ( + + )} + Copy +
+ +
+ ); +} diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index b6aa20b17..df9d4bf48 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -12,6 +12,7 @@ export type Script = { documentation: string | null; website: string | null; logo: string | null; + config_path: string; description: string; install_methods: { type: "default" | "alpine";