diff --git a/web/app/docs/create-vm/synology/page.tsx b/web/app/docs/create-vm/synology/page.tsx index 6735c10..7af73c3 100644 --- a/web/app/docs/create-vm/synology/page.tsx +++ b/web/app/docs/create-vm/synology/page.tsx @@ -1,33 +1,552 @@ -import type { Metadata } from "next" -import { Settings } from "lucide-react" -import Image from "next/image" +"use client" -export const metadata: Metadata = { - title: "ProxMenux - Create Synology DSM VM", - description: - "Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.", - openGraph: { - title: "ProxMenux - Create Synology DSM VM", - description: - "Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.", - type: "article", - url: "https://macrimi.github.io/ProxMenux/docs/synology-vm", - images: [ - { - url: "https://macrimi.github.io/ProxMenux/synology-vm-guide.png", - width: 1200, - height: 630, - alt: "ProxMenux - Create Synology DSM VM", - }, - ], - }, - twitter: { - card: "summary_large_image", - title: "ProxMenux - Create Synology DSM VM", - description: - "Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.", - images: ["https://macrimi.github.io/ProxMenux/synology-vm-guide.png"], - }, +import Image from "next/image" +import { Wrench, Target, CheckCircle } from "lucide-react" +import { useState } from "react" + +export default function Page() { + return ( +
+

Create Synology DSM VM using ProxMenux

+ +
+

Introduction

+

+ ProxMenux provides an automated script that creates and configures a VM to install Synology DSM (DiskStation + Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM + boot, giving you the option between three different choices: +

+ +

+ You also have the option to add a custom loader if you prefer to modify or create your own configuration. +

+

+ All loaders are similar although each has its own structure and configuration methods. This guide describes + the 6 basic steps involved in setting up a Synology DSM loader. The exact steps may vary depending on the + loader and/or changes introduced by the developer, so understanding the basic steps similar in all of them + will help you know how to build the loader of your choice for the proper functioning of Synology DS. +

+
+ +
+

+ + Step-by-Step Guide +

+

+ This guide will walk you through the process of configuring the loader and setting up the VM. Each step + includes screenshots to show how the process looks with the three loaders (arc, rr, and tinycore). +

+
+ +
+

+ + Start the VM and Access the Main Menu +

+

+ Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to + select and configure the DSM model you want to build. Once the loader is created, this step will be skipped + unless you manually force a reconfiguration from the boot monitor. +

+ + + +
+ ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+
+

+ In the case of RR, you'll need to manually enter the following command to open + the menu: +

+
+                      ./menu.sh
+                    
+
+ + +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ +
+ ), + }, + ]} + /> + + +
+

+ + Select Model +

+

+ After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may + sometimes need to expand the options to see more models. +

+

Examples:

+ + + + ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+ +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ +
+ ), + }, + ]} + /> +

In our example, we'll choose the SA6400 model.

+
+ +
+

+ + Select DSM Version +

+

+ After selecting the model, you need to choose the DSM version you want to install. In some loaders (such as + arc), you may encounter additional options at this stage. +

+ + + + + + ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+ + + +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ + +
+ ), + }, + ]} + /> +
+ +
+

+ + Select Add-Ons +

+

This step allows you to add additional features or custom configurations to the loader.

+ + +

+ Arc gives you the option to configure automatically or manually adjust the + settings. +

+ +

+ If we choose not to use automatic mode, we enter the menu to configure different options necessary + for the loader: +

+ + + + + + ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+ + + +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ + + + +
+ ), + }, + ]} + /> +
+ +
+

+ + Build the Loader +

+

+ Once you have selected the model, DSM version, and add-ons, proceed to build the loader. This process might + take a few minutes depending on the loader and the selected configuration. To start, select the "Build the + Loader" option. +

+

Examples:

+ + + + ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+ +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ +
+ ), + }, + ]} + /> +
+ +
+

+ + Boot the Loader +

+

+ Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've + created and start the DSM installation. +

+

Examples:

