mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-06-28 12:16:53 +00:00
Update synology page
This commit is contained in:
MacRimi
parent
27af106931
commit
14c42ecc97
@ -1,15 +1,15 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import type React from "react"
|
|
||||||
|
|
||||||
import Image from "next/image"
|
import Image from "next/image"
|
||||||
import { Wrench, Target, CheckCircle } from "lucide-react"
|
import { Wrench, Target, CheckCircle, Github } from "lucide-react"
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
const [activeLoader, setActiveLoader] = useState("arc")
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<h1 className="text-3xl font-bold mb-6">Create Synology DSM VM using ProxMenux</h1>
|
<h1 className="text-3xl font-bold mb-6">Create VM Synology DSM</h1>
|
||||||
|
|
||||||
<section className="mb-10">
|
<section className="mb-10">
|
||||||
<h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2>
|
<h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2>
|
||||||
@ -18,19 +18,51 @@ export default function Page() {
|
|||||||
Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM
|
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:
|
boot, giving you the option between three different choices:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul className="list-disc pl-5 mb-4">
|
<ul className="list-disc pl-5 mb-4">
|
||||||
<li>AuxXxilium Arc (referred to as "arc")</li>
|
<li>
|
||||||
<li>edPill rr (referred to as "rr")</li>
|
<a
|
||||||
<li>TinyCore RedPill M-shell (referred to as "tinycore")</li>
|
href="https://github.com/AuxXxilium/arc"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
AuxXxilium Arc
|
||||||
|
</a>{" "}
|
||||||
|
(referred to as "arc")
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/RROrg/rr"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
RedPill rr
|
||||||
|
</a>{" "}
|
||||||
|
(referred to as "rr")
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/PeterSuh-Q3/tinycore-redpill"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
TinyCore RedPill M-shell
|
||||||
|
</a>{" "}
|
||||||
|
(referred to as "tinycore")
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p className="mb-4">
|
<p className="mb-4">
|
||||||
You also have the option to add a custom loader if you prefer to modify or create your own configuration.
|
You also have the option to add a custom loader if you prefer to modify or create your own configuration.
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-4">
|
<p className="mb-4">
|
||||||
All loaders are similar although each has its own structure and configuration methods. This guide describes
|
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
|
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
|
loader and/or changes introduced by the developer, so <strong>understanding the basic steps</strong> similar in all of them
|
||||||
will help you know how to build the loader of your choice for the proper functioning of Synology DS.
|
will <strong>help you know how to build the loader</strong> of your choice for the proper functioning of Synology DSM.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -40,9 +72,46 @@ export default function Page() {
|
|||||||
Step-by-Step Guide
|
Step-by-Step Guide
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mb-6">
|
<p className="mb-6">
|
||||||
This guide will walk you through the process of configuring the loader and setting up the VM. Each step
|
This guide will walk you through the process of configuring the loader. Select your
|
||||||
includes screenshots to show how the process looks with the three loaders (arc, rr, and tinycore).
|
loader type below to see the steps for that loader.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{/* Selector de loader global */}
|
||||||
|
<div className="bg-blue-50 p-4 rounded-lg mb-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-2">Select your loader type:</h3>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveLoader("arc")}
|
||||||
|
className={`px-4 py-2 rounded-md font-medium ${
|
||||||
|
activeLoader === "arc"
|
||||||
|
? "bg-blue-500 text-white"
|
||||||
|
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Arc Loader
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveLoader("rr")}
|
||||||
|
className={`px-4 py-2 rounded-md font-medium ${
|
||||||
|
activeLoader === "rr"
|
||||||
|
? "bg-blue-500 text-white"
|
||||||
|
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
RR Loader
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveLoader("tinycore")}
|
||||||
|
className={`px-4 py-2 rounded-md font-medium ${
|
||||||
|
activeLoader === "tinycore"
|
||||||
|
? "bg-blue-500 text-white"
|
||||||
|
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
TinyCore Loader
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 border-b pb-8">
|
<section className="mb-12 border-b pb-8">
|
||||||
@ -51,68 +120,98 @@ export default function Page() {
|
|||||||
Start the VM and Access the Main Menu
|
Start the VM and Access the Main Menu
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mb-4">
|
<p className="mb-4">
|
||||||
Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to
|
Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to select
|
||||||
select and configure the DSM model you want to build. Once the loader is created, this step will be skipped
|
and configure the DSM model you want to build. Once the loader is created, this step will be skipped unless you
|
||||||
unless you manually force a reconfiguration from the boot monitor.
|
manually force a reconfiguration from the boot monitor. All loaders also have the option to configure the loader
|
||||||
|
via a web interface.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-8">
|
||||||
id: "arc",
|
|
||||||
label: "Arc Loader",
|
<p className="mt-16 mb-2">
|
||||||
content: (
|
<strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
the IP address shown in the VM's console output. For example, in our case: http://192.169.0.32.
|
||||||
<ImageWithCaption
|
</p>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
|
|
||||||
alt="Arc Loader Interface"
|
<ImageWithCaption
|
||||||
caption="Arc Loader Interface"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_0_1.png"
|
||||||
/>
|
alt="Arc Loader Web Interface"
|
||||||
</div>
|
caption="Arc Loader Web Interface"
|
||||||
),
|
/>
|
||||||
},
|
|
||||||
{
|
<p className="mt-16 mb-2">
|
||||||
id: "rr",
|
<strong>Terminal interface</strong>, Access it directly from the VM's console output.
|
||||||
label: "RR Loader",
|
</p>
|
||||||
content: (
|
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
<ImageWithCaption
|
||||||
<div className="bg-gray-50 p-4 rounded-lg mb-6">
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
|
||||||
<p className="mb-2">
|
alt="Arc Loader Terminal Interface"
|
||||||
<strong>In the case of RR</strong>, you'll need to manually enter the following command to open
|
caption="Arc Loader Terminal Interface"
|
||||||
the menu:
|
/>
|
||||||
</p>
|
</div>
|
||||||
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
|
)}
|
||||||
<code>./menu.sh</code>
|
|
||||||
</pre>
|
{activeLoader === "rr" && (
|
||||||
</div>
|
<div className="flex flex-col space-y-8">
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
|
<p className="mt-16 mb-2">
|
||||||
alt="RR Command Example"
|
<strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
|
||||||
caption="RR Command Example: ./menu.sh"
|
the IP address shown in the VM's console output. For example, in our case: http://192.169.0.33.
|
||||||
/>
|
</p>
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
|
<ImageWithCaption
|
||||||
alt="RR Loader Interface"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_2.png"
|
||||||
caption="RR Loader Interface"
|
alt="RR Command Example"
|
||||||
/>
|
caption="RR Loader Web Interface"
|
||||||
</div>
|
/>
|
||||||
),
|
|
||||||
},
|
<p className="mt-16 mb-2">
|
||||||
{
|
<strong>Terminal interface</strong>, Access it directly from the VM's console output by typing <strong>menu.sh</strong> on the screen
|
||||||
id: "tinycore",
|
</p>
|
||||||
label: "TinyCore Loader",
|
|
||||||
content: (
|
<ImageWithCaption
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
|
||||||
<ImageWithCaption
|
alt="RR Loader Interface"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
|
caption="RR Loader Terminal Interface"
|
||||||
alt="TinyCore Loader Interface"
|
/>
|
||||||
caption="TinyCore Loader Interface"
|
|
||||||
/>
|
<ImageWithCaption
|
||||||
</div>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
|
||||||
),
|
alt="RR Loader Interface"
|
||||||
},
|
caption="RR Loader Terminal Interface"
|
||||||
]}
|
/>
|
||||||
/>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeLoader === "tinycore" && (
|
||||||
|
<div className="flex flex-col space-y-8">
|
||||||
|
|
||||||
|
<p className="mt-16 mb-2">
|
||||||
|
<strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
|
||||||
|
the IP address shown in the VM's console output. For example, in our case: http://192.169.0.35.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_0_1.png"
|
||||||
|
alt="TinyCore Loader Interface"
|
||||||
|
caption="TinyCore Loader Web Interface"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p className="mt-16 mb-2">
|
||||||
|
<strong>Terminal interface</strong>, Access it directly from the VM's console output. Keep an eye on
|
||||||
|
the screen, as at some point it may prompt you to press a key to continue or ask if you want to change the language.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
|
||||||
|
alt="TinyCore Loader Interface"
|
||||||
|
caption="TinyCore Loader Terminal Interface"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 border-b pb-8">
|
<section className="mb-12 border-b pb-8">
|
||||||
@ -124,50 +223,38 @@ export default function Page() {
|
|||||||
After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may
|
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.
|
sometimes need to expand the options to see more models.
|
||||||
</p>
|
</p>
|
||||||
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-8">
|
||||||
id: "arc",
|
<ImageWithCaption
|
||||||
label: "Arc Loader",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
|
||||||
content: (
|
alt="Arc Model Selection"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
caption="Arc Model Selection"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
|
</div>
|
||||||
alt="Arc Model Selection"
|
)}
|
||||||
caption="Arc Model Selection"
|
|
||||||
/>
|
{activeLoader === "rr" && (
|
||||||
</div>
|
<div className="flex flex-col space-y-8">
|
||||||
),
|
<ImageWithCaption
|
||||||
},
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
|
||||||
{
|
alt="RR Model Selection"
|
||||||
id: "rr",
|
caption="RR Model Selection"
|
||||||
label: "RR Loader",
|
/>
|
||||||
content: (
|
</div>
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
)}
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
|
{activeLoader === "tinycore" && (
|
||||||
alt="RR Model Selection"
|
<div className="flex flex-col space-y-8">
|
||||||
caption="RR Model Selection"
|
<ImageWithCaption
|
||||||
/>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
|
||||||
</div>
|
alt="TinyCore Model Selection"
|
||||||
),
|
caption="TinyCore Model Selection"
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
id: "tinycore",
|
)}
|
||||||
label: "TinyCore Loader",
|
</div>
|
||||||
content: (
|
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
|
|
||||||
alt="TinyCore Model Selection"
|
|
||||||
caption="TinyCore Model Selection"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<p className="mt-4">In our example, we'll choose the SA6400 model.</p>
|
<p className="mt-4">In our example, we'll choose the SA6400 model.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -180,69 +267,57 @@ export default function Page() {
|
|||||||
After selecting the model, you need to choose the DSM version you want to install.
|
After selecting the model, you need to choose the DSM version you want to install.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-16">
|
||||||
id: "arc",
|
<ImageWithCaption
|
||||||
label: "Arc Loader",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
|
||||||
content: (
|
alt="Arc Version Selection - Step 1"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
caption="Arc Version Selection - Step 1"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
|
<ImageWithCaption
|
||||||
alt="Arc Version Selection - Step 1"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
|
||||||
caption="Arc Version Selection - Step 1"
|
alt="Arc Version Selection - Step 2"
|
||||||
/>
|
caption="Arc Version Selection - Step 2"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
|
</div>
|
||||||
alt="Arc Version Selection - Step 2"
|
)}
|
||||||
caption="Arc Version Selection - Step 2"
|
|
||||||
/>
|
{activeLoader === "rr" && (
|
||||||
</div>
|
<div className="flex flex-col space-y-16">
|
||||||
),
|
<ImageWithCaption
|
||||||
},
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
|
||||||
{
|
alt="RR Version Selection - Step 1"
|
||||||
id: "rr",
|
caption="RR Version Selection - Step 1"
|
||||||
label: "RR Loader",
|
/>
|
||||||
content: (
|
<ImageWithCaption
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
|
||||||
<ImageWithCaption
|
alt="RR Version Selection - Step 2"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
|
caption="RR Version Selection - Step 2"
|
||||||
alt="RR Version Selection - Step 1"
|
/>
|
||||||
caption="RR Version Selection - Step 1"
|
<ImageWithCaption
|
||||||
/>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
|
||||||
<ImageWithCaption
|
alt="RR Version Selection - Step 3"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
|
caption="RR Version Selection - Step 3"
|
||||||
alt="RR Version Selection - Step 2"
|
/>
|
||||||
caption="RR Version Selection - Step 2"
|
</div>
|
||||||
/>
|
)}
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
|
{activeLoader === "tinycore" && (
|
||||||
alt="RR Version Selection - Step 3"
|
<div className="flex flex-col space-y-16">
|
||||||
caption="RR Version Selection - Step 3"
|
<ImageWithCaption
|
||||||
/>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
|
||||||
</div>
|
alt="TinyCore Version Selection - Step 1"
|
||||||
),
|
caption="TinyCore Version Selection - Step 1"
|
||||||
},
|
/>
|
||||||
{
|
<ImageWithCaption
|
||||||
id: "tinycore",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
|
||||||
label: "TinyCore Loader",
|
alt="TinyCore Version Selection - Step 2"
|
||||||
content: (
|
caption="TinyCore Version Selection - Step 2"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
/>
|
||||||
<ImageWithCaption
|
</div>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
|
)}
|
||||||
alt="TinyCore Version Selection - Step 1"
|
</div>
|
||||||
caption="TinyCore Version Selection - Step 1"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
|
|
||||||
alt="TinyCore Version Selection - Step 2"
|
|
||||||
caption="TinyCore Version Selection - Step 2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 border-b pb-8">
|
<section className="mb-12 border-b pb-8">
|
||||||
@ -252,102 +327,91 @@ export default function Page() {
|
|||||||
</h2>
|
</h2>
|
||||||
<p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
|
<p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
|
||||||
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-16">
|
||||||
id: "arc",
|
<p className="mb-2">
|
||||||
label: "Arc Loader",
|
<strong>Arc</strong> gives you the option to configure automatically or manually adjust the settings.
|
||||||
content: (
|
If automatic configuration is selected, the loader will start applying the necessary settings and will
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
automatically reboot once the process is complete.
|
||||||
<p className="mb-2">
|
</p>
|
||||||
<strong>Arc</strong> gives you the option to configure automatically or manually adjust the
|
<ImageWithCaption
|
||||||
settings.
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
|
||||||
</p>
|
alt="Arc Auto Configuration"
|
||||||
<ImageWithCaption
|
caption="Arc Auto Configuration"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
|
/>
|
||||||
alt="Arc Auto Configuration"
|
<p className="mb-2">
|
||||||
caption="Arc Auto Configuration"
|
If we choose not to use automatic mode, we enter the menu to configure different options necessary for
|
||||||
/>
|
the loader:
|
||||||
<p className="mb-2">
|
</p>
|
||||||
If we choose not to use automatic mode, we enter the menu to configure different options necessary
|
<ImageWithCaption
|
||||||
for the loader:
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
|
||||||
</p>
|
alt="Arc Manual Configuration"
|
||||||
<ImageWithCaption
|
caption="Arc Manual Configuration"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
|
/>
|
||||||
alt="Arc Manual Configuration"
|
<ImageWithCaption
|
||||||
caption="Arc Manual Configuration"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
|
||||||
/>
|
alt="Arc SN/Mac Configuration"
|
||||||
<ImageWithCaption
|
caption="Arc SN/Mac Configuration"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
|
/>
|
||||||
alt="Arc SN/Mac Configuration"
|
<ImageWithCaption
|
||||||
caption="Arc SN/Mac Configuration"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_4.png"
|
||||||
/>
|
alt="Arc Sata Portmap"
|
||||||
<ImageWithCaption
|
caption="Arc Sata Portmap (use the recommended option)"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_4.png"
|
/>
|
||||||
alt="Arc Sata Portmap"
|
<ImageWithCaption
|
||||||
caption="Arc Sata Portmap (use the recommended option)"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
|
||||||
/>
|
alt="Arc Add-Ons Selection"
|
||||||
<ImageWithCaption
|
caption="Arc Add-Ons Selection"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
|
/>
|
||||||
alt="Arc Add-Ons Selection"
|
</div>
|
||||||
caption="Arc Add-Ons Selection"
|
)}
|
||||||
/>
|
|
||||||
</div>
|
{activeLoader === "rr" && (
|
||||||
),
|
<div className="flex flex-col space-y-8">
|
||||||
},
|
<ImageWithCaption
|
||||||
{
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
|
||||||
id: "rr",
|
alt="RR Add-On Step 1"
|
||||||
label: "RR Loader",
|
caption="RR Add-On Step 1"
|
||||||
content: (
|
/>
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
<ImageWithCaption
|
||||||
<ImageWithCaption
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
|
alt="RR Add-On Step 2"
|
||||||
alt="RR Add-On Step 1"
|
caption="RR Add-On Step 2 - Press to add add-ons"
|
||||||
caption="RR Add-On Step 1"
|
/>
|
||||||
/>
|
<ImageWithCaption
|
||||||
<ImageWithCaption
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png"
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png"
|
alt="RR Add-On Step 3"
|
||||||
alt="RR Add-On Step 2"
|
caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
|
||||||
caption="RR Add-On Step 2 - Press to add add-ons"
|
/>
|
||||||
/>
|
</div>
|
||||||
<ImageWithCaption
|
)}
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png"
|
|
||||||
alt="RR Add-On Step 3"
|
{activeLoader === "tinycore" && (
|
||||||
caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
|
<div className="flex flex-col space-y-8">
|
||||||
/>
|
<ImageWithCaption
|
||||||
</div>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
|
||||||
),
|
alt="TinyCore SN Configuration"
|
||||||
},
|
caption="TinyCore SN Configuration"
|
||||||
{
|
/>
|
||||||
id: "tinycore",
|
<ImageWithCaption
|
||||||
label: "TinyCore Loader",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
|
||||||
content: (
|
alt="TinyCore Random Option"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
caption="TinyCore Random Option - The random option is recommended"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
|
<ImageWithCaption
|
||||||
alt="TinyCore SN Configuration"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
|
||||||
caption="TinyCore SN Configuration"
|
alt="TinyCore MAC Configuration"
|
||||||
/>
|
caption="TinyCore MAC Configuration"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
|
<ImageWithCaption
|
||||||
alt="TinyCore Random Option"
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
|
||||||
caption="TinyCore Random Option - The random option is recommended"
|
alt="TinyCore VM MAC"
|
||||||
/>
|
caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
|
</div>
|
||||||
alt="TinyCore MAC Configuration"
|
)}
|
||||||
caption="TinyCore MAC Configuration"
|
</div>
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
|
|
||||||
alt="TinyCore VM MAC"
|
|
||||||
caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 border-b pb-8">
|
<section className="mb-12 border-b pb-8">
|
||||||
@ -360,50 +424,38 @@ export default function Page() {
|
|||||||
take a few minutes depending on the loader and the selected configuration. To start, select the "Build the
|
take a few minutes depending on the loader and the selected configuration. To start, select the "Build the
|
||||||
Loader" option.
|
Loader" option.
|
||||||
</p>
|
</p>
|
||||||
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-8">
|
||||||
id: "arc",
|
<ImageWithCaption
|
||||||
label: "Arc Loader",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
|
||||||
content: (
|
alt="Arc Build Loader"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
caption="Arc Build Loader"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
|
</div>
|
||||||
alt="Arc Build Loader"
|
)}
|
||||||
caption="Arc Build Loader"
|
|
||||||
/>
|
{activeLoader === "rr" && (
|
||||||
</div>
|
<div className="flex flex-col space-y-8">
|
||||||
),
|
<ImageWithCaption
|
||||||
},
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
|
||||||
{
|
alt="RR Build Loader"
|
||||||
id: "rr",
|
caption="RR Build Loader"
|
||||||
label: "RR Loader",
|
/>
|
||||||
content: (
|
</div>
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
)}
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
|
{activeLoader === "tinycore" && (
|
||||||
alt="RR Build Loader"
|
<div className="flex flex-col space-y-8">
|
||||||
caption="RR Build Loader"
|
<ImageWithCaption
|
||||||
/>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
|
||||||
</div>
|
alt="TinyCore Build Loader"
|
||||||
),
|
caption="TinyCore Build Loader"
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
id: "tinycore",
|
)}
|
||||||
label: "TinyCore Loader",
|
</div>
|
||||||
content: (
|
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
|
|
||||||
alt="TinyCore Build Loader"
|
|
||||||
caption="TinyCore Build Loader"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 border-b pb-8">
|
<section className="mb-12 border-b pb-8">
|
||||||
@ -415,50 +467,38 @@ export default function Page() {
|
|||||||
Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've
|
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.
|
created and start the DSM installation.
|
||||||
</p>
|
</p>
|
||||||
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
|
||||||
<TabGroup
|
<div className="mt-6">
|
||||||
tabs={[
|
{activeLoader === "arc" && (
|
||||||
{
|
<div className="flex flex-col space-y-8">
|
||||||
id: "arc",
|
<ImageWithCaption
|
||||||
label: "Arc Loader",
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
|
||||||
content: (
|
alt="Arc Boot Loader"
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
caption="Arc Boot Loader"
|
||||||
<ImageWithCaption
|
/>
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
|
</div>
|
||||||
alt="Arc Boot Loader"
|
)}
|
||||||
caption="Arc Boot Loader"
|
|
||||||
/>
|
{activeLoader === "rr" && (
|
||||||
</div>
|
<div className="flex flex-col space-y-8">
|
||||||
),
|
<ImageWithCaption
|
||||||
},
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
|
||||||
{
|
alt="RR Boot Loader"
|
||||||
id: "rr",
|
caption="RR Boot Loader"
|
||||||
label: "RR Loader",
|
/>
|
||||||
content: (
|
</div>
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
)}
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
|
{activeLoader === "tinycore" && (
|
||||||
alt="RR Boot Loader"
|
<div className="flex flex-col space-y-8">
|
||||||
caption="RR Boot Loader"
|
<ImageWithCaption
|
||||||
/>
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
|
||||||
</div>
|
alt="TinyCore Boot Loader"
|
||||||
),
|
caption="TinyCore Boot Loader"
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
id: "tinycore",
|
)}
|
||||||
label: "TinyCore Loader",
|
</div>
|
||||||
content: (
|
|
||||||
<div className="flex flex-col space-y-8 mt-6">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
|
|
||||||
alt="TinyCore Boot Loader"
|
|
||||||
caption="TinyCore Boot Loader"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* STARTING DSM INSTALLATION */}
|
{/* STARTING DSM INSTALLATION */}
|
||||||
@ -487,57 +527,71 @@ export default function Page() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-8">
|
<section className="mb-8">
|
||||||
<h2 className="text-2xl font-semibold mb-4 flex items-center">
|
<h2 className="text-2xl font-semibold mt-20 mb-4 flex items-center">
|
||||||
<Target className="h-6 w-6 mr-2 text-blue-500" />
|
<Target className="h-6 w-6 mr-2 text-blue-500" />
|
||||||
Tips
|
Tips
|
||||||
</h2>
|
</h2>
|
||||||
<ul className="list-disc pl-5 space-y-2">
|
<ul className="list-disc pl-5 space-y-4">
|
||||||
<li>
|
<li>
|
||||||
Keep in mind that available options may change depending on the loader version and developer updates. If you
|
Keep in mind that available options may change depending on the loader version and developer updates. If you
|
||||||
encounter issues during the loader creation process, consult the loader documentation. ProxMenux does not
|
encounter issues during the loader creation process, consult the loader documentation:
|
||||||
provide support for the different loaders.
|
|
||||||
</li>
|
</li>
|
||||||
<li>Some loaders offer the possibility of configuration via web with ip:7080 or 7090.</li>
|
|
||||||
|
<div className="flex flex-wrap gap-4 mt-2">
|
||||||
|
<a
|
||||||
|
href="https://github.com/AuxXxilium/arc"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<Github className="h-5 w-5 mr-2" />
|
||||||
|
Arc Documentation
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/RROrg/rr"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<Github className="h-5 w-5 mr-2" />
|
||||||
|
RR Documentation
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/PeterSuh-Q3/tinycore-redpill"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<Github className="h-5 w-5 mr-2" />
|
||||||
|
TinyCore Documentation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more
|
Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more
|
||||||
recent models.
|
recent models.
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<div className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4">
|
||||||
|
<p className="font-semibold">Update:</p>
|
||||||
|
<p>
|
||||||
|
Some loaders offer the option to update the loader directly from the menu.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4">
|
||||||
|
<p className="font-semibold">Important:</p>
|
||||||
|
<p>
|
||||||
|
ProxMenux does not provide support for the different loaders.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
interface Tab {
|
|
||||||
id: string
|
|
||||||
label: string
|
|
||||||
content: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabGroup({ tabs }: { tabs: Tab[] }) {
|
|
||||||
const [activeTab, setActiveTab] = useState(tabs[0].id)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="flex border-b">
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<button
|
|
||||||
key={tab.id}
|
|
||||||
onClick={() => setActiveTab(tab.id)}
|
|
||||||
className={`px-4 py-2 font-medium text-sm focus:outline-none ${
|
|
||||||
activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="mt-4">{tabs.find((tab) => tab.id === activeTab)?.content}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
|
function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
|
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user