UI - Update Home and How It Works pages

ui/src/components/howitworkscomponents/AddWorkflowDoc.svelte

@@ -0,0 +1,58 @@
+<script>
+    import * as marked from "marked";
+
+    const workflowInstruction = 
+`# How to Integrate CodeAuditor Workflow into your GitHub build pipeline
+#### 1. Go to CodeAuditor Workflow GitHub Marketplace at https://github.com/marketplace/actions/codeauditor-workflow
+#### 2. Click on "Use latest version" green button on top right
+#### 3. Copy and Paste the installation snippet
+
+<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: 75%;
+        alt="hero"
+        src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/4e3e01a7-63d2-4192-949f-a162ea6a784b"
+    />
+</a>
+
+**Figure: CodeAuditor Workflow Installation Snippet**
+
+#### 4. Add the following required inputs
+
+| name         | required | type  | description |
+| ------------ | ---      | ------ | ----------- |
+| GitHub_Token        | yes      | string | Your GitHub personal access token used to fetch data. Pass a secret by for instance using 'secrets.GH_TOKEN'. [Go here](https://github.com/settings/tokens/new?scopes=read:user) to generate one
+| token     | yes      | string | Your personal CodeAuditor token that can be found on CodeAuditor's How It Works page
+| url       | yes      | string | The url used on your CodeAuditor scan
+
+## Example usage
+
+\`\`\` yml
+name: Test CodeAuditor Workflow
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: CodeAuditor Workflow
+        uses: SSWConsulting/[email protected]
+        with:
+          # Your Scan URL
+          url: $\{{ vars.SCANURL }}
+          # Your CodeAuditor token
+          token: $\{{ secrets.CODEAUDITORTOKEN }}
+          # Your GitHub Token
+          GitHub_Token: $\{{ secrets.GH_TOKEN }}
+
+\`\`\`
+`
+</script>
+
+<article class="markdown-body">
+    {@html marked.parse(workflowInstruction)}
+</article>

ui/src/components/howitworkscomponents/AlertEmailDoc.svelte

@@ -8,7 +8,7 @@
 <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/8fd73e0a-9b23-4bc6-b7f6-fdf35a04a46a"
     />
@@ -21,7 +21,7 @@
 <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/b51a2548-d452-4496-89ab-41fde0a2500a"
     />
@@ -34,7 +34,7 @@
 <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/69b44d1b-22b3-477c-8ab4-19560d88e64d"
     />

ui/src/components/howitworkscomponents/CustomizeRuleDoc.svelte

@@ -10,7 +10,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/d1c7ac42-923e-42e0-a914-df4c018052e9"
     />
@@ -23,7 +23,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/76ed8b0b-2bfd-4f6c-ade4-dd96ab5e9f17"
     />
@@ -38,7 +38,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/dccf8256-f005-44ad-918c-89f76e9e7862"
     />
@@ -51,7 +51,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/e10795a2-13dd-449e-8a72-25566b1f1355"
     />

ui/src/components/howitworkscomponents/ScanCompareDoc.svelte

@@ -8,7 +8,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/7c995453-5b40-4ef2-94fb-0ea1feeb7182"
     />
@@ -21,7 +21,7 @@
   <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%;
+        style="max-width: 75%;
         alt="hero"
         src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/2e2f25a1-1c5f-4f82-afe2-72488b530666"
     />

ui/src/containers/Home.svelte

@@ -8,21 +8,32 @@
     <div
       class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div>
+      <div class="flex flex-col">
         <div
-          class="title-font leading-tight text-4xl mb-10 font-medium text-gray-900"
+          class="title-font leading-tight text-4xl mb-12 font-medium text-gray-900"
         >
           Find the gremlins in your website
         </div>
-        <button
-          class="bgred hover:bg-red-800 text-white font-semibold py-2 px-4 border hover:border-transparent rounded"
-          on:click={() => window.open("https://github.com/SSWConsulting/SSW.CodeAuditor", '_blank').focus()}
-        >
-          <i class="fa-brands fa-github fa-xl"></i>
-          <span class="ml-2 text-xl">
-            Check out our GitHub
-          </span>
-      </button>
+        <div class="mb-6">
+          <button
+            class="bgred hover:bg-red-800 text-white font-semibold py-2 px-4 border hover:border-transparent rounded"
+            on:click={() => window.open("https://github.com/SSWConsulting/SSW.CodeAuditor", '_blank').focus()}
+          >
+            <i class="fa-brands fa-github fa-xl"></i>
+            <span class="ml-2 text-xl">
+              Check out our GitHub
+            </span>
+          </button>
+        </div>
+        <div class="mb-8">
+          <a 
+            class="link text-xl cursor-pointer"
+            target="_blank"
+            href="https://github.com/marketplace/actions/codeauditor-workflow"
+          >
+            Integrate CodeAuditor into your build pipeline
+          </a>
+        </div>
       </div>
       <div>
         <a href="/images/dashboard.png" target="_blank">

ui/src/containers/HowItWorks.svelte

@@ -6,6 +6,7 @@
   import AddRuleDoc from "../components/howitworkscomponents/AddRuleDoc.svelte";
   import CustomizeRuleDoc from "../components/howitworkscomponents/CustomizeRuleDoc.svelte";
   import ScanCompareDoc from "../components/howitworkscomponents/ScanCompareDoc.svelte";
+  import AddWorkflowDoc from "../components/howitworkscomponents/AddWorkflowDoc.svelte";
 </script>
 
 <div class="container grid grid-cols-7 mx-auto">
@@ -55,6 +56,13 @@
             <Link to="/howitworks/addingcustomrule">How to Add custom HTML Rule</Link>
           </span>
         </span>
+        <span class="textdark font-sans font-bold lg:pt-0 mx-2 sm:mx-4 mt-2">
+          <span
+            class="header-item"
+          >
+            <Link to="/howitworks/addingworkflow">How to Integrate CodeAuditor Workflow</Link>
+          </span>
+        </span>
       </div>
     </div>
     <div class="col-span-6">
@@ -83,6 +91,10 @@
           <AddRuleDoc />
         </Route>
 
+        <Route path="/howitworks/addingworkflow">
+          <AddWorkflowDoc />
+        </Route>
+
         <Route>
           <GettingStarted />
         </Route>