Feat: Add config path to website (#4005)

* Feat: Add config path to website

* Handel Responsive/Mobile

Author: michelroegl-brunner

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": [
         {

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": [
         {

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({

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)}
             />
           </div>
+          <div>
+            <Label>Config Path</Label>
+            <Input
+              placeholder="Path to config file"
+              value={script.config_path || ""}
+              onChange={(e) => updateScript("config_path", e.target.value || null)}
+            />
+          </div>
           <div>
             <Label>
               Description <span className="text-red-500">*</span>

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -20,6 +20,7 @@ import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
 import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
+import ConfigFile from "./ScriptItems/ConfigFile";
 
 interface ScriptItemProps {
   item: Script;
@@ -151,6 +152,16 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
               <div className="">
                 <InstallCommand item={item} />
               </div>
+              <Separator />
+              <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                <h2 className="text-lg font-semibold">
+                  Location of config file
+                </h2>
+              </div>
+              <Separator />
+              <div className="">
+                <ConfigFile item={item} />
+              </div>
             </div>
 
             <DefaultPassword item={item} />

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 (
+    <div className="px-4 pb-4">
+      <ConfigCopyButton>{item.config_path ? item.config_path : "No config path set"}</ConfigCopyButton>
+    </div>
+  );
+}

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: <ClipboardCheck className="h-4 w-4" />,
+    // });
+  };
+
+  return (
+    <div className="mt-4 flex">
+      <Card className="flex items-center overflow-x-auto bg-primary-foreground pl-4">
+        <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
+          {!isMobile && children ? children : "Copy Config File Path"}
+        </div>
+        <div
+          className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
+          onClick={() => handleCopy("install command", children)}
+        >
+          {hasCopied ? (
+            <CheckIcon className="h-4 w-4" />
+          ) : (
+            <ClipboardIcon className="h-4 w-4" />
+          )}
+          <span className="sr-only">Copy</span>
+        </div>
+      </Card>
+    </div>
+  );
+}

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";