feat(info): add info/about section

Signed-off-by: Dmitry Kisler <admin@dkisler.com>
kislerdm · Jul 18, 2023 · 5e9283e · 5e9283e
1 parent ea1d2c3
commit 5e9283e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 18 deletions.
diff --git a/src/style.css b/src/style.css
@@ -208,7 +208,7 @@ header {
     padding: 20px;
     border: 2px solid #000;
     border-radius: 20px;
-    width: 80vh;
+    width: 90vh;
 }
 
 /* The Close Button */
@@ -229,6 +229,13 @@ header {
     cursor: pointer;
 }
 
-p#info {
+p.info,
+ul.info {
     text-align: left;
+    font-size: 1rem;
+    font-weight: 300;
+}
+
+ul.info {
+    list-style-type: decimal;
 }
diff --git a/src/template.ts b/src/template.ts
@@ -11,6 +11,8 @@ function MailToLinkStr(innerHTML: string = ""): string {
     return `<a href="mailto:admin@dkisler.com" target="_blank" rel="noopener">${innerHTML}</a>`;
 }
 
+const githubLink: string = "https://github.com/kislerdm/org-infrastructure-overview/";
+
 function Footer(): string {
     const copyrightStr =
         `<p style="font-size:16px"><a href="https://www.dkisler.com" target="_blank">dkisler.com</a> © ${
@@ -19,7 +21,7 @@ function Footer(): string {
     const iconSquareSize: number = 20;
 
     const socialContact = `<p id="contacts" style="margin-top:-10px">
-    <a href="https://github.com/kislerdm/dynamic-diagrams" target="_blank" rel="noopener">
+    <a href="${githubLink}" target="_blank" rel="noopener">
         <img class="contact-icon" src="${logoGithub}" width="${iconSquareSize}" height="${iconSquareSize}" alt="github">
     </a>
     <a href="https://www.linkedin.com/in/dkisler" target="_blank" rel="noopener">
@@ -31,29 +33,55 @@ function Footer(): string {
     return `<footer>${copyrightStr}${socialContact}</footer>`
 }
 
+function infoPopup(): string {
+    const infoIconWidth: number = 20;
+    return `<sup><img id="info-icon" src="${infoSign}" alt="info" width="${infoIconWidth}" height="${infoIconWidth}"></sup>
+<div class="modal">
+    <div class="modal-content"><span class="close">×</span>
+        <h3 style="text-align:center;margin-top:-10px">About</h3>
+        <p class="info">
+            The webapp demonstrates capabilities of 
+            <a href="${githubLink}" target="_blank"><em><strong>org-infrastructure-overview</strong></em></a>.
+        </p>
+        
+        <p class="info">
+            The tool provides a comprehensive overview of the organisation's infrastructure to help tech 
+            and product experts, and business executives to maintain up-to-date understanding of interactions 
+            between sub-organisations (departments, teams), systems and sub-systems (applications).
+        </p>
+            
+        <p class="info">
+            The <strong>motivation</strong> is to enable business to accept 
+            <a href="https://martinfowler.com/bliki/ConwaysLaw.html" target="_blank"><em>Conway's law</em></a> 
+            and employ Inverse Conway Maneuver.
+        </p>
+        
+        <h3 style="text-align:center;margin-top:-10px">How it works</h3>
+        <ul class="info">
+            <li>Select the org infrastructure's node in the <em>left panel</em></li>
+            <li>Analyse the diagram in the <em>right panel</em></li>
+        </ul>
+        
+        <h3 style="text-align:center;margin-top:-10px">How to implement the tool</h3>
+        <p class="info" style="text-align:center">
+            ${MailToLinkStr("<em><strong>Get in touch</strong></em>")} and follow the 
+            <a href="https://github.com/kislerdm/org-infrastructure-overview/#how-to-run" target="_blank"><em><strong>instructions</strong></em></a>.
+        </p>
+        
+    </div>
+</div>`
+}
+
 function Header(): string {
-    return `<header>Organisational Infrastructure's Diagrams<sup></header>`
+    return `<header>Organisational Infrastructure's Diagrams${infoPopup()}</header>`
 }
 
 export default function SetTemplatedComponents(baseHTML: string): string {
     return `${Header()}${baseHTML}${Footer()}`
 }
 
 export function addInfoPopUp(mountPoint: HTMLDivElement): void {
-    const infoIconWidth: number = 20;
-
-    const header = mountPoint.getElementsByTagName("header")[0]!;
-
-    header.innerHTML += `<sup><img id="info-icon" src="${infoSign}" alt="info" 
-width=${infoIconWidth} height=${infoIconWidth} ></sup>
-<div class="modal">
-    <div class="modal-content"><span class="close">&times;</span>
-        <p id="info">foobar<br>qux</p>
-    </div>
-</div>`
-
     const modal = mountPoint.querySelector<HTMLElement>(".modal")!;
-
     for (const el of mountPoint.getElementsByTagName("img")) {
         if (el.id === "info-icon") {
             el.addEventListener("click", () => {

diff --git a/test/main.test.ts b/test/main.test.ts
@@ -3,7 +3,7 @@ import {beforeEach, describe, expect, it, test} from "vitest";
 import {JSDOM} from "jsdom";
 import Main, {findFistDivElementByID, Router} from "../src/main";
 import {DiagramBuilder} from "../src/diagram";
-import SetTemplatedComponents from "../src/template";
+import SetTemplatedComponents, {addInfoPopUp} from "../src/template";
 
 describe.each([
     {url: "https://foobar.com/baz-qux/", want: ""},
@@ -159,6 +159,7 @@ describe.each([
 
     test(`shall generate the html page ${want}`, async () => {
         await Main(mountPoint, input.builder, input.data);
+
         expect(mountPoint.innerHTML).toEqual(want);
     })
 })