Update

web/app/docs/post-install/customization/page.tsx

@@ -1,11 +1,41 @@
 import type { Metadata } from "next"
 import { Sliders } from "lucide-react"
+import CopyableCode from "@/components/CopyableCode"
 
 export const metadata: Metadata = {
   title: "ProxMenux Post-Install: Customization Settings",
   description:
-    "Detailed guide to Customization Settings in the ProxMenux post-install script for personalizing your Proxmox VE environment.",
-  // ... (rest of the metadata remains the same)
+    "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
+  openGraph: {
+    title: "ProxMenux Post-Install: Customization Settings",
+    description:
+      "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
+    type: "article",
+    url: "https://macrimi.github.io/ProxMenux/docs/post-install/customization",
+    images: [
+      {
+        url: "https://macrimi.github.io/ProxMenux/customization-settings-image.png",
+        width: 1200,
+        height: 630,
+        alt: "ProxMenux Customization Settings",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "ProxMenux Post-Install: Customization Settings",
+    description:
+      "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
+    images: ["https://macrimi.github.io/ProxMenux/customization-settings-image.png"],
+  },
+}
+
+function StepNumber({ number }: { number: number }) {
+  return (
+    <div className="inline-flex items-center justify-center w-8 h-8 mr-3 text-white bg-blue-500 rounded-full">
+      <span className="text-sm font-bold">{number}</span>
+    </div>
+  )
 }
 
 export default function CustomizationSettingsPage() {
@@ -15,8 +45,87 @@ export default function CustomizationSettingsPage() {
         <Sliders className="h-8 w-8 mr-2 text-blue-500" />
         <h1 className="text-3xl font-bold">Customization Settings</h1>
       </div>
-      {/* ... (rest of the component remains the same) */}
+      <p className="mb-4">
+        The <strong>Customization Settings</strong> section allows you to configure and personalize the Proxmox VE environment with specific adjustments.
+      </p>
+
+      <h3 className="text-xl font-semibold mt-16 mb-4 flex items-center">
+        <StepNumber number={1} />
+        Customize Bash Prompt and Aliases
+      </h3>
+      <p className="mb-4">
+        This option modifies the root user's <code>.bashrc</code> to enhance command-line usability by adding colorized prompts and useful aliases.
+      </p>
+      <p className="mb-4">What it does:</p>
+      <ul className="list-disc pl-5 mb-4">
+        <li>Backs up the original <code>.bashrc</code> file</li>
+        <li>Configures a custom prompt with timestamp</li>
+        <li>Adds colorized <code>ls</code> and <code>grep</code> aliases</li>
+        <li>Ensures <code>.bashrc</code> is sourced in <code>.bash_profile</code></li>
+      </ul>
+      <p className="text-lg mb-2">This adjustment automates the following commands:</p>
+      <CopyableCode
+        code={`
+# Modify .bashrc for root
+cp /root/.bashrc /root/.bashrc.bak
+sed -i '/HISTTIMEFORMAT/d' /root/.bashrc
+sed -i '/PS1/d' /root/.bashrc
+sed -i '/alias/d' /root/.bashrc
+
+echo 'export HISTTIMEFORMAT="%d/%m/%y %T "' >> /root/.bashrc
+echo 'export PS1="\\u@\\h:\\W \\\$ "' >> /root/.bashrc
+echo "alias ll='ls -alF'" >> /root/.bashrc
+source /root/.bashrc
+        `}
+      />
+
+      <h3 className="text-xl font-semibold mt-16 mb-4 flex items-center">
+        <StepNumber number={2} />
+        Configure MOTD (Message of the Day)
+      </h3>
+      <p className="mb-4">
+        This option customizes the MOTD to display a ProxMenux optimization message upon login.
+      </p>
+      <p className="text-lg mb-2">This adjustment automates the following commands:</p>
+      <CopyableCode
+        code={`
+# Backup original MOTD
+cp /etc/motd /etc/motd.bak
+
+echo "This system is optimized by: ProxMenux" | cat - /etc/motd > temp && mv temp /etc/motd
+        `}
+      />
+
+      <h3 className="text-xl font-semibold mt-16 mb-4 flex items-center">
+        <StepNumber number={3} />
+        Remove Proxmox Subscription Banner
+      </h3>
+      <p className="mb-4">
+        This option removes the Proxmox subscription banner and nag prompts from the web interface.
+      </p>
+      <p className="mb-4">What it does:</p>
+      <ul className="list-disc pl-5 mb-4">
+        <li>Patches <code>proxmoxlib.js</code> to disable banner checks</li>
+        <li>Creates a cron job to ensure banner removal persists</li>
+        <li>Configures APT to prevent nagging messages</li>
+      </ul>
+      <p className="text-lg mb-2">This adjustment automates the following commands:</p>
+      <CopyableCode
+        code={`
+# Remove Proxmox subscription banner
+sed -i "s/data.status !== 'Active'/false/g" /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js
+sed -i "s/checked_command: function(orig_cmd) {/checked_command: function() {} || function(orig_cmd) {/g" /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js
+
+echo "DPkg::Post-Invoke { \"dpkg -V proxmox-widget-toolkit | grep -q '/proxmoxlib\\.js$'; if [ $\? -eq 1 ]; then { echo 'Removing subscription nag from UI...'; sed -i '/data.status/{s/\!/\!/;s/Active/NoMoreNagging/}' /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js; }; fi\"; };" > /etc/apt/apt.conf.d/xs-pve-no-nag
+        `}
+      />
+
+      <section className="mt-12 p-4 bg-blue-100 rounded-md">
+        <h2 className="text-xl font-semibold mb-2">Customization Application</h2>
+        <p>
+          These customization settings are applied automatically when selected in the post-install process. Adjustments can be made manually as needed.
+        </p>
+      </section>
     </div>
   )
 }
-