Add header text-decoration.

src/components/auditors.vue

@@ -3,7 +3,7 @@
   <div class="m-0 px-4 px-md-5 py-4 bg-dark text-light">
     <div>
       <br id="auditors">
-      <h2 class="pb-2 border-bottom">Auditors</h2>
+      <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('auditors')">Auditors</h2>
 
       There are many auditors, this is only a short list because of their usage of one of the <a href="#" @click.prevent="navigateTo('automation-platforms')">Automation Platforms</a>.
       Auditors are the only ones that grant you the SOC 2 certification, they may or may not require that you use an Automation Platform to complete your audit.
@@ -76,7 +76,7 @@
 
       <br id="consultants">
 
-      <h2 class="pb-2 border-bottom">Security Consultants</h2>
+      <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('consultants')">Security Consultants</h2>
 
       Most of the reports from the above providers are pretty easy to read, but you get stuck and need help reviewing them or you need a consultant to help you implement the controls to allow you to pass the audit, one of these might help.
       <br><br>
@@ -150,6 +150,8 @@
 import EasyDataTable from 'vue3-easy-data-table';
 import 'vue3-easy-data-table/dist/style.css';
 
+import { navigateTo } from './utilities';
+
 import Danger from './danger.vue';
 import Warning from './warning.vue';
 import Success from './success.vue';
@@ -195,20 +197,6 @@ const showRow = clickedElement => {
   }
 };
 
-const navigateTo = target => {
-  if (!target) {
-    window.scrollTo(0, -window.scrollY);
-    return;
-  }
-  const element = document.getElementById(target);
-  window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 200);
-  setTimeout(() => {
-    if (Math.abs(element.getBoundingClientRect().top - 60) > 10) {
-      window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 200);
-    }
-  }, 10);
-};
-
 </script>
 
 <style lang="scss" scoped>

src/components/home.vue

@@ -172,7 +172,7 @@
     <br id="guide">
     <div class="w-100">
       <div class="m-0 p-4 p-md-5 bg-dark text-light">
-        <h2 class="pb-2 border-bottom">Pass the SOC 2 Type II Audit</h2>
+        <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('guide')">Pass the SOC 2 Type II Audit</h2>
         <div>The system description must be presented in accordance with the AICPA's description criteria (DC 200). Each of the description criteria (DC) are described below:</div>
         <div class="row g-4 my-2 row-cols-1 row-cols-lg-3">
           <div class="col d-flex align-items-start">
@@ -239,7 +239,7 @@
     <br id="reading">
     <div class="w-100">
       <div class="m-0 p-4 p-4 p-md-5 bg-dark text-light">
-        <h2 class="pb-2 border-bottom">External References</h2>
+        <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('reading')">External References</h2>
 
         <div class="row g-4 my-2 row-cols-1 row-cols-lg-2">
 
@@ -366,7 +366,7 @@
 
     <div id="tools" class="w-100">
       <div class="m-0 p-4 p-4 p-md-5 bg-dark text-light">
-        <h2 class="pb-2 border-bottom">Tools</h2>
+        <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('tools')">Tools</h2>
 
         <div class="row g-4 my-2 row-cols-1 row-cols-lg-2">
 
@@ -465,13 +465,15 @@
 </template>
 
 <script setup>
+import { DateTime } from 'luxon';
 
 import homeNavbar from './homeNavbar.vue';
 import aicpaLogo from './aicpaLogo.png';
 import logger from '../logger';
 import Auditors from './auditors.vue';
 import Platforms from './platforms.vue';
