update

web/app/globals.css

@@ -58,7 +58,53 @@
   }
 }
 
-/* Custom styles for code blocks */
+
+.prose {
+  @apply text-base text-gray-900;
+}
+
+.prose h1 {
+  @apply text-3xl font-bold mb-4;
+}
+
+.prose h2 {
+  @apply text-2xl font-semibold mb-3;
+}
+
+.prose h3 {
+  @apply text-xl font-semibold mb-2;
+}
+
+.prose h4 {
+  @apply text-lg font-semibold mb-2;
+}
+
+.prose p {
+  @apply mb-4;
+}
+
+.prose ul,
+.prose ol {
+  @apply mb-4 pl-5;
+}
+
+.prose li {
+  @apply mb-2;
+}
+
+.prose pre {
+  @apply bg-gray-100 p-4 rounded-md overflow-x-auto mb-4;
+}
+
+.prose code {
+  @apply text-sm bg-gray-100 px-1 py-0.5 rounded;
+}
+
+.prose a {
+  @apply text-blue-600 hover:underline;
+}
+
+
 .prose pre {
   background-color: #f3f4f6;
   color: #1f2937;
@@ -68,21 +114,20 @@
   color: #1f2937;
 }
 
-/* Ajustes globales para el texto y los bordes */
-.prose {
-  color: #1f2937; /* text-gray-800 */
-}
 
-.prose h1,
+body,
-.prose h2,
+html {
-.prose h3,
+  background-color: white;
-.prose h4,
-.prose h5,
-.prose h6 {
-  color: #111827; /* text-gray-900 */
 }
 
 * {
-  border-color: white;
+  border-color: white !important;
 }
 
+.dark {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+}
+
+
+

web/app/guides/[slug]/page.tsx

@@ -21,12 +21,21 @@ export async function generateStaticParams() {
 export default async function GuidePage({ params }: { params: { slug: string } }) {
   const guideContent = await getGuideContent(params.slug)
 
+  // Función para envolver los bloques de código con CopyableCode
+  const wrapCodeBlocks = (content: string) => {
+    return content.replace(
+      /<pre><code>([\s\S]*?)<\/code><\/pre>/g,
+      (match, code) => `<CopyableCode code="${encodeURIComponent(code.trim())}" />`,
+    )
+  }
+
+  const wrappedContent = wrapCodeBlocks(guideContent)
+
   return (
-    <div className="container mx-auto px-4 py-16 max-w-3xl bg-white text-gray-900 border-white">
+    <div className="min-h-screen bg-white text-gray-900">
-      <div
+      <div className="container mx-auto px-4 py-16 max-w-3xl">
-        className="prose prose-lg max-w-none prose-pre:bg-gray-100 prose-pre:text-gray-900 prose-headings:text-gray-900 prose-p:text-gray-800"
+        <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: wrappedContent }} />
-        dangerouslySetInnerHTML={{ __html: guideContent }}
+      </div>
-      />
     </div>
   )
 }

web/app/guides/nvidia_proxmox/nvidia_proxmox.mdx

@@ -1,52 +0,0 @@
-# Setting up NVIDIA Drivers on Proxmox VE with GPU Passthrough
-
-This guide explains how to install and configure NVIDIA drivers on your Proxmox VE host and enable GPU passthrough to your virtual machines.  This allows you to leverage the power of your NVIDIA GPU within your VMs for tasks like machine learning, gaming, or video editing.
-
-## Prerequisites
-
-Before you begin, ensure you have the following:
-
-* A Proxmox VE server with an NVIDIA GPU installed.
-* Access to the Proxmox VE command line interface (CLI) via SSH.
-* A basic understanding of Proxmox VE and virtual machine management.
-
-## Installing the NVIDIA Driver on the Proxmox VE Host
-
-This step involves installing the NVIDIA driver on your Proxmox VE host operating system.  The exact steps may vary slightly depending on your Proxmox VE version and the specific NVIDIA GPU you are using.  Consult the official NVIDIA documentation for the most up-to-date instructions.
-
-Generally, you will need to download the appropriate driver package from the NVIDIA website and then install it using the package manager for your distribution.
-
-## Enabling GPU Passthrough
-
-Once the NVIDIA driver is installed, you need to enable GPU passthrough for your virtual machines.  This involves assigning the GPU to a specific VM.
-
-1. **Identify your GPU:** Use the `lspci` command to identify the PCI address of your NVIDIA GPU.  The output will look something like this:
-
-   \`\`\`bash
-   01:00.0 VGA compatible controller: NVIDIA Corporation ...
-   \`\`\`
-
-   Note the `01:00.0` part – this is the PCI address.
-
-2. **Create a VM:** Create a new virtual machine in Proxmox VE.
-
-3. **Assign the GPU:** During the VM creation process, or afterwards using the VM's configuration, assign the NVIDIA GPU to the VM using the PCI address you identified earlier.  This is typically done in the "Hardware" section of the VM's settings.
-
-4. **Install the Guest Additions:** Once the VM is created, install the appropriate guest additions for your VM's operating system.  This will ensure that the VM can properly utilize the passed-through GPU.
-
-## Verifying GPU Passthrough
-
-After completing these steps, boot your VM and verify that the NVIDIA GPU is working correctly.  You can use tools like `nvidia-smi` (within the VM) to check the GPU status and utilization.
-
-## Troubleshooting
-
-If you encounter any issues, check the following:
-
-* **Driver Installation:** Ensure the NVIDIA driver is correctly installed on the Proxmox VE host.
-* **PCI Address:** Double-check that you have used the correct PCI address when assigning the GPU to the VM.
-* **Guest Additions:** Make sure the appropriate guest additions are installed within the VM.
-* **VM Configuration:** Verify that the VM's configuration is correct and that the GPU is properly assigned.
-* **Proxmox VE Logs:** Check the Proxmox VE logs for any errors related to the GPU or VM.
-
-This guide provides a general overview.  For more detailed instructions and troubleshooting tips, refer to the official NVIDIA and Proxmox VE documentation.
-