From 33ba0d5e7eb4a7518b9952dc7708057615ad8779 Mon Sep 17 00:00:00 2001 From: dyzulk <66510723+dyzulk@users.noreply.github.com> Date: Tue, 6 Jan 2026 15:22:49 +0700 Subject: [PATCH] style: refine Linux documentation UI with manual steps and dynamic CLI selector --- src/app/(public)/HomeClient.tsx | 134 +++++++++++++++++++++----------- src/messages/en.json | 9 ++- src/messages/id.json | 9 ++- 3 files changed, 100 insertions(+), 52 deletions(-) diff --git a/src/app/(public)/HomeClient.tsx b/src/app/(public)/HomeClient.tsx index fc9f7e3..68d6527 100644 --- a/src/app/(public)/HomeClient.tsx +++ b/src/app/(public)/HomeClient.tsx @@ -91,45 +91,93 @@ function TabButton({ id, label, active, onClick, icon }: { id: string, label: st ); } -function OsGuideContent({ title, steps }: { title: string, steps: string[] }) { +function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title: string, steps: string[], selectedOs: string, certificates: CaCertificate[], t: any }) { + const [guideCertSerial, setGuideCertSerial] = useState(certificates[0]?.serial); + const [copied, setCopied] = useState(false); + + const activeCert = certificates.find(c => c.serial === guideCertSerial) || certificates[0]; + const linuxCli = activeCert?.linux_cdn_url ? `curl -sL ${activeCert.linux_cdn_url} | sudo bash` : ''; + + const copyCli = () => { + if (!linuxCli) return; + navigator.clipboard.writeText(linuxCli); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + return ( -
-

-
- {title} -

- +
+ + {selectedOs === 'linux' && ( +
+
+
+
+ + {t('guide_linux_shortcut_title')} +
+

{t('guide_linux_shortcut_desc')}

+
+ + {/* Cert Selector */} +
+ +
+ +
+
+
+ +
+
+ $ + {linuxCli || 'No Linux script available for this certificate.'} +
+ +
+
+ )} ); } function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void }) { - const [copied, setCopied] = useState(false); - - const copyLinuxCli = () => { - if (!cert.linux_cdn_url) return; - const command = `curl -sL ${cert.linux_cdn_url} | sudo bash`; - navigator.clipboard.writeText(command); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - return (
{/* Sync Status Badge */} @@ -198,7 +246,7 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertif
{cert.linux_cdn_url && ( -
+
-
)}
@@ -290,6 +326,12 @@ const CheckIcon = ({ className }: { className?: string }) => ( ); +const ChevronDownIcon = ({ className }: { className?: string }) => ( + + + +); + export default function HomeClient() { const t = useTranslations("Home"); const [certificates, setCertificates] = useState([]); @@ -503,11 +545,11 @@ export default function HomeClient() { setSelectedOs('mobile')} icon={} /> -
- {selectedOs === 'windows' && } - {selectedOs === 'macos' && } - {selectedOs === 'linux' && } - {selectedOs === 'mobile' && } +
+ {selectedOs === 'windows' && } + {selectedOs === 'macos' && } + {selectedOs === 'linux' && } + {selectedOs === 'mobile' && }
diff --git a/src/messages/en.json b/src/messages/en.json index e96eabe..c7afea6 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -212,10 +212,13 @@ "Go to 'About' > 'Certificate Trust Settings' and enable full trust." ], "guide_steps_linux": [ - "Use the one-liner command for instant setup (recommended):", - "curl -sL [URL] | sudo bash", - "Note: Get the [URL] by right-clicking the 'Linux' download button on the certificate card above." + "Download the .sh installer script.", + "Open terminal and run: sudo bash install-*.sh", + "The script will automatically detect and update your CA store." ], + "guide_linux_shortcut_title": "One-liner Shortcut (Recommended)", + "guide_linux_shortcut_desc": "Copy and paste this command to your terminal for instant installation:", + "guide_linux_select_cert": "Select Certificate to install:", "guide_steps_mobile": [ "Android: Settings > Security > Install from storage > CA Certificate.", "iOS: Install the profile, then Settings > General > About > Certificate Trust Settings." diff --git a/src/messages/id.json b/src/messages/id.json index b7c8bcc..855cb1d 100644 --- a/src/messages/id.json +++ b/src/messages/id.json @@ -212,10 +212,13 @@ "Buka 'About' > 'Certificate Trust Settings' dan aktifkan kepercayaan penuh." ], "guide_steps_linux": [ - "Gunakan perintah satu-baris untuk instalasi instan (disarankan):", - "curl -sL [URL] | sudo bash", - "Catatan: Dapatkan [URL] dengan klik kanan tombol 'Linux' pada kartu sertifikat di atas lalu 'Salin Alamat Link'." + "Unduh skrip penginstal .sh.", + "Buka terminal dan jalankan: sudo bash install-*.sh", + "Skrip akan secara otomatis mendeteksi distro dan memperbarui penyimpanan CA Anda." ], + "guide_linux_shortcut_title": "Pintas Satu-Baris (Disarankan)", + "guide_linux_shortcut_desc": "Salin dan tempel perintah ini ke terminal Anda untuk instalasi instan:", + "guide_linux_select_cert": "Pilih Sertifikat untuk diinstal:", "guide_steps_mobile": [ "Android: Pengaturan > Keamanan > Instal dari penyimpanan > Sertifikat CA.", "iOS: Instal profil, lalu Pengaturan > Umum > Mengenai > Pengaturan Kepercayaan Sertifikat."