From 3afcf58397161f5db9c4419a99649157649bca7f Mon Sep 17 00:00:00 2001
From: Eric Hammond <ehammond@thinksome.com>
Date: Sun, 15 Dec 2024 13:41:50 -0800
Subject: [PATCH] clarify install in docs

---
 app/components/Installation.tsx   | 101 ++++++++++++++++++++++--------
 app/components/SafetyFeatures.tsx |   6 +-
 doc/tree.txt                      |   3 +-
 install-script-header.txt         |   2 +-
 4 files changed, 81 insertions(+), 31 deletions(-)

diff --git a/app/components/Installation.tsx b/app/components/Installation.tsx
index 8cb0119..4accacc 100644
--- a/app/components/Installation.tsx
+++ b/app/components/Installation.tsx
@@ -7,37 +7,86 @@ export default function Installation() {
     navigator.clipboard.writeText(text)
   }
 
-  const installationCode = `# Install pipx if needed
-sudo apt install pipx  # Linux
-brew install pipx      # macOS
-pipx ensurepath
+  const installationCode = `curl -fsSL https://getabc.sh/ | bash`
 
-# Install abc
-pipx install git+https://github.com/alestic/abc.git
-abc_setup`
+  const afterInstallCode = `# For bash:
+source ~/.bashrc
+
+# For zsh:
+source ~/.zshrc
+
+# For tcsh:
+source ~/.tcshrc`
+
+  const verifyCode = `abc --version
+abc hi`
 
   return (
-    <section id="installation" className="space-y-6 bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl">
+    <section id="installation" className="space-y-8 bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl">
       <h2 className="text-4xl font-bold text-gray-800 border-b pb-4">Quick Install</h2>
-      <div className="relative">
-        <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
-          <code>{installationCode}</code>
-        </pre>
-        <button
-          onClick={() => copyToClipboard(installationCode)}
-          className="absolute top-4 right-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition-colors"
-          aria-label="Copy to clipboard"
-        >
-          <Copy className="w-5 h-5 text-white" />
-        </button>
+
+      {/* Installation Steps */}
+      <div className="space-y-4">
+        <h3 className="text-2xl font-semibold text-gray-700">Install the latest version from GitHub using pipx</h3>
+        <div className="relative">
+          <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
+            <code>{installationCode}</code>
+          </pre>
+          <button
+            onClick={() => copyToClipboard(installationCode)}
+            className="absolute top-4 right-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition-colors"
+            aria-label="Copy to clipboard"
+          >
+            <Copy className="w-5 h-5 text-white" />
+          </button>
+        </div>
+      </div>
+
+      {/* Reload your shell configuration */}
+      <div className="space-y-4">
+        <h3 className="text-2xl font-semibold text-gray-700">Reload your shell configuration</h3>
+        <div className="relative">
+          <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
+            <code>{afterInstallCode}</code>
+          </pre>
+          <button
+            onClick={() => copyToClipboard(afterInstallCode)}
+            className="absolute top-4 right-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition-colors"
+            aria-label="Copy to clipboard"
+          >
+            <Copy className="w-5 h-5 text-white" />
+          </button>
+        </div>
+      </div>
+
+      {/* Verification */}
+      <div className="space-y-4">
+        <h3 className="text-2xl font-semibold text-gray-700">Verify Installation</h3>
+        <div className="relative">
+          <pre className="bg-gray-800 p-6 rounded-lg overflow-x-auto text-green-400">
+            <code>{verifyCode}</code>
+          </pre>
+          <button
+            onClick={() => copyToClipboard(verifyCode)}
+            className="absolute top-4 right-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition-colors"
+            aria-label="Copy to clipboard"
+          >
+            <Copy className="w-5 h-5 text-white" />
+          </button>
+        </div>
+      </div>
+
+      {/* More Info */}
+      <div className="space-y-4">
+        <h3 className="text-2xl font-semibold text-gray-700">More Information</h3>
+        <p className="text-gray-600 text-lg">
+          For more details, manual installation options, upgrade, uninstall, and troubleshooting, see the{' '}
+          <a href="https://github.com/alestic/abc/blob/main/INSTALL.md" target="_blank" rel="noopener noreferrer" className="text-green-600 hover:underline">
+            complete installation guide
+          </a>
+          .
+        </p>
       </div>
-      <p className="text-gray-600 text-lg">
-        For alternative methods and troubleshooting, see the{' '}
-        <a href="https://github.com/alestic/abc/blob/main/INSTALL.md" target="_blank" rel="noopener noreferrer" className="text-green-600 hover:underline">
-          detailed installation guide
-        </a>
-        .
-      </p>
     </section>
   )
 }
diff --git a/app/components/SafetyFeatures.tsx b/app/components/SafetyFeatures.tsx
index cc06889..197ecce 100644
--- a/app/components/SafetyFeatures.tsx
+++ b/app/components/SafetyFeatures.tsx
@@ -10,7 +10,7 @@ export default function SafetyFeatures() {
   return (
     <section className="space-y-6 bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl">
       <h2 className="text-4xl font-bold text-gray-800 border-b pb-4">Safety Features</h2>
-      <p className="text-xl text-gray-600">abc uses the LLM to evaluate the potential danger of each generated command using a scale:</p>
+      <p className="text-xl text-gray-600">abc uses the LLM to evaluate the potential danger of each generated command using a risk scale:</p>
       <ul className="space-y-4">
         {dangerLevels.map(({ level, description, icon: Icon }) => (
           <li key={level} className="flex items-center space-x-3">
@@ -22,9 +22,9 @@ export default function SafetyFeatures() {
         ))}
       </ul>
       <p className="text-gray-600 bg-yellow-100 p-4 rounded-lg border border-yellow-200">
-        <strong>Note:</strong> Commands the LLM evaluates with Level 2 risk are prefixed with a <code
+        Commands the LLM evaluates with Level 2 risk are prefixed with a <code
         className="font-mono bg-gray-800 text-green-400 px-2 py-0.5 rounded"
-        >#DANGEROUS#</code> comment, which requires removing before execution.
+        >#DANGEROUS#</code> comment, which requires removal before execution.
         A brief justification is provided for its evaluation, helping the user understand the potential risk.
       </p>
     </section>
diff --git a/doc/tree.txt b/doc/tree.txt
index 68ddf6d..ff05c5c 100644
--- a/doc/tree.txt
+++ b/doc/tree.txt
@@ -1,6 +1,7 @@
 getabc.sh
 ├── .eslintrc.json
 ├── .gitignore
+├── install-script-header.txt
 ├── Makefile
 ├── next.config.js
 ├── package.json
@@ -35,4 +36,4 @@ getabc.sh
     └── workflows
         └── nextjs.yml
 
-6 directories, 30 files
+6 directories, 31 files
diff --git a/install-script-header.txt b/install-script-header.txt
index 81f6e7f..9ddd59c 100644
--- a/install-script-header.txt
+++ b/install-script-header.txt
@@ -2,7 +2,7 @@
 bash -c '
   tmp_dir=$(mktemp -d) &&
   trap "rm -rf \"$tmp_dir\"" EXIT &&
-  echo "Downloading the latest abc install script from Eric Hammond's Alestic organization on GitHub" &&
+  echo "Downloading the latest abc install script from Eric Hammond\'s Alestic organization on GitHub" &&
   curl -fsSL https://raw.githubusercontent.com/alestic/abc/refs/heads/main/install_from_github.sh \
     -o "$tmp_dir/abc_install.sh" &&
   chmod +x "$tmp_dir/abc_install.sh" &&