FEATURE (helm): Add Helm chart

Author: RostislavDugin

app/components/InstallationComponent.tsx

@@ -13,9 +13,15 @@ type ScriptVariant = {
   code: string;
 };
 
+type CodeBlock = {
+  label: string;
+  code: string;
+};
+
 type Installation = {
   label: string;
   code: string | ScriptVariant[];
+  codeBlocks?: CodeBlock[];
   language: string;
   description: string;
 };
@@ -70,8 +76,19 @@ curl -sSL https://raw.githubusercontent.com/RostislavDugin/postgresus/refs/heads
     label: "Helm (Kubernetes)",
     language: "bash",
     description:
-      "For Kubernetes deployments, use the official Helm chart. This will create a StatefulSet with persistent storage and optional ingress.",
-    code: `helm install postgresus ./deploy/postgresus -n postgresus --create-namespace`,
+      "For Kubernetes deployments, clone the repository and use the official Helm chart. This will create a StatefulSet with persistent storage and optional ingress.",
+    code: "",
+    codeBlocks: [
+      {
+        label: "Clone the repository",
+        code: `git clone https://github.com/RostislavDugin/postgresus.git
+cd postgresus`,
+      },
+      {
+        label: "Install the Helm chart",
+        code: `helm install postgresus ./deploy/postgresus -n postgresus --create-namespace`,
+      },
+    ],
   },
 };
 
@@ -87,14 +104,20 @@ export default function InstallationComponent() {
     useState<InstallMethod>("Automated Script");
   const [selectedVariant, setSelectedVariant] = useState(0);
   const [copied, setCopied] = useState(false);
+  const [copiedBlockIndex, setCopiedBlockIndex] = useState<number | null>(null);
 
   const currentInstallation = installationMethods[selectedMethod];
-  const hasVariants = Array.isArray(currentInstallation.code);
+  const hasVariants =
+    Array.isArray(currentInstallation.code) &&
+    currentInstallation.code.length > 0;
+  const hasCodeBlocks =
+    currentInstallation.codeBlocks && currentInstallation.codeBlocks.length > 0;
 
   const handleMethodChange = (method: InstallMethod) => {
     setSelectedMethod(method);
     setSelectedVariant(0);
     setCopied(false);
+    setCopiedBlockIndex(null);
   };
 
   const handleVariantChange = (index: number) => {
@@ -120,6 +143,16 @@ export default function InstallationComponent() {
     }
   };
 
+  const handleCopyBlock = async (code: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopiedBlockIndex(index);
+      setTimeout(() => setCopiedBlockIndex(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
   return (
     <div className="mx-auto w-full">
       {/* Installation methods tabs */}
@@ -165,23 +198,53 @@ export default function InstallationComponent() {
         {currentInstallation.description}
       </div>
 
-      {/* Code block with copy button */}
-      <div className="relative max-w-[600px]">
-        <pre className="rounded-lg bg-gray-100 p-4 pr-16 text-sm">
-          <code className="block whitespace-pre-wrap wrap-break-word">
-            {getCurrentCode()}
-          </code>
-        </pre>
-
-        <button
-          onClick={handleCopy}
-          className={`absolute right-2 top-2 rounded px-2 py-1 text-xs text-white transition-colors ${
-            copied ? "bg-green-500" : "bg-blue-600 hover:bg-blue-700"
-          }`}
-        >
-          {copied ? "Copied!" : "Copy"}
-        </button>
-      </div>
+      {/* Multiple code blocks (for Helm) */}
+      {hasCodeBlocks ? (
+        <div className="space-y-4 max-w-[600px]">
+          {currentInstallation.codeBlocks!.map((block, index) => (
+            <div key={index}>
+              <p className="mb-2 text-sm font-medium text-gray-700">
+                {block.label}
+              </p>
+              <div className="relative">
+                <pre className="rounded-lg bg-gray-100 p-4 pr-16 text-sm">
+                  <code className="block whitespace-pre-wrap wrap-break-word">
+                    {block.code}
+                  </code>
+                </pre>
+                <button
+                  onClick={() => handleCopyBlock(block.code, index)}
+                  className={`absolute right-2 top-2 rounded px-2 py-1 text-xs text-white transition-colors ${
+                    copiedBlockIndex === index
+                      ? "bg-green-500"
+                      : "bg-blue-600 hover:bg-blue-700"
+                  }`}
+                >
+                  {copiedBlockIndex === index ? "Copied!" : "Copy"}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        /* Single code block with copy button */
+        <div className="relative max-w-[600px]">
+          <pre className="rounded-lg bg-gray-100 p-4 pr-16 text-sm">
+            <code className="block whitespace-pre-wrap wrap-break-word">
+              {getCurrentCode()}
+            </code>
+          </pre>
+
+          <button
+            onClick={handleCopy}
+            className={`absolute right-2 top-2 rounded px-2 py-1 text-xs text-white transition-colors ${
+              copied ? "bg-green-500" : "bg-blue-600 hover:bg-blue-700"
+            }`}
+          >
+            {copied ? "Copied!" : "Copy"}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

app/installation/page.tsx

@@ -60,6 +60,9 @@ sudo curl -sSL https://raw.githubusercontent.com/RostislavDugin/postgresus/refs/
       - ./postgresus-data:/postgresus-data
     restart: unless-stopped`;
 
+  const helmClone = `git clone https://github.com/RostislavDugin/postgresus.git
+cd postgresus`;
+
   const helmInstall = `helm install postgresus ./deploy/postgresus -n postgresus --create-namespace`;
 
   const helmValues = `ingress:
@@ -281,6 +284,19 @@ persistence:
                 ingress.
               </p>
 
+              <p>First, clone the repository:</p>
+
+              <div className="relative my-6">
+                <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm text-gray-100">
+                  <code>{helmClone}</code>
+                </pre>
+                <div className="absolute right-2 top-2">
+                  <CopyButton text={helmClone} />
+                </div>
+              </div>
+
+              <p>Then install the Helm chart:</p>
+
               <div className="relative my-6">
                 <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm text-gray-100">
                   <code>{helmInstall}</code>

public/llms.txt

@@ -97,6 +97,7 @@ Content: How to configure Teams webhook notifications
    - Automatic restart on system reboot
 
 4. **Helm (Kubernetes)**
+   - Clone repository first: git clone https://github.com/RostislavDugin/postgresus.git
    - Official Helm chart for Kubernetes deployments
    - StatefulSet with persistent storage
    - Configurable ingress with TLS support