From 7962e709fc15e154fb83819069e89b519609a545 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 3 Feb 2025 23:24:35 +0100
Subject: [PATCH 1/3] feat(docs): add dynamic Docker installation

---
 docs/getting-started/installation/docker.mdx  | 25 ++-------
 .../docker/dynamic-docker-install.tsx         | 55 +++++++++++++++++++
 2 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 src/components/pages/installation/docker/dynamic-docker-install.tsx

diff --git a/docs/getting-started/installation/docker.mdx b/docs/getting-started/installation/docker.mdx
index be3a502d..0f4c6404 100644
--- a/docs/getting-started/installation/docker.mdx
+++ b/docs/getting-started/installation/docker.mdx
@@ -1,3 +1,5 @@
+import { DockerInstallSnippet } from '../../../src/components/pages/installation/docker/dynamic-docker-install'
+
 # Docker
 Docker is our recommended installation method for beginners and professionals.
 It is easy to use, ships with all dependencies inside a single container and is easy to use and maintain.
@@ -13,27 +15,8 @@ We recommend [NetworkChuck's Docker Containers 101](https://www.youtube.com/watc
 
 ### Installation
 
-To install Homarr using Docker Compose, simply create a file called ``docker-compose.yml`` and paste the following code into it.
-
-```yml title="docker-compose.yml"
-#---------------------------------------------------------------------#
-#     Homarr - A simple, yet powerful dashboard for your server.      #
-#---------------------------------------------------------------------#
-services:
-  homarr:
-    container_name: homarr
-    image: ghcr.io/homarr-labs/homarr:latest
-    restart: unless-stopped
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock # Optional, only if you want docker integration
-      - ./homarr/appdata:/appdata
-    environment:
-      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
-    ports:
-      - '7575:7575'
-```
-
-Then, run ``docker compose up -d`` in the same directory. This will start the Homarr container in the background.
+<DockerInstallSnippet />
+Finally, run ``docker compose up -d`` in the same directory. This will start the Homarr container in the background.
 
 :::caution
 
diff --git a/src/components/pages/installation/docker/dynamic-docker-install.tsx b/src/components/pages/installation/docker/dynamic-docker-install.tsx
new file mode 100644
index 00000000..92202027
--- /dev/null
+++ b/src/components/pages/installation/docker/dynamic-docker-install.tsx
@@ -0,0 +1,55 @@
+import type React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import Admonition from '@theme/Admonition';
+import { useEffect, useState } from 'react';
+
+const generateRandomHex = (length = 64): string => {
+  const array = new Uint8Array(length / 2);
+  crypto.getRandomValues(array);
+  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
+};
+
+export const DockerInstallSnippet: React.FC = () => {
+  const [randomHex, setRandomHex] = useState<string>('');
+  const generateNewHex = () => {
+    setRandomHex(generateRandomHex());
+  };
+
+  useEffect(() => {
+    generateNewHex();
+  }, []);
+
+  return (
+    <div>
+      <p>
+        First, create a <code>docker-compose.yml</code> file with the following content:
+      </p>
+      <CodeBlock language="yml" title="docker-compose.yml">
+        {`#---------------------------------------------------------------------#
+#     Homarr - A simple, yet powerful dashboard for your server.      #
+#---------------------------------------------------------------------#
+services:
+  homarr:
+    container_name: homarr
+    image: ghcr.io/homarr-labs/homarr:latest
+    restart: unless-stopped
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock # Optional, only if you want docker integration
+      - ./homarr/appdata:/appdata
+    environment:
+      - SECRET_ENCRYPTION_KEY=${randomHex}
+    ports:
+      - '7575:7575'
+			`}
+      </CodeBlock>
+      <Admonition type="info">
+        Key provided above for the <code>SECRET_ENCRYPTION_KEY</code> environment variable is
+        randomly generated using your browser cryotography API. It will be different every time You
+        can generate one yourself using <code>openssl rand -hex 32</code>
+        <button className='px-1 mx-4' onClick={generateNewHex}>Refresh key</button>
+      </Admonition>
+      <h3>random hex </h3>
+      <div className="relative group"></div>
+    </div>
+  );
+};

From ab7111302d8772176d140688d35d5134fe02ae3e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 3 Feb 2025 23:25:17 +0100
Subject: [PATCH 2/3] refactor(docs): remove unnecessary code

---
 .../pages/installation/docker/dynamic-docker-install.tsx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/pages/installation/docker/dynamic-docker-install.tsx b/src/components/pages/installation/docker/dynamic-docker-install.tsx
index 92202027..4bb3b6ac 100644
--- a/src/components/pages/installation/docker/dynamic-docker-install.tsx
+++ b/src/components/pages/installation/docker/dynamic-docker-install.tsx
@@ -48,8 +48,6 @@ services:
         can generate one yourself using <code>openssl rand -hex 32</code>
         <button className='px-1 mx-4' onClick={generateNewHex}>Refresh key</button>
       </Admonition>
-      <h3>random hex </h3>
-      <div className="relative group"></div>
     </div>
   );
 };

From 402da7a82b4acf3fd073743da979c1481f045ed1 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 6 Feb 2025 12:15:03 +0100
Subject: [PATCH 3/3] feat:Add `data-visual-test="blackout"` for ArgosCI

---
 docs/getting-started/installation/docker.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/getting-started/installation/docker.mdx b/docs/getting-started/installation/docker.mdx
index 0f4c6404..aaa4c8cc 100644
--- a/docs/getting-started/installation/docker.mdx
+++ b/docs/getting-started/installation/docker.mdx
@@ -15,7 +15,7 @@ We recommend [NetworkChuck's Docker Containers 101](https://www.youtube.com/watc
 
 ### Installation
 
-<DockerInstallSnippet />
+<DockerInstallSnippet data-visual-test="blackout"/>
 Finally, run ``docker compose up -d`` in the same directory. This will start the Homarr container in the background.
 
 :::caution