Merge pull request #127 from MichaelCurrin/feat-add-hover-title

feat: extend hover title support
MichaelCurrin · Nov 4, 2021 · 771595c · 771595c
2 parents 18b639e + 6010ae9
commit 771595c
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 66 deletions.
diff --git 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
@@ -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/constants/catalogue.ts b/src/constants/catalogue.ts
@@ -13,15 +13,16 @@ type TBadgeDetails = {
   logo?: string;
   isLarge?: boolean;
   altText?: string;
+  hoverTitle?: string;
 };
 
 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.
@@ -34,34 +35,40 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     label: "contributions",
     message: "welcome",
     target: "/CONTRIBUTING.md",
+    hoverTitle: "Go to contributions doc",
   },
 
   {
     label: "OS",
     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.
   {
@@ -70,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",
   },
 
   {
@@ -78,6 +86,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.docker.com/",
     logo: "docker",
     altText: "Made with Docker",
+    hoverTitle: "Go to Docker homepage",
   },
 
   {
@@ -86,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",
   },
 
   {
@@ -94,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",
   },
 
   {
@@ -107,20 +119,23 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.javascript.com/",
     logo: "javascript",
     altText: "Made with JavaScript",
+    hoverTitle: "Go to JavaScript homepage",
   },
   {
     label: "Node.js",
     message: ">=12",
     target: "https://nodejs.org",
     logo: "node.js",
     altText: "Made with Node.js",
+    hoverTitle: "Go to Node.js homepage",
   },
   {
     label: "Yarn",
     message: "1",
     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.
   {
@@ -129,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",
   },
 
   {
@@ -161,6 +180,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://deno.land",
     logo: "deno",
     altText: "Made with Deno",
+    hoverTitle: "Go to Deno homepage",
   },
 
   {
@@ -169,13 +189,15 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://golang.org",
     logo: "go",
     altText: "Made with Go",
+    hoverTitle: "Go to Go homepage",
   },
   {
     label: "Hugo",
     message: "0.X",
     target: "https://gohugo.io/",
     logo: "hugo",
     altText: "Made with Hugo",
+    hoverTitle: "Go to Hugo homepage",
   },
 
   {
@@ -184,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",
   },
 
   {
@@ -192,13 +215,15 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://ruby-lang.org",
     logo: "ruby",
     altText: "Made with Ruby",
+    hoverTitle: "Go to Ruby homepage",
   },
   {
     label: "Jekyll",
     message: "3.9",
     target: "https://jekyllrb.com",
     logo: "jekyll",
     altText: "Made with Jekyll",
+    hoverTitle: "Go to Jekyll homepage",
   },
 
   {
@@ -207,13 +232,15 @@ 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",
     message: "13",
     target: "https://www.postgresql.org/",
     logo: "postgresql",
     altText: "Made with PostgreSQL",
+    hoverTitle: "Go to PostgresSQL homepage",
   },
 
   {
@@ -222,6 +249,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.mysql.com/",
     logo: "mysql",
     altText: "Made with MySQL",
+    hoverTitle: "Go to MySQL homepage",
   },
 
   {
@@ -230,6 +258,7 @@ export const BADGE_DETAILS: TBadgeDetails[] = [
     target: "https://www.mongodb.com/",
     logo: "mongodb",
     altText: "Made with MongoDB",
+    hoverTitle: "Go to MongoDB homepage",
   },
 
   {
@@ -238,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/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/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"
@@ -17,7 +20,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
@@ -7,21 +7,31 @@ 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.
+ *
+ * @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". 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,
@@ -32,7 +42,8 @@ export function genericBadge(
   logo = "",
   logoColor = "",
   onlyQueryParams = false,
-  altText = ""
+  altText = "",
+  hoverTitle = ""
 ) {
   if (!message) {
     throw new Error("`message` may not be empty");
@@ -51,5 +62,6 @@ export function genericBadge(
     altText,
     imageTarget,
     linkTarget,
+    hoverTitle,
   });
 }