mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-06-28 04:06:54 +00:00
Create page.tsx
This commit is contained in:
MacRimi
parent
cb456d7d4d
commit
c011d86605
318
web/app/docs/create-vm/system-nas/page.tsx
Normal file
318
web/app/docs/create-vm/system-nas/page.tsx
Normal file
@ -0,0 +1,318 @@
|
||||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { HardDrive, Info, Database, Server, MonitorIcon, Star, Cpu, Github } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ProxMenux Documentation: System NAS Virtual Machines",
|
||||
description:
|
||||
"Guide for creating and configuring NAS virtual machines on Proxmox VE using ProxMenux, including Synology DSM, TrueNAS, and other storage systems.",
|
||||
openGraph: {
|
||||
title: "ProxMenux Documentation: System NAS Virtual Machines",
|
||||
description:
|
||||
"Guide for creating and configuring NAS virtual machines on Proxmox VE using ProxMenux, including Synology DSM, TrueNAS, and other storage systems.",
|
||||
type: "article",
|
||||
url: "https://macrimi.github.io/ProxMenux/docs/virtual-machines/system-nas",
|
||||
images: [
|
||||
{
|
||||
url: "https://macrimi.github.io/ProxMenux/vm/system-nas-menu.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "ProxMenux System NAS Menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "ProxMenux Documentation: System NAS Virtual Machines",
|
||||
description:
|
||||
"Guide for creating and configuring NAS virtual machines on Proxmox VE using ProxMenux, including Synology DSM, TrueNAS, and other storage systems.",
|
||||
images: ["https://macrimi.github.io/ProxMenux/vm/system-nas-menu.png"],
|
||||
},
|
||||
}
|
||||
|
||||
interface ImageWithCaptionProps {
|
||||
src: string
|
||||
alt: string
|
||||
caption: string
|
||||
}
|
||||
|
||||
function ImageWithCaption({ src, alt, caption }: ImageWithCaptionProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
|
||||
<div className="w-full rounded-md overflow-hidden border border-gray-200">
|
||||
<Image
|
||||
src={src || "/placeholder.svg"}
|
||||
alt={alt}
|
||||
width={768}
|
||||
height={400}
|
||||
style={{ height: "auto" }}
|
||||
className="object-contain w-full"
|
||||
sizes="(max-width: 768px) 100vw, 768px"
|
||||
/>
|
||||
</div>
|
||||
<span className="mt-2 text-sm text-gray-600">{caption}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface NASSystemProps {
|
||||
name: string
|
||||
description: string
|
||||
icon: React.ReactNode
|
||||
features: string[]
|
||||
technicalDetails: string[]
|
||||
href: string
|
||||
isExternal?: boolean
|
||||
externalUrl?: string
|
||||
}
|
||||
|
||||
function NASSystemItem({
|
||||
name,
|
||||
description,
|
||||
icon,
|
||||
features,
|
||||
technicalDetails,
|
||||
href,
|
||||
isExternal,
|
||||
externalUrl,
|
||||
}: NASSystemProps) {
|
||||
return (
|
||||
<div className="border rounded-md mb-6 border-gray-200 overflow-hidden">
|
||||
<div className="px-4 py-3 bg-gray-50 border-b border-gray-200 hover:bg-blue-50 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
{isExternal && externalUrl ? (
|
||||
<a href={externalUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3">
|
||||
{icon}
|
||||
<h3 className="text-lg font-medium text-black hover:text-blue-600">{name}</h3>
|
||||
</a>
|
||||
) : (
|
||||
<Link href={href} className="flex items-center gap-3">
|
||||
{icon}
|
||||
<h3 className="text-lg font-medium text-black hover:text-blue-600">{name}</h3>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{isExternal && (
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="https://github.com/R0GGER/proxmox-zimaos"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-800 border-gray-300"
|
||||
>
|
||||
<Github className="h-3.5 w-3.5 text-gray-700" />
|
||||
<span className="text-xs font-medium">External Script</span>
|
||||
</Badge>
|
||||
</a>
|
||||
{/* Removed the external link icon since the title now links to the external URL */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-4">
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-700">{description}</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2 text-black flex items-center">
|
||||
<Star className="h-5 w-5 mr-2 text-green-500" />
|
||||
Key Features:
|
||||
</h4>
|
||||
<ul className="list-disc pl-5 space-y-1 text-gray-700">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2 text-black flex items-center">
|
||||
<Cpu className="h-5 w-5 mr-2 text-purple-500" />
|
||||
Technical Details:
|
||||
</h4>
|
||||
<ul className="list-disc pl-5 space-y-1 text-gray-700">
|
||||
{technicalDetails.map((detail, index) => (
|
||||
<li key={index}>{detail}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SystemNASPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-10 px-4 bg-white text-black">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<HardDrive className="h-8 w-8 mr-2 text-blue-500" />
|
||||
<h1 className="text-3xl font-bold text-black">System NAS Virtual Machines</h1>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mt-6">
|
||||
<p className="text-lg text-black">
|
||||
ProxMenux provides automated scripts that create and configure virtual machines for various NAS systems on
|
||||
Proxmox VE. These scripts simplify the process by handling the necessary configurations and optimizations
|
||||
for each NAS platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImageWithCaption
|
||||
src="https://macrimi.github.io/ProxMenux/vm/system-nas-menu.png"
|
||||
alt="System NAS Menu"
|
||||
caption="System NAS Menu"
|
||||
/>
|
||||
|
||||
<div className="mt-8 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Info className="h-5 w-5 text-blue-500" />
|
||||
<h2 className="text-xl font-semibold text-black">Available NAS Systems</h2>
|
||||
</div>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Select one of the NAS systems below to view detailed documentation on installation and configuration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<NASSystemItem
|
||||
name="Synology DSM"
|
||||
description="Synology DSM (DiskStation Manager) is a popular NAS operating system with a comprehensive set of features for home and business users."
|
||||
icon={<HardDrive className="h-6 w-6 text-blue-500" />}
|
||||
features={[
|
||||
"User-friendly web interface",
|
||||
"Extensive app ecosystem",
|
||||
"File sharing and synchronization",
|
||||
"Media streaming capabilities",
|
||||
]}
|
||||
technicalDetails={[
|
||||
"Base OS: Linux (Custom)",
|
||||
"File Systems: Btrfs, ext4",
|
||||
"Virtualization: Yes (Docker)",
|
||||
"Hardware Requirements: Moderate",
|
||||
]}
|
||||
href="/docs/virtual-machines/system-nas/synology"
|
||||
/>
|
||||
|
||||
<NASSystemItem
|
||||
name="TrueNAS SCALE"
|
||||
description="TrueNAS SCALE is a Linux-based version of TrueNAS that combines the simplicity of TrueNAS with the scalability of Linux, including support for containerization and hyperconvergence."
|
||||
icon={<Database className="h-6 w-6 text-blue-500" />}
|
||||
features={[
|
||||
"Linux-based (Debian)",
|
||||
"Docker container support",
|
||||
"Kubernetes integration",
|
||||
"Scale-out clustering capabilities",
|
||||
]}
|
||||
technicalDetails={[
|
||||
"Base OS: Debian Linux",
|
||||
"File System: ZFS",
|
||||
"Virtualization: Yes (KVM)",
|
||||
"Hardware Requirements: High",
|
||||
]}
|
||||
href="/docs/create-vm/system-nas/system-nas-others"
|
||||
/>
|
||||
|
||||
<NASSystemItem
|
||||
name="TrueNAS CORE"
|
||||
description="TrueNAS CORE (formerly FreeNAS) is a FreeBSD-based open-source NAS operating system that provides file and object storage with enterprise-grade reliability."
|
||||
icon={<Database className="h-6 w-6 text-blue-500" />}
|
||||
features={["FreeBSD-based", "ZFS file system", "Snapshots and replication", "Encryption"]}
|
||||
technicalDetails={[
|
||||
"Base OS: FreeBSD",
|
||||
"File System: ZFS",
|
||||
"Virtualization: Yes (Jails)",
|
||||
"Hardware Requirements: Moderate to High",
|
||||
]}
|
||||
href="/docs/create-vm/system-nas/system-nas-others"
|
||||
/>
|
||||
|
||||
<NASSystemItem
|
||||
name="OpenMediaVault"
|
||||
description="OpenMediaVault (OMV) is a Debian-based NAS solution with a lightweight web interface designed for small home offices and personal use."
|
||||
icon={<Server className="h-6 w-6 text-blue-500" />}
|
||||
features={[
|
||||
"Modular plugin architecture",
|
||||
"Multiple filesystem support",
|
||||
"Docker support via plugins",
|
||||
"Low resource requirements",
|
||||
]}
|
||||
technicalDetails={[
|
||||
"Base OS: Debian Linux",
|
||||
"File Systems: ext4, XFS, Btrfs",
|
||||
"Virtualization: Yes (via plugins)",
|
||||
"Hardware Requirements: Low",
|
||||
]}
|
||||
href="/docs/create-vm/system-nas/system-nas-others"
|
||||
/>
|
||||
|
||||
<NASSystemItem
|
||||
name="Rockstor"
|
||||
description="Rockstor is a Linux-based NAS solution built on CentOS with the BTRFS file system, offering advanced storage features with a user-friendly interface."
|
||||
icon={<HardDrive className="h-6 w-6 text-blue-500" />}
|
||||
features={[
|
||||
"BTRFS file system",
|
||||
"Web-based UI",
|
||||
"Docker-based app framework (Rock-ons)",
|
||||
"Snapshots and replication",
|
||||
]}
|
||||
technicalDetails={[
|
||||
"Base OS: openSUSE based",
|
||||
"File System: Btrfs",
|
||||
"Virtualization: Yes (Docker)",
|
||||
"Hardware Requirements: Moderate",
|
||||
]}
|
||||
href="/docs/create-vm/system-nas/system-nas-others"
|
||||
/>
|
||||
|
||||
<NASSystemItem
|
||||
name="ZimaOS"
|
||||
description="ZimaOS is a lightweight, customizable NAS operating system designed for simplicity and performance, with a focus on media streaming and home automation."
|
||||
icon={<MonitorIcon className="h-6 w-6 text-blue-500" />}
|
||||
features={[
|
||||
"Low resource footprint",
|
||||
"Docker support",
|
||||
"Media streaming optimization",
|
||||
"Home automation integration",
|
||||
]}
|
||||
technicalDetails={[
|
||||
"Base OS: ROGGER proxmox-zimaos",
|
||||
"File Systems: ext4, XFS",
|
||||
"Virtualization: Yes (Docker)",
|
||||
"Hardware Requirements: Low",
|
||||
]}
|
||||
|
||||
isExternal={true}
|
||||
externalUrl="https://www.zimaspace.com/docs/zimaos/"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<h2 className="text-xl font-bold mb-4 text-black">About NAS Virtual Machines</h2>
|
||||
<div className="space-y-4">
|
||||
<p className="text-black">
|
||||
Network Attached Storage (NAS) systems provide file-level data storage services to other devices on the
|
||||
network. Running NAS software in a virtual machine on Proxmox VE allows you to leverage the reliability and
|
||||
management features of Proxmox while providing flexible storage solutions.
|
||||
</p>
|
||||
|
||||
<p className="text-black">
|
||||
ProxMenux simplifies the creation of NAS virtual machines by automating the configuration process, including
|
||||
network settings, storage allocation, and system optimization for each specific NAS platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user