Merge pull request #785 from SSWConsulting:add-paging-how-it-works

Updated docs on How It Works page

ui/src/components/howitworkscomponents/AlertEmailDoc.svelte

@@ -4,15 +4,42 @@
     const emailAlertInstruction = 
 `# How to send automated Email Alert for future scans
 #### 1. Click on "Send Email Alerts" to open the modal
-![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/d466a84e-b142-4185-880a-1d60dac78d41)
+
+<a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/8fd73e0a-9b23-4bc6-b7f6-fdf35a04a46a" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/8fd73e0a-9b23-4bc6-b7f6-fdf35a04a46a"
+    />
+</a>
+
 **Figure: Send Email Alerts button**
 
 #### 2. Add or remove email addresses to receive alert
-![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/4b7492d0-5dde-4b6c-be43-e1b05b98fb89)
+
+<a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/b51a2548-d452-4496-89ab-41fde0a2500a" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/b51a2548-d452-4496-89ab-41fde0a2500a"
+    />
+</a>
+
 **Figure: Email alerts modal**
 
-#### 3. After you run your next scan, the email addresses will receive automated email alerts 
-![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/69b44d1b-22b3-477c-8ab4-19560d88e64d)
+#### 3. After your next scan has completed, the email addresses will receive automated email alerts 
+
+<a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/69b44d1b-22b3-477c-8ab4-19560d88e64d" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/69b44d1b-22b3-477c-8ab4-19560d88e64d"
+    />
+</a>
+
 **Figure: Sample email alerts**`
 </script>
 

ui/src/components/howitworkscomponents/CustomizeRuleDoc.svelte

@@ -3,17 +3,61 @@
     
     const customRuleConfig = `
   # How to Use Custom HTML Rules Configuration
-  #### 1. Click on "Enable/Disable Rules" 
-  ![image](https://user-images.githubusercontent.com/67776356/229018349-ab11cb85-1650-41c5-b3e5-af3e81a53bc0.png)
-  **Figure: Enable/Disable Rules button**
+  #### 1. Go to your scan HTML result page, click on "Enable/Disable Rules" 
 
-  #### 2. Select which custom rules you want for your next scan  
-  ![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/f6d09566-0ff8-4ef8-a120-53fade615689)
-  **Figure: Custom rule selection modal**
+  #### 2. Select the custom rules you want to include for your next scan  
+
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/d1c7ac42-923e-42e0-a914-df4c018052e9" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/d1c7ac42-923e-42e0-a914-df4c018052e9"
+    />
+  </a>
 
-  #### 3. After you run your next scan, you should only be able to see the scan results for your selected html rules
-  ![image](https://user-images.githubusercontent.com/67776356/229019594-39b9e95e-c91b-41f8-b3a4-e33d370bad0c.png)
   **Figure: Custom rule selection modal**
+
+  #### 3. When you run next scan, only your selected html rules will be in effect 
+
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/76ed8b0b-2bfd-4f6c-ade4-dd96ab5e9f17" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/76ed8b0b-2bfd-4f6c-ade4-dd96ab5e9f17"
+    />
+  </a>
+
+  **Figure: Selected scanned rules**
+
+  # How to Customize HTML Rule Options
+  #### 1. Go to your scan HTML result page, click on "Enable/Disable Rules" 
+  #### 2. Any custom rule with the gear icon ⚙ allows custom options
+
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/dccf8256-f005-44ad-918c-89f76e9e7862" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/dccf8256-f005-44ad-918c-89f76e9e7862"
+    />
+  </a>
+
+  **Figure: Input option for custom values**
+  #### 3. In your next scan, your custom input options will be in effect instead of the rule's default values
+  #### 4. You can also ignore the rules on certain Urls of your choice
+
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/e10795a2-13dd-449e-8a72-25566b1f1355" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/e10795a2-13dd-449e-8a72-25566b1f1355"
+    />
+  </a>
+
+  **Figure: Input option to ignore scanning rules on certain Urls**
   `
 </script>
 

ui/src/components/howitworkscomponents/HowToUse.svelte

@@ -22,7 +22,7 @@
 # How to Use CodeAuditor
 Scan any website for broken links, [HTML Issues](https://htmlhint.com), [Google Lighthouse Audit](https://developers.google.com/web/tools/lighthouse) and [Artillery Load Test](https://artillery.io/) by running the following command:
 \`\`\` bash
-$ docker container run --cap-add=SYS_ADMIN sswconsulting/codeauditor ${tokenText} --url <URL>
+$ docker run sswconsulting/codeauditor ${tokenText} --url <URL>
 \`\`\`
 `;
 

ui/src/components/howitworkscomponents/ScanCompareDoc.svelte

@@ -2,13 +2,31 @@
     import * as marked from "marked";
 
     const scanCompareInstruction = `
-  # How to compare to latest scan
+  # How to compare between scans
   #### 1. Click on "Compare to latest scan" to go to scan compare page
-  ![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/a0b1c84a-8dd7-42d8-9366-587c14d09596)
+
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/7c995453-5b40-4ef2-94fb-0ea1feeb7182" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/7c995453-5b40-4ef2-94fb-0ea1feeb7182"
+    />
+  </a>
+
   **Figure: Scan compare button**
 
   #### 2. Select in the dropdown list to choose which previous scan you want to compare to the latest one
-  ![Image](https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/d0978ed2-417d-4085-907e-ae4fc6a8b20b)
+  
+  <a href="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/2e2f25a1-1c5f-4f82-afe2-72488b530666" target="_blank">
+    <img
+        class="object-cover object-center rounded bordered"
+        style="max-width: 85%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/2e2f25a1-1c5f-4f82-afe2-72488b530666"
+    />
+  </a>
+
   **Figure: Scan comparison page**
   `
 </script>

ui/src/containers/HowItWorks.svelte

@@ -45,7 +45,7 @@
           <span
             class="header-item"
           >
-            <Link to="/howitworks/customizerule">How to Customize HTML Rule set</Link>
+            <Link to="/howitworks/customizerule">How to Customize HTML Rules</Link>
           </span>
         </span>
         <span class="textdark font-sans font-bold lg:pt-0 mx-2 sm:mx-4 mt-2">

ui/src/containers/Layout.svelte

@@ -61,7 +61,7 @@
           </span>
           <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
             <span
-              class="header-item {currentRoute.path === '/howitworks'
+              class="header-item {currentRoute.path.includes('/howitworks')
                 ? 'textred'
                 : 'textdark'}"
             >