+ + + + ), + }, + { + id: "rr", + label: "RR Loader", + content: ( +
+ +
+ ), + }, + { + id: "tinycore", + label: "TinyCore Loader", + content: ( +
+ +
+ ), + }, + ]} + /> +
+ + {/* STARTING DSM INSTALLATION */} +
+

+ + Starting the DSM Installation +

+

Once the loader is booted, you can find your Synology device using:

+
+ https://find.synology.com +
+

Follow the on-screen steps to complete the DSM installation.

+
+ + +
+
+ +
+

+ + Tips +

+ +
+ + ) +} + +function TabGroup({ tabs }) { + const [activeTab, setActiveTab] = useState(tabs[0].id) + + return ( +
+
+ {tabs.map((tab) => ( + + ))} +
+
{tabs.find((tab) => tab.id === activeTab)?.content}
+
+ ) +} + +function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) { + return ( +
+
+ {alt} +
+ {caption} +
+ ) } function StepNumber({ number }: { number: number }) { @@ -41,379 +560,3 @@ function StepNumber({ number }: { number: number }) { ) } -function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) { - return ( -
-
- {alt} -
- {caption} -
- ) -} - -export default function SynologyVmPage() { - return ( -
- {/* Title + Icon */} -
- -

Create Synology DSM VM using ProxMenux

-
- - {/* Introduction */} -
-

- ProxMenux provides an automated script that creates and configures a VM to install Synology DSM (DiskStation - Manager). This script allows you to choose from three different loaders: -

- -

- You also have the option to add a custom loader if you prefer to modify or create your own configuration. -

-
- - {/* STEP 1 */} -
-

- - Start the VM and Access the Main Menu -

-

- Once the VM is created, start it. The first time you boot the VM, you'll access the - loader's main menu to select and configure the DSM model you want to build. Once the loader - is created, this step will be skipped unless you manually force a reconfiguration from the boot monitor. -

- - {/* Command RR */} -
-

- In the case of RR, you'll need to manually enter the following command to open the menu - as shown in the image below: -

-
-            ./menu.sh
-          
-
-
- RR Command Example -
-
-

RR Command Example: ./menu.sh

-
- - {/* Example images */} -

Examples of loader interfaces:

-
- - - -
-
- - {/* STEP 2 */} -
-

- - Select Model -

-

After loading the menu, select the Synology DSM model you want to install.

-
- - - -
-
- - {/* STEP 3 */} -
-

- - Select DSM Version -

-

- After selecting the model, you need to choose the DSM version you want to install. In some loaders (such as{" "} - arc), you may encounter additional options at this stage. -

- -
-

Arc Loader:

-
- - -
-
- -
-

RR Loader:

-
- - - -
-
- -
-

TinyCore Loader:

-
- - -
-
-
- - {/* STEP 4 */} -
-

- - Select Add-Ons -

-

This step allows you to add additional features or custom configurations to the loader.

-

- Arc gives you the option to configure automatically or manually adjust the settings. -

- -
-

Arc Loader Add-Ons:

-
- - - - - -
-
- -
-

RR Loader Add-Ons:

-
- - - -
-
- -
-

TinyCore Loader Add-Ons:

-
- - - - -
-
-
- - {/* STEP 5 */} -
-

- - Build the Loader -

-

Once you have selected the model, DSM version, and add-ons, proceed to build the loader.

-

- This process might take a few minutes depending on the loader and the selected configuration. To start, select - the "Build the Loader" option. -

- -
- - - -
-
- - {/* STEP 6 */} -
-

- - Boot the Loader -

-

- Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've - created and start the DSM installation. -

- -
- - - -
-
- - {/* STARTING DSM INSTALLATION */} -
-

- - Starting the DSM Installation -

-

Once the loader is booted, you can find your Synology device using:

-
- https://find.synology.com -
-

Follow the on-screen steps to complete the DSM installation.

-
- - -
-
- - {/* Table of Contents - Fixed on the side for larger screens */} -
-

Quick Navigation

- -
-
- ) -} - diff --git a/web/public/vm/synology/arc/arc_1_1_1.png b/web/public/vm/synology/arc/arc_1_1_1.png index 5731328..00a3043 100644 Binary files a/web/public/vm/synology/arc/arc_1_1_1.png and b/web/public/vm/synology/arc/arc_1_1_1.png differ diff --git a/web/public/vm/synology/arc/arc_1_3_1.png b/web/public/vm/synology/arc/arc_1_3_1.png index e1e5e16..eb870b9 100644 Binary files a/web/public/vm/synology/arc/arc_1_3_1.png and b/web/public/vm/synology/arc/arc_1_3_1.png differ diff --git a/web/public/vm/synology/arc/arc_1_3_2.png b/web/public/vm/synology/arc/arc_1_3_2.png index b863ec7..b6e008a 100644 Binary files a/web/public/vm/synology/arc/arc_1_3_2.png and b/web/public/vm/synology/arc/arc_1_3_2.png differ diff --git a/web/public/vm/synology/arc/arc_1_5_1.png b/web/public/vm/synology/arc/arc_1_5_1.png index 52e36c3..f4f7b53 100644 Binary files a/web/public/vm/synology/arc/arc_1_5_1.png and b/web/public/vm/synology/arc/arc_1_5_1.png differ diff --git a/web/public/vm/synology/arc/arc_1_6_1.png b/web/public/vm/synology/arc/arc_1_6_1.png index d87e5f4..c479eea 100644 Binary files a/web/public/vm/synology/arc/arc_1_6_1.png and b/web/public/vm/synology/arc/arc_1_6_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_1_1.png b/web/public/vm/synology/rr/rr_2_1_1.png index 9b1566f..248c208 100644 Binary files a/web/public/vm/synology/rr/rr_2_1_1.png and b/web/public/vm/synology/rr/rr_2_1_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_2_1.png b/web/public/vm/synology/rr/rr_2_2_1.png index c5b82a5..00bf723 100644 Binary files a/web/public/vm/synology/rr/rr_2_2_1.png and b/web/public/vm/synology/rr/rr_2_2_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_3_1.png b/web/public/vm/synology/rr/rr_2_3_1.png index 2f38193..a9f1ea8 100644 Binary files a/web/public/vm/synology/rr/rr_2_3_1.png and b/web/public/vm/synology/rr/rr_2_3_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_3_2.png b/web/public/vm/synology/rr/rr_2_3_2.png index 28352b5..f68492d 100644 Binary files a/web/public/vm/synology/rr/rr_2_3_2.png and b/web/public/vm/synology/rr/rr_2_3_2.png differ diff --git a/web/public/vm/synology/rr/rr_2_3_3.png b/web/public/vm/synology/rr/rr_2_3_3.png index 7ca2360..0402ea7 100644 Binary files a/web/public/vm/synology/rr/rr_2_3_3.png and b/web/public/vm/synology/rr/rr_2_3_3.png differ diff --git a/web/public/vm/synology/rr/rr_2_4_1.png b/web/public/vm/synology/rr/rr_2_4_1.png index b44d9a4..d58b3b8 100644 Binary files a/web/public/vm/synology/rr/rr_2_4_1.png and b/web/public/vm/synology/rr/rr_2_4_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_4_2.png b/web/public/vm/synology/rr/rr_2_4_2.png index f454447..88fe914 100644 Binary files a/web/public/vm/synology/rr/rr_2_4_2.png and b/web/public/vm/synology/rr/rr_2_4_2.png differ diff --git a/web/public/vm/synology/rr/rr_2_5_1.png b/web/public/vm/synology/rr/rr_2_5_1.png index 910256c..82189a9 100644 Binary files a/web/public/vm/synology/rr/rr_2_5_1.png and b/web/public/vm/synology/rr/rr_2_5_1.png differ diff --git a/web/public/vm/synology/rr/rr_2_6_1.png b/web/public/vm/synology/rr/rr_2_6_1.png index ed93d05..76d72ce 100644 Binary files a/web/public/vm/synology/rr/rr_2_6_1.png and b/web/public/vm/synology/rr/rr_2_6_1.png differ