-import { DateTime } from 'luxon';
+
+import { navigateTo } from './utilities';
 
 const openGithub = gotoIssuePage => {
   const path = gotoIssuePage ? 'issues' : 'pulls';
@@ -482,20 +484,6 @@ if (!window.location.href.match('localhost')) {
   logger.log({ title: 'PageHit' });
 }
 
-const navigateTo = target => {
-  if (!target) {
-    window.scrollTo(0, -window.scrollY);
-    return;
-  }
-  const element = document.getElementById(target);
-  window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
-  setTimeout(() => {
-    if (Math.abs(element.getBoundingClientRect().top - 60) > 10) {
-      window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
-    }
-  }, 10);
-};
-
 const thisYear = DateTime.utc().year;
 
 </script>

src/components/homeNavbar.vue

@@ -42,22 +42,10 @@
 </template>
 
 <script setup>
+import { navigateTo } from './utilities';
 
 const openGithub = () => { window.open('https://github.com/Rhosys/soc2.fyi#soc-2-compliance-website', '_blank'); };
 
-const navigateTo = target => {
-  if (!target) {
-    window.scrollTo(0, -window.scrollY);
-    return;
-  }
-  const element = document.getElementById(target);
-  window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
-  setTimeout(() => {
-    if (Math.abs(element.getBoundingClientRect().top - 60) > 10) {
-      window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
-    }
-  }, 10);
-};
 </script>
 
 <style lang="scss" scoped>

src/components/pen-tests.vue

@@ -2,7 +2,7 @@
     <div>
         <br id="pen-tests">
 
-    <h2 class="pb-2 border-bottom">Pen Testers</h2>
+    <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('pen-tests')">Pen Testers</h2>
 
     Pen testing is not required for many certifications. So generally can be avoided unless you want some additional assurances.
     The prices below are aligned for a medium sized application service running for a single product.
@@ -182,7 +182,10 @@
 </template>
 
 <script setup>
+import { navigateTo } from './utilities';
+
 import Danger from './danger.vue';
 import Warning from './warning.vue';
 import Success from './success.vue';
-</script>
+
+</script>

src/components/platforms.vue

@@ -3,7 +3,7 @@
   <div class="m-0 px-4 px-md-5 py-4 bg-dark text-light">
     <br id="automation-platforms">
     <div>
-      <h2 class="pb-2 border-bottom">Automation Platforms</h2>
+      <h2 class="pb-2 border-bottom header-link" @click="() => navigateTo('automation-platforms')">Automation Platforms</h2>
 
       These are <strong class="text-info">Not Required</strong>, but your auditor may require that you use one. The collection of evidence for following policies can be challenging. Many auditors require you to manually upload screen shots that prove you are following your policies. These platforms exist to automatically collect evidence from your cloud providers and integrated third party tools.
 
@@ -94,6 +94,8 @@
 import EasyDataTable from 'vue3-easy-data-table';
 import 'vue3-easy-data-table/dist/style.css';
 
+import { navigateTo } from './utilities';
+
 import Danger from './danger.vue';
 import Warning from './warning.vue';
 import Success from './success.vue';
@@ -263,20 +265,6 @@ const showRow = clickedElement => {
   }
 };
 
-const navigateTo = target => {
-  if (!target) {
-    window.scrollTo(0, -window.scrollY);
-    return;
-  }
-  const element = document.getElementById(target);
-  window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 200);
-  setTimeout(() => {
-    if (Math.abs(element.getBoundingClientRect().top - 60) > 10) {
-      window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 200);
-    }
-  }, 10);
-};
-
 </script>
 
 <style lang="scss" scoped>

src/components/utilities.js

@@ -0,0 +1,16 @@
+export function navigateTo(htmlElementId) {
+  console.log('****');
+  if (!htmlElementId) {
+    window.scrollTo(0, -window.scrollY);
+    return;
+  }
+  const element = document.getElementById(htmlElementId);
+  window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
+  setTimeout(() => {
+    if (Math.abs(element.getBoundingClientRect().top - 60) > 10) {
+      window.scrollTo(0, window.scrollY + element.getBoundingClientRect().top - 60);
+    }
+  }, 10);
+
+  window.history.replaceState(null, null, `#${htmlElementId}`);
+}

src/styles/main.scss

@@ -25,4 +25,15 @@ html, body {
 }
 :root {
   --bs-link-color: #2e6da4;
+}
+
+.header-link {
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: 0.1px;
+  }
+  &:hover::after {
+    content: ' #';
+  }
 }