feat: configurable copy paste

Signed-off-by: Piotr Zaniewski <piotr.zaniewski@loft.sh>

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;

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`}
+/>
+