From 334428784fecd71edafca9376cf64ecfa0e898a2 Mon Sep 17 00:00:00 2001
From: Piotr Zaniewski <piotr.zaniewski@loft.sh>
Date: Mon, 18 Nov 2024 19:15:38 +0100
Subject: [PATCH] feat: configurable copy paste

Signed-off-by: Piotr Zaniewski <piotr.zaniewski@loft.sh>
---
 src/components/InterpolatedCodeBlock/index.js | 48 +++++++++++++
 vcluster/deploy/environment/eks.mdx           | 67 +++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 src/components/InterpolatedCodeBlock/index.js
 create mode 100644 vcluster/deploy/environment/eks.mdx

diff --git a/src/components/InterpolatedCodeBlock/index.js b/src/components/InterpolatedCodeBlock/index.js
new file mode 100644
index 000000000..18931de2c
--- /dev/null
+++ b/src/components/InterpolatedCodeBlock/index.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import styles from '@site/src/components/Input/styles.module.scss';
+
+const InterpolatedCodeBlock = ({ variables = {}, code = '' }) => {
+  const [values, setValues] = useState(() => {
+    if (!variables || typeof variables !== 'object') return {};
+    return Object.fromEntries(
+      Object.entries(variables).map(([key, defaultValue]) => [key, defaultValue || ''])
+    );
+  });
+
+  const processedCode = code.replace(
+    /\$\{(\w+)\}/g,
+    (_, key) => values[key] || variables[key] || ''
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-6 font-mono bg-[var(--prism-background-color)] p-6 rounded">
+        {Object.entries(variables).map(([key]) => (
+          <div
+            key={key}
+            className="grid grid-cols-[150px_1fr] items-center"
+            style={{
+              marginTop: 'calc(var(--ifm-leading) / 2)',
+              marginBottom: 'calc(var(--ifm-leading) / 2)'
+            }}
+          >
+            <span className="text-purple-400">{key}</span>
+            <input
+              type="text"
+              value={values[key] || ''}
+              onChange={(e) => setValues(prev => ({ ...prev, [key]: e.target.value }))}
+              placeholder={variables[key]}
+              className={`${styles.input} border border-gray-700/30`}
+            />
+          </div>
+        ))}
+      </div>
+      <CodeBlock className="language-bash">
+        {processedCode}
+      </CodeBlock>
+    </div>
+  );
+};
+
+export default InterpolatedCodeBlock;
\ No newline at end of file
diff --git a/vcluster/deploy/environment/eks.mdx b/vcluster/deploy/environment/eks.mdx
new file mode 100644
index 000000000..f5fb1d8ca
--- /dev/null
+++ b/vcluster/deploy/environment/eks.mdx
@@ -0,0 +1,67 @@
+---
+title: Deploy on EKS
+sidebar_label: EKS
+sidebar_position: 8
+id: eks
+description: Learn how to deploy vCluster on Amazon EKS, including storage provisioning with EBS CSI driver and IAM role configuration.
+---
+
+import BasePrerequisites from '../../../platform/_partials/install/base-prerequisites.mdx';
+import Mark from "@site/src/components/Mark";
+import InterpolatedCodeBlock from "@site/src/components/InterpolatedCodeBlock";
+
+# Deploy vCluster on EKS
+
+Deploying vCluster on  [Amazon EKS](https://aws.amazon.com/EKS/) requires configuring several crucial components, including storage provisioning and IAM roles. While EKS is a popular choice for running Kubernetes workloads, setting up vCluster requires additional configuration that may not be immediately apparent.
+
+This guide provides a comprehensive walkthrough of the process for deploying vCluster on EKS, ensuring all necessary components are properly configured. It covers storage provisioning with the EBS CSI driver, IAM role configuration, and common pitfalls to avoid.
+
+## Prerequisites
+
+:::note
+If you already have an EKS cluster set up, you can skip the cluster creation
+steps and [proceed to configuration steps](EKS#setting-up-ebs-storage-driver).
+:::
+
+### Base prerequisites
+
+<BasePrerequisites />
+
+### AWS prerequisites
+
+- [AWS CLI](https://aws.amazon.com/cli/) version <Mark color="lightgreen">1.16.156</Mark> or greater
+- [eksctl](https://eksctl.io/) installed for cluster management
+:::note
+[Upgrade](https://github.com/eksctl-io/eksctl?tab=readme-ov-file#installation) `eksctl` to the latest version to ensure latest Kubernetes version is
+deployed.
+:::
+- AWS IAM permissions to create roles and policies
+
+## Creating an EKS cluster
+
+Start by creating a minimal EKS cluster using `eksctl`. Create a file named `cluster.yaml`:
+
+<InterpolatedCodeBlock
+  variables={{
+    CLUSTER_NAME: "vcluster-demo",
+    REGION: "us-west-1",
+    INSTANCE_TYPE: "t3.medium"
+  }}
+  code={`CLUSTER_NAME=\${CLUSTER_NAME}
+REGION=\${REGION}
+INSTANCE_TYPE=\${INSTANCE_TYPE}
+
+cat << EOF > cluster.yaml
+apiVersion: eksctl.io/v1alpha5
+kind: ClusterConfig
+metadata:
+  name: \${CLUSTER_NAME}
+  region: \${REGION}
+nodeGroups:
+  - name: ng-1
+    instanceType: \${INSTANCE_TYPE}
+    desiredCapacity: 2
+    volumeSize: 80
+EOF`}
+/>
+