update

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

@@ -0,0 +1,38 @@
+import fs from "fs"
+import path from "path"
+import { remark } from "remark"
+import html from "remark-html"
+
+// Function to retrieve the guide content based on the slug
+async function getGuideContent(slug: string) {
+  // Adjusted to look inside the correct 'guides' folder at the root level of the project
+  const guidePath = path.join(process.cwd(), "..", "guides", slug, "index.md") // Corrected to look in the root directory
+  const fileContents = fs.readFileSync(guidePath, "utf8")
+
+  const result = await remark().use(html).process(fileContents)
+  return result.toString()
+}
+
+// Function to generate static paths for all available guides
+export async function generateStaticParams() {
+  // Adjusted to look in the correct 'guides' folder at the root level of the project
+  const guidesPath = path.join(process.cwd(), "..", "guides")
+  const guideFolders = fs.readdirSync(guidesPath, { withFileTypes: true }) // Read only directories
+
+  return guideFolders
+    .filter((folder) => folder.isDirectory()) // Ensure it's a directory
+    .map((folder) => ({
+      slug: folder.name, // Use the folder name as slug
+    }))
+}
+
+// Page component to render a guide based on its slug
+export default async function GuidePage({ params }: { params: { slug: string } }) {
+  const guideContent = await getGuideContent(params.slug)
+
+  return (
+    <div className="container mx-auto px-4 py-16 max-w-3xl">
+      <div className="prose prose-lg dark:prose-invert" dangerouslySetInnerHTML={{ __html: guideContent }} />
+    </div>
+  )
+}

web2/app/guides/page.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link"
+
+// Interface defining the structure of a guide
+interface Guide {
+  title: string
+  description: string
+  slug: string
+}
+
+// Guide list (manually added, can be automated later)
+const guides: Guide[] = [
+  {
+    title: "Setting up NVIDIA Drivers on Proxmox VE with GPU Passthrough",
+    description:
+      "Learn how to install and configure NVIDIA drivers on your Proxmox VE host and enable GPU passthrough to your virtual machines.",
+    slug: "nvidia_proxmox",
+  },
+  {
+    title: "Example Additional Guide",
+    description: "This is a sample guide to show how multiple guides are handled.",
+    slug: "example_guide",
+  },
+  // Add more guides as needed
+]
+
+// Main component that renders the list of available guides
+export default function GuidesPage() {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <h1 className="text-4xl font-bold mb-8">ProxMenux Guides</h1>
+      <p className="text-xl mb-8">Complementary guides to make the most of your Proxmox VE.</p>
+      <div className="grid md:grid-cols-2 gap-6">
+        {guides.map((guide) => (
+          <Link
+            key={guide.slug}
+            href={`/guides/${guide.slug}`}
+            className="block p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
+          >
+            <h2 className="text-2xl font-semibold mb-2 text-gray-900">{guide.title}</h2>
+            <p className="text-gray-600">{guide.description}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}