From 793c7fb537d4bc56827a2e754ab2e98e585c2df2 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 11:44:27 +0200
Subject: [PATCH 01/12] docs: update genericBadge.ts and markdown.ts

---
 src/core/genericBadge.ts | 23 +++++++++++++----------
 src/core/markdown.ts     | 28 ++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/core/genericBadge.ts b/src/core/genericBadge.ts
index 5b204eb1..debdc7fe 100644
--- a/src/core/genericBadge.ts
+++ b/src/core/genericBadge.ts
@@ -7,21 +7,24 @@ import { logoQueryParams, staticDashUrl, staticParamsUrl } from "./shieldsApi";
 /**
  * Generate markdown for generic badge.
  *
- * The guard statements to prevent empty strings do not prevent compile-time errors, but they can
- * show up in nests for safety. The label is fine empty string though.
+ * The guard statements to prevent empty strings do not prevent compile-time
+ * errors, but they can show up in nests for safety. The label is fine empty
+ * string though.
  *
  * See `/docs/badge-notes.md` doc on output formats.
  *
- * The strings with null string defaults could be converted to optional with `?` and tests pass, but
- * that means actually `string | undefined` and it is more natural to keep everything as a string.
+ * The strings with null string defaults could be converted to optional with `?`
+ * and tests pass, but that means actually `string | undefined` and it is more
+ * natural to keep everything as a string.
  *
- * The args could be converted to a destructured argument (VS Code does this easily), maybe even
- * multiple types to capture first few values separately.
+ * The args could be converted to a destructured argument (VS Code does this
+ * easily), maybe even multiple types to capture first few values separately.
  *
- * Use of altText argument allows the generated value to be overridden. This is useful if you want
- * alt text that won't go out of date. e.g. Use "Made with Python" instead This is useful if you
- * want to avoid generated a badge which is harder to maintain because of using the same value in
- * two places. Like having "3.9" as the version in the alt text and the badge message.
+ * Use of altText argument allows the generated value to be overridden. This is
+ * useful if you want alt text that won't go out of date. e.g. Use "Made with
+ * Python" instead This is useful if you want to avoid generated a badge which
+ * is harder to maintain because of using the same value in two places. Like
+ * having "3.9" as the version in the alt text and the badge message.
  */
 export function genericBadge(
   label: string,
diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 7ec77b06..67ef7bc4 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -18,6 +18,11 @@ export function mdLink(altText: string, linkTarget: string) {
 
 /**
  * Create Markdown image code.
+ *
+ * @param altText Fallback text.
+ * @param imageTarget Path or URL of the image to show.
+ * @param hoverTitle Optional title of the image, to display on hover over.
+ *   e.g. "Go to website".
  */
 export function mdImage({ altText, imageTarget, hoverTitle }: IMdImage) {
   if (hoverTitle) {
@@ -29,8 +34,14 @@ export function mdImage({ altText, imageTarget, hoverTitle }: IMdImage) {
 /**
  * Create Markdown image code, with an external link.
  *
- * This performs no encoding - the inputs should be encoded already to be a URL without spaces and
- * to be a valid URL for shields.io API.
+ * This performs no encoding - the inputs should be encoded already to be a URL
+ * without spaces and to be a valid URL for shields.io API.
+ *
+ * @param altText Fallback text.
+ * @param imageTarget Path or URL of the image to show.
+ * @param linkTarget Path or URL destination for when the image is clicked.
+ * @param hoverTitle Optional title of the image, to display on hover over.
+ *   e.g. "Go to website".
  */
 export function mdImageWithLink({
   altText,
@@ -47,17 +58,22 @@ export function mdImageWithLink({
 }
 
 /**
- * Render Markdown code as HTML text.
+ * Markdown to HTML.
+ *
+ * Render Markdown code as HTML code.
  */
 export function mdToHTML(value: string): string {
   return md.render(value);
 }
 
 /**
- * Turn HTML generated from Markdown into more typical and readable HTML.
+ * Clean HTML.
+ *
+ * Expect HTML code that was rendered from Markdown and convert it into more
+ * typical and readable HTML.
  */
-export function cleanHtml(htmlCode: String) {
-  return htmlCode
+export function cleanHtml(value: String) {
+  return value
     .replaceAll("<p>", "")
     .replaceAll("</p>", "\n")
     .replaceAll("<em>", "<i>")

From 7867067b8ee4118630b8df41e243eec45afc78b4 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 11:49:57 +0200
Subject: [PATCH 02/12] feat: extend support for hoverTitle

---
 src/constants/catalogue.ts |  1 +
 src/core/catalogue.ts      |  3 ++-
 src/core/genericBadge.ts   | 10 +++++++++-
 src/core/markdown.ts       |  4 ++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/constants/catalogue.ts b/src/constants/catalogue.ts
index e3783ebe..57b05274 100644
--- a/src/constants/catalogue.ts
+++ b/src/constants/catalogue.ts
@@ -13,6 +13,7 @@ type TBadgeDetails = {
   logo?: string;
   isLarge?: boolean;
   altText?: string;
+  hoverTitle?: string;
 };
 
 export const BADGE_DETAILS: TBadgeDetails[] = [
diff --git a/src/core/catalogue.ts b/src/core/catalogue.ts
index fd316686..e4370756 100644
--- a/src/core/catalogue.ts
+++ b/src/core/catalogue.ts
@@ -17,7 +17,8 @@ export function renderBadges() {
       badge.logo,
       badge.logo ? BADGE_DEFAULTS.LOGO_COLOR : "",
       false,
-      badge.altText
+      badge.altText,
+      badge.hoverTitle
     );
   });
 }
diff --git a/src/core/genericBadge.ts b/src/core/genericBadge.ts
index debdc7fe..41eaa922 100644
--- a/src/core/genericBadge.ts
+++ b/src/core/genericBadge.ts
@@ -25,6 +25,12 @@ import { logoQueryParams, staticDashUrl, staticParamsUrl } from "./shieldsApi";
  * Python" instead This is useful if you want to avoid generated a badge which
  * is harder to maintain because of using the same value in two places. Like
  * having "3.9" as the version in the alt text and the badge message.
+ *
+ * @param linkTarget Path or URL destination for when the badge image is
+ * clicked.
+ * @param altText Fallback text.
+ * @param hoverTitle Optional title of the image, to display on hover over.
+ *   e.g. "Go to website".
  */
 export function genericBadge(
   label: string,
@@ -35,7 +41,8 @@ export function genericBadge(
   logo = "",
   logoColor = "",
   onlyQueryParams = false,
-  altText = ""
+  altText = "",
+  hoverTitle = ""
 ) {
   if (!message) {
     throw new Error("`message` may not be empty");
@@ -54,5 +61,6 @@ export function genericBadge(
     altText,
     imageTarget,
     linkTarget,
+    hoverTitle,
   });
 }
diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 67ef7bc4..798ebe4a 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -39,15 +39,15 @@ export function mdImage({ altText, imageTarget, hoverTitle }: IMdImage) {
  *
  * @param altText Fallback text.
  * @param imageTarget Path or URL of the image to show.
- * @param linkTarget Path or URL destination for when the image is clicked.
  * @param hoverTitle Optional title of the image, to display on hover over.
  *   e.g. "Go to website".
+ * @param linkTarget Path or URL destination for when the image is clicked.
  */
 export function mdImageWithLink({
   altText,
   imageTarget,
-  linkTarget,
   hoverTitle,
+  linkTarget,
 }: IMdImageWithLink) {
   const image = mdImage({ altText, imageTarget, hoverTitle });
 

From d4147c4edf52dc3f84171b09423e9a24fd76d298 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 11:59:20 +0200
Subject: [PATCH 03/12] feat: extend hoverTitle support

---
 src/core/markdown.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 798ebe4a..f2e9309b 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -11,8 +11,13 @@ const md = new markdownIt({ html: true });
 
 /**
  * Create Markdown link code.
+ *
+ * TODO: Use object destructuring.
  */
-export function mdLink(altText: string, linkTarget: string) {
+export function mdLink(altText: string, linkTarget: string, hoverTitle = "") {
+  if (hoverTitle) {
+    linkTarget = `${linkTarget} "${hoverTitle}"`;
+  }
   return `[${altText}](${linkTarget})`;
 }
 
@@ -49,10 +54,10 @@ export function mdImageWithLink({
   hoverTitle,
   linkTarget,
 }: IMdImageWithLink) {
-  const image = mdImage({ altText, imageTarget, hoverTitle });
+  const image = mdImage({ altText, imageTarget });
 
   if (linkTarget) {
-    return mdLink(image, linkTarget);
+    return mdLink(image, linkTarget, hoverTitle);
   }
   return image;
 }

From 736ad5adc18ba9153caf3f6d35fcc4295a60dc90 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 11:59:34 +0200
Subject: [PATCH 04/12] test: update markdown.spec.ts

---
 tests/unit/core/markdown.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/unit/core/markdown.spec.ts b/tests/unit/core/markdown.spec.ts
index 1e98aed9..140aca3a 100644
--- a/tests/unit/core/markdown.spec.ts
+++ b/tests/unit/core/markdown.spec.ts
@@ -47,12 +47,12 @@ describe("#mdImageWithLink", () => {
   it("returns a valid tag using all parameters set", () => {
     expect(
       mdImageWithLink({
-        altText: "Alt text",
+        altText: "My alt text",
         imageTarget: "foo.png",
         linkTarget: "https://example.com",
-        hoverTitle: "My foo",
+        hoverTitle: "My hover title",
       })
-    ).toBe('[![Alt text](foo.png "My foo")](https://example.com)');
+    ).toBe('[![My alt text](foo.png)](https://example.com "My hover title")');
 
     expect(
       mdImageWithLink({
@@ -62,6 +62,7 @@ describe("#mdImageWithLink", () => {
       })
     ).toBe("[![My title](/example.png)](https://example.com)");
   });
+
   it("Does not encode special characters", () => {
     expect(
       mdImageWithLink({

From 86fad8bacf2be7834c4a1eaeafa767ae49853fe0 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 11:59:46 +0200
Subject: [PATCH 05/12] feat: add hoverTitle to catalogue

---
 src/constants/catalogue.ts        | 2 +-
 tests/unit/core/catalogue.spec.ts | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/constants/catalogue.ts b/src/constants/catalogue.ts
index 57b05274..4316ce19 100644
--- a/src/constants/catalogue.ts
+++ b/src/constants/catalogue.ts
@@ -17,12 +17,12 @@ type TBadgeDetails = {
 };
 
 export const BADGE_DETAILS: TBadgeDetails[] = [
-  // Or message: "Project Docs".
   {
     label: "view",
     message: "Documentation",
     target: "/docs/",
     isLarge: true,
+    hoverTitle: "Go to project documentation",
   },
 
   // These would be useful on the Repo package, maybe with link to issues or PRs.
diff --git a/tests/unit/core/catalogue.spec.ts b/tests/unit/core/catalogue.spec.ts
index 82c53aa3..bf4cd943 100644
--- a/tests/unit/core/catalogue.spec.ts
+++ b/tests/unit/core/catalogue.spec.ts
@@ -1,14 +1,15 @@
 import { renderBadges } from "@/core/catalogue";
 
 describe("#renderBadges", () => {
-  // Just a sample of catalogue badges need to be tested for a variety of features. Not all badges.
-  // There are already tests for genericBadge function.
+  // Just a sample of catalogue badges need to be tested for a variety of
+  // features. Not all badges. There are already tests for genericBadge
+  // function.
   describe("convert configured catalogue badges to expected markdown badges", () => {
     const badges = renderBadges();
 
     it("renders a docs badge", () => {
       expect(badges[0]).toBe(
-        "[![view - Documentation](https://img.shields.io/badge/view-Documentation-blue?style=for-the-badge)](/docs/)"
+        '[![view - Documentation](https://img.shields.io/badge/view-Documentation-blue?style=for-the-badge)](/docs/ "Go to project documentation")'
       );
     });
 

From f4b1f5d3081a3ee96cdc1775c0ac49c51396ffc0 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:04:51 +0200
Subject: [PATCH 06/12] test: update markdown.spec.ts

---
 tests/unit/core/markdown.spec.ts | 46 +++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/tests/unit/core/markdown.spec.ts b/tests/unit/core/markdown.spec.ts
index 140aca3a..3e201db9 100644
--- a/tests/unit/core/markdown.spec.ts
+++ b/tests/unit/core/markdown.spec.ts
@@ -11,20 +11,21 @@ describe("#mdLink", () => {
 });
 
 describe("#mdImage", () => {
-  it("returns a valid markdown image", () => {
-    expect(mdImage({ altText: "Alt text", imageTarget: "foo.png" })).toBe(
-      "![Alt text](foo.png)"
-    );
-
-    expect(
-      mdImage({
+  it("returns a valid Markdown image element", () => {
+    {
+      const result = mdImage({ altText: "Alt text", imageTarget: "foo.png" });
+      expect(result).toBe("![Alt text](foo.png)");
+    }
+    {
+      const result = mdImage({
         altText: "Example",
         imageTarget: "https://example.com/foo.png",
-      })
-    ).toBe("![Example](https://example.com/foo.png)");
+      });
+      expect(result).toBe("![Example](https://example.com/foo.png)");
+    }
   });
 
-  it("returns a valid markdown image with hover text", () => {
+  it("returns a valid Markdown image with hover title set", () => {
     expect(
       mdImage({
         altText: "Alt text",
@@ -44,7 +45,25 @@ describe("#mdImage", () => {
 });
 
 describe("#mdImageWithLink", () => {
-  it("returns a valid tag using all parameters set", () => {
+  it("returns a valid element using required parameters set", () => {
+    expect(
+      mdImageWithLink({
+        altText: "My alt text",
+        imageTarget: "foo.png",
+        linkTarget: "https://example.com",
+      })
+    ).toBe("[![My alt text](foo.png)](https://example.com)");
+
+    expect(
+      mdImageWithLink({
+        altText: "My title",
+        imageTarget: "/example.png",
+        linkTarget: "https://example.com",
+      })
+    ).toBe("[![My title](/example.png)](https://example.com)");
+  });
+
+  it("returns a valid element using hover title set", () => {
     expect(
       mdImageWithLink({
         altText: "My alt text",
@@ -59,11 +78,12 @@ describe("#mdImageWithLink", () => {
         altText: "My title",
         imageTarget: "/example.png",
         linkTarget: "https://example.com",
+        hoverTitle: "My hover title",
       })
-    ).toBe("[![My title](/example.png)](https://example.com)");
+    ).toBe('[![My title](/example.png)](https://example.com "My hover title")');
   });
 
-  it("Does not encode special characters", () => {
+  it("Returns a valid element with special characters preserved", () => {
     expect(
       mdImageWithLink({
         altText: "My title",

From 4a554f47068fe7dfd5f41f1e55d908fb7b5d5099 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:06:11 +0200
Subject: [PATCH 07/12] update catalogue.ts

---
 src/core/catalogue.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/core/catalogue.ts b/src/core/catalogue.ts
index e4370756..09830291 100644
--- a/src/core/catalogue.ts
+++ b/src/core/catalogue.ts
@@ -1,7 +1,10 @@
 import { BADGE_DEFAULTS, BADGE_DETAILS } from "@/constants/catalogue";
 import { genericBadge } from "./genericBadge";
 
-export function renderBadges() {
+/**
+ * Convert data for all fixed catalogue badges into Markdown badges.
+ */
+export function renderBadges(): string[] {
   return BADGE_DETAILS.map((badge) => {
     const isLarge =
       typeof badge.isLarge !== "undefined"

From e57a746e33d267ce86649b0cd725d6fa762694d4 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:12:32 +0200
Subject: [PATCH 08/12] feat: add hoverTitle to catalogue items

---
 src/constants/catalogue.ts        | 39 +++++++++++++++++++++++++++----
 tests/unit/core/catalogue.spec.ts |  6 ++---
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/constants/catalogue.ts b/src/constants/catalogue.ts
index 4316ce19..d7a4c51b 100644
--- a/src/constants/catalogue.ts
+++ b/src/constants/catalogue.ts
@@ -35,6 +35,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     label: "contributions",
     message: "welcome",
     target: "/CONTRIBUTING.md",
+    hoverTitle: "Go to contributions doc",
   },
 
   {
@@ -42,27 +43,32 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     message: "Linux",
     target: "https://www.linux.org/",
     logo: "linux",
+    hoverTitle: "Go to Linux homepage",
   },
   {
     label: "OS",
     message: "macOS",
     target: "https://www.apple.com/macos/",
     logo: "apple",
+    hoverTitle: "Go to Apple homepage",
   },
   {
     label: "OS",
     message: "Windows",
     target: "https://www.microsoft.com/",
     logo: "windows",
+    hoverTitle: "Go to Microsoft homepage",
   },
 
-  // Netlify CI badge is best created on Netlify itself and not here. But a plain Made with Netlify might be nice.
+  // Netlify CI badge is best created on Netlify itself and not here. But a
+  // plain Made with Netlify might be nice.
   {
     label: "Hosted with",
     message: "GitHub Pages",
     target: "https://pages.github.com/",
     logo: "github",
     altText: "Hosted with GH Pages",
+    hoverTitle: "Go to GitHub Pages homepage",
   },
   // Use an actual GitHub Actions workflow badge if you prefer. But this could be useful it is Made for GitHub Actions.
   {
@@ -71,6 +77,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://github.com/features/actions",
     logo: "github-actions",
     altText: "Made with GH Actions",
+    hoverTitle: "Go to GitHub Actions homepage",
   },
 
   {
@@ -79,6 +86,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.docker.com/",
     logo: "docker",
     altText: "Made with Docker",
+    hoverTitle: "Go to Docker homepage",
   },
 
   {
@@ -87,6 +95,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.gnu.org/software/bash/",
     logo: "gnu-bash",
     altText: "Made with Bash",
+    hoverTitle: "Go to Bash homepage",
   },
 
   {
@@ -95,11 +104,13 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://python.org",
     logo: "python",
     altText: "Made with Python",
+    hoverTitle: "Go to Python homepage",
   },
   {
     label: "code style",
     message: "black",
     target: "https://black.readthedocs.io/",
+    hoverTitle: "Go to Black homepage",
   },
 
   {
@@ -108,6 +119,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.javascript.com/",
     logo: "javascript",
     altText: "Made with JavaScript",
+    hoverTitle: "Go to JavaScript homepage",
   },
   {
     label: "Node.js",
@@ -115,6 +127,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://nodejs.org",
     logo: "node.js",
     altText: "Made with Node.js",
+    hoverTitle: "Go to Node.js homepage",
   },
   {
     label: "Yarn",
@@ -122,6 +135,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://classic.yarnpkg.com",
     logo: "yarn",
     altText: "Made with Yarn",
+    hoverTitle: "Go to Yarn classic homepage",
   },
   // Support 1 and 2 but link to 2.
   {
@@ -130,30 +144,34 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://yarnpkg.com/",
     logo: "yarn",
     altText: "Made with Yarn",
+    hoverTitle: "Go to Yarn homepage",
   },
 
-  // Rather use NPM badges based on `package.json` but you can use these if needed. Especially for
-  // frontend-only projects.
+  // Rather use NPM badges based on `package.json` but you can use these if
+  // needed. Especially for frontend-only projects.
   {
     label: "TypeScript",
     message: "4",
     target: "https://typescriptlang.org",
     logo: "typescript",
     altText: "Made with TypeScript",
+    hoverTitle: "Go to TypeScript homepage",
   },
   {
     label: "React",
     message: "17",
-    target: "https://www.npmjs.com/package/react",
+    target: "https://reactjs.org",
     logo: "react",
     altText: "Made with React",
+    hoverTitle: "Go to React homepage",
   },
   {
     label: "Vue",
     message: "3",
-    target: "https://www.npmjs.com/package/vue",
+    target: "https://v3.vuejs.org",
     logo: "vue.js",
     altText: "Made with Vue",
+    hoverTitle: "Go to Vue homepage",
   },
 
   {
@@ -162,6 +180,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://deno.land",
     logo: "deno",
     altText: "Made with Deno",
+    hoverTitle: "Go to Deno homepage",
   },
 
   {
@@ -170,6 +189,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://golang.org",
     logo: "go",
     altText: "Made with Go",
+    hoverTitle: "Go to Go homepage",
   },
   {
     label: "Hugo",
@@ -177,6 +197,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://gohugo.io/",
     logo: "hugo",
     altText: "Made with Hugo",
+    hoverTitle: "Go to Hugo homepage",
   },
 
   {
@@ -185,6 +206,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.rust-lang.org/",
     logo: "rust",
     altText: "Made with Rust",
+    hoverTitle: "Go to Rust homepage",
   },
 
   {
@@ -193,6 +215,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://ruby-lang.org",
     logo: "ruby",
     altText: "Made with Ruby",
+    hoverTitle: "Go to Ruby homepage",
   },
   {
     label: "Jekyll",
@@ -200,6 +223,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://jekyllrb.com",
     logo: "jekyll",
     altText: "Made with Jekyll",
+    hoverTitle: "Go to Jekyll homepage",
   },
 
   {
@@ -208,6 +232,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.sqlite.org/index.html",
     logo: "sqlite",
     altText: "Made with SQLite",
+    hoverTitle: "Go to SQLite homepage",
   },
   {
     label: "PostgreSQL",
@@ -215,6 +240,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.postgresql.org/",
     logo: "postgresql",
     altText: "Made with PostgreSQL",
+    hoverTitle: "Go to PostgresSQL homepage",
   },
 
   {
@@ -223,6 +249,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.mysql.com/",
     logo: "mysql",
     altText: "Made with MySQL",
+    hoverTitle: "Go to MySQL homepage",
   },
 
   {
@@ -231,6 +258,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.mongodb.com/",
     logo: "mongodb",
     altText: "Made with MongoDB",
+    hoverTitle: "Go to MongoDB homepage",
   },
 
   {
@@ -239,5 +267,6 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://graphql.org/",
     logo: "graphql",
     altText: "Made with GraphQL",
+    hoverTitle: "Go to GraphQL homepage",
   },
 ];
diff --git a/tests/unit/core/catalogue.spec.ts b/tests/unit/core/catalogue.spec.ts
index bf4cd943..b9821439 100644
--- a/tests/unit/core/catalogue.spec.ts
+++ b/tests/unit/core/catalogue.spec.ts
@@ -15,19 +15,19 @@ describe("#renderBadges", () => {
 
     it("renders a Linux badge", () => {
       expect(badges[3]).toBe(
-        "[![OS - Linux](https://img.shields.io/badge/OS-Linux-blue?logo=linux&logoColor=white)](https://www.linux.org/)"
+        '[![OS - Linux](https://img.shields.io/badge/OS-Linux-blue?logo=linux&logoColor=white)](https://www.linux.org/ "Go to Linux homepage")'
       );
     });
 
     it("renders a Bash badge", () => {
       expect(badges[9]).toBe(
-        "[![Made with Bash](https://img.shields.io/badge/Bash->=3-blue?logo=gnu-bash&logoColor=white)](https://www.gnu.org/software/bash/)"
+        '[![Made with Bash](https://img.shields.io/badge/Bash->=3-blue?logo=gnu-bash&logoColor=white)](https://www.gnu.org/software/bash/ "Go to Bash homepage")'
       );
     });
 
     it("renders a Python badge", () => {
       expect(badges[10]).toBe(
-        "[![Made with Python](https://img.shields.io/badge/Python->=3.6-blue?logo=python&logoColor=white)](https://python.org)"
+        '[![Made with Python](https://img.shields.io/badge/Python->=3.6-blue?logo=python&logoColor=white)](https://python.org "Go to Python homepage")'
       );
     });
   });

From e943c06736aff7469aac37ac96967643c52a1988 Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:14:32 +0200
Subject: [PATCH 09/12] refactor: update Home.vue

---
 src/views/Home.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8f8e9c2e..43165c31 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -67,19 +67,19 @@ import Markdown from "@/components/Markdown.vue";
 import { APP_THEME_COLOR, DESCRIPTION } from "@/constants/appearance";
 import { Repo } from "@/core/Repo";
 
+const repo = new Repo(
+  "MichaelCurrin",
+  "badge-generator",
+  undefined,
+  APP_THEME_COLOR
+);
+
 export default defineComponent({
   name: "Home",
   components: {
     Markdown,
   },
   data() {
-    const repo = new Repo(
-      "MichaelCurrin",
-      "badge-generator",
-      undefined,
-      APP_THEME_COLOR
-    );
-
     return {
       repoBadge: repo.ghBadge(),
       description: DESCRIPTION,

From d75cedf51f5d7844304dfda39bb97fad326a293a Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:20:50 +0200
Subject: [PATCH 10/12] feat: add hoverTitle to GH repo badge

---
 src/constants/badgeValues.d.ts | 4 +++-
 src/constants/badgeValues.ts   | 1 +
 src/core/Repo.ts               | 4 +++-
 tests/unit/core/Repo.spec.ts   | 7 +++----
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/constants/badgeValues.d.ts b/src/constants/badgeValues.d.ts
index 08126689..784964e3 100644
--- a/src/constants/badgeValues.d.ts
+++ b/src/constants/badgeValues.d.ts
@@ -1,5 +1,6 @@
 /*
- * Based on GenericBadge function inputs. But everything is optional here and uppercase.
+ * Based on GenericBadge function inputs. Except, everything is optional here and
+ * uppercase.
  */
 export interface IGenericBadge {
   label?: string;
@@ -10,4 +11,5 @@ export interface IGenericBadge {
   logo?: string;
   logoColor?: string;
   altText?: string;
+  hoverTitle?: string;
 }
diff --git a/src/constants/badgeValues.ts b/src/constants/badgeValues.ts
index 4ee5b2db..c765ea47 100644
--- a/src/constants/badgeValues.ts
+++ b/src/constants/badgeValues.ts
@@ -28,6 +28,7 @@ export const GH_BADGE: IGenericBadge = {
   isLarge: false,
   logo: "github",
   logoColor: "",
+  hoverTitle: "Go to GitHub repo",
 };
 
 export const GH_PAGES_BADGE: IGenericBadge = {
diff --git a/src/core/Repo.ts b/src/core/Repo.ts
index 84369fb3..ab272b93 100644
--- a/src/core/Repo.ts
+++ b/src/core/Repo.ts
@@ -236,7 +236,9 @@ export class Repo {
       target,
       GH_BADGE.logo,
       GH_BADGE.logoColor,
-      onlyQueryParams
+      onlyQueryParams,
+      undefined,
+      GH_BADGE.hoverTitle
     );
   }
 
diff --git a/tests/unit/core/Repo.spec.ts b/tests/unit/core/Repo.spec.ts
index 06ae4774..9a5855e5 100644
--- a/tests/unit/core/Repo.spec.ts
+++ b/tests/unit/core/Repo.spec.ts
@@ -157,14 +157,13 @@ Released under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCur
   });
 
   describe("#ghBadge", () => {
-    it("return a valid GH repo badge", () => {
+    it("return a valid GitHub repo badge", () => {
       const badgeUrl =
         "https://img.shields.io/static/v1?label=MichaelCurrin&message=badge-generator&color=blue&logo=github";
       const linkTarget = "https://github.com/MichaelCurrin/badge-generator";
 
-      expect(repoNoLicense.ghBadge()).toBe(
-        `[![MichaelCurrin - badge-generator](${badgeUrl})](${linkTarget})`
-      );
+      const expected = `[![MichaelCurrin - badge-generator](${badgeUrl})](${linkTarget} "Go to GitHub repo")`;
+      expect(repoNoLicense.ghBadge()).toBe(expected);
     });
   });
 

From 98cf1007e4063bc83104df7b391c508fc39a1d7c Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:31:00 +0200
Subject: [PATCH 11/12] test: update genericBadge.spec.ts

---
 tests/unit/core/genericBadge.spec.ts | 46 ++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/tests/unit/core/genericBadge.spec.ts b/tests/unit/core/genericBadge.spec.ts
index 33e0c4be..bd9d07de 100644
--- a/tests/unit/core/genericBadge.spec.ts
+++ b/tests/unit/core/genericBadge.spec.ts
@@ -1,7 +1,8 @@
 import { genericBadge } from "@/core/genericBadge";
 
 /**
- * Test that the UI defaults and common choices associated with the Generic view are working.
+ * Test that the UI defaults and common choices associated with the Generic view
+ * are working.
  */
 describe("#genericBadge", () => {
   describe("Label, message and color", () => {
@@ -25,7 +26,7 @@ describe("#genericBadge", () => {
       expect(() => genericBadge("", "", "green")).toThrow();
     });
 
-    it("displays a badge pointing to an external link", () => {
+    it("displays a badge pointing to an external link, when provided", () => {
       const linkTarget = "https://example.com";
 
       expect(genericBadge("", "Bar", "green", false, linkTarget)).toBe(
@@ -38,6 +39,45 @@ describe("#genericBadge", () => {
         "[![Bar](https://img.shields.io/static/v1?label=&message=Bar&color=green)](https://example.com)"
       );
     });
+
+    it("displays a badge with link hover title, when link and hover title are provided", () => {
+      const linkTarget = "https://example.com";
+      const hoverTitle = "Go to Example homepage";
+
+      expect(
+        genericBadge(
+          "",
+          "Bar",
+          "green",
+          false,
+          linkTarget,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          hoverTitle
+        )
+      ).toBe(
+        '[![Bar](https://img.shields.io/badge/Bar-green)](https://example.com "Go to Example homepage")'
+      );
+
+      expect(
+        genericBadge(
+          "",
+          "Bar",
+          "green",
+          false,
+          linkTarget,
+          "",
+          "",
+          true,
+          undefined,
+          hoverTitle
+        )
+      ).toBe(
+        '[![Bar](https://img.shields.io/static/v1?label=&message=Bar&color=green)](https://example.com "Go to Example homepage")'
+      );
+    });
   });
 
   describe("Size", () => {
@@ -101,7 +141,7 @@ describe("#genericBadge", () => {
       );
     });
 
-    it("displays custom alt text when supplied", () => {
+    it("displays custom alt text when given", () => {
       expect(
         genericBadge(
           "Python",

From 6010ae978c2ec5df419fa3e686454b5265500fbc Mon Sep 17 00:00:00 2001
From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com>
Date: Thu, 4 Nov 2021 12:31:05 +0200
Subject: [PATCH 12/12] docs: update genericBadge.ts

---
 src/core/genericBadge.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/genericBadge.ts b/src/core/genericBadge.ts
index 41eaa922..03283b2d 100644
--- a/src/core/genericBadge.ts
+++ b/src/core/genericBadge.ts
@@ -30,7 +30,8 @@ import { logoQueryParams, staticDashUrl, staticParamsUrl } from "./shieldsApi";
  * clicked.
  * @param altText Fallback text.
  * @param hoverTitle Optional title of the image, to display on hover over.
- *   e.g. "Go to website".
+ *   e.g. "Go to website". This is used on the outer link, not the inner image.
+ *   If no linkTarget is provided, this field does nothing.
  */
 export function genericBadge(
   label: string,