From 8d6c256867a0b6ef8262e52299abd487cf08299e Mon Sep 17 00:00:00 2001
From: Omoyx <omoyx@icloud.com>
Date: Tue, 6 Jan 2026 08:58:45 +0800
Subject: [PATCH] fix(website): use @twsxtd/hapi instead of deprecated hapi
 package (#34)

## What changed

The website currently suggests installing `hapi` directly from npm, which
resolves to the deprecated `hapi@18.1.0` package (with known security issues).

This PR updates the installation command to use the correct CLI package:
`@twsxtd/hapi`.

## Why

Running `npm install -g hapi` triggers a deprecation and security warning:

> This version contains severe security issues and defects and should not be used

This is confusing for users and may lead them to believe HAPI itself is insecure.

## Result

- Users install the correct package
- No npm security warning
- Instructions now match the actual CLI package name
---
 website/src/pages/Home.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx
index 10e84d86..1469df03 100644
--- a/website/src/pages/Home.tsx
+++ b/website/src/pages/Home.tsx
@@ -281,8 +281,8 @@ export default function Home() {
                       <h3 className="font-bold">{t('installation.npm.step1')}</h3>
                     </div>
                     <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
-                      <code>npm install -g hapi</code>
-                      <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npm install -g hapi", "install")}>
+                      <code>npm install -g @twsxtd/hapi</code>
+                      <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npm install -g @twsxtd/hapi", "install")}>
                         {copied === "install" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                       </Button>
                     </div>