Add heading links (#351)

* light refactor; add links to headings * don't target footer links
18F · Jan 30, 2023 · 5198e0b · 5198e0b
1 parent ca53621
commit 5198e0b
Showing 1 changed file with 91 additions and 52 deletions.
diff --git a/javascripts/application.js b/javascripts/application.js
@@ -5,61 +5,100 @@
 // replace {{ site.baseurl }} correctly. Without the frontmatter tags, Jekyll
 // copies the file unedited.
 
+const addHeadingLinks = () => {
+  const ids = new Set();
+
+  const slugify = (str) => {
+    let idx = "";
+    let slug = str.toLowerCase().replace(/[^a-z0-9]/gi, "-");
+
+    let id = `${slug}${idx ? "-" : ""}${idx}`;
+
+    while (ids.has(id)) {
+      idx = idx ? idx + 1 : 1;
+      id = `${slug}${idx ? "-" : ""}${idx}`;
+    }
+
+    ids.add(id);
+
+    return id;
+  };
+
+  const headings = document.querySelectorAll(
+    "main h1, main h2, main h3, main h4, main h5, main h6"
+  );
+  for (const heading of headings) {
+    if (!heading.id) {
+      heading.id = slugify(heading.innerText);
+    }
+
+    heading.innerHTML = `${heading.innerText} <a href="#${heading.id}" aria-hidden="true" tabindex="-1" class="usa-link heading-link--symbol">#</a>`;
+  }
+};
+
+const markExternalLinks = () => {
+  const externalLinkIcon = document.createElement("img");
+  externalLinkIcon.setAttribute(
+    "src",
+    `{{ site.baseurl }}/assets/uswds/img/usa-icons/launch.svg`
+  );
+  externalLinkIcon.setAttribute("alt", "(external link)");
+  externalLinkIcon.setAttribute("style", "width: 1rem;");
+
+  Array.from(document.querySelectorAll("main a[href]"))
+    .filter((a) => {
+      const href = a.getAttribute("href");
+      return (
+        !href.startsWith(window.location.origin) &&
+        !/^[/#]/.test(a.getAttribute("href"))
+      );
+    })
+    .forEach((a) => a.appendChild(externalLinkIcon.cloneNode()));
+};
+
+const configurePrivateEye = () => {
+  PrivateEye({
+    defaultMessage: "This link is private to GSA.",
+    ignoreUrls: [
+      "gsa-tts.slack.com",
+      "anywhere.gsa.gov",
+      "bookit.gsa.gov",
+      "calendar.gsa.gov",
+      "connect.gsa.gov",
+      "docs.google.com",
+      "drive.google.com",
+      "ea.gsa.gov",
+      "email.gsa.gov",
+      "gcims.gsa.gov",
+      "github.com/18F/Accessibility_Reviews",
+      "github.com/18F/blog-drafts",
+      "github.com/18F/codereviews",
+      "github.com/18F/DevOps",
+      "github.com/18F/Infrastructure",
+      "github.com/18F/security-incidents",
+      "github.com/18F/staffing-and-resources",
+      "github.com/18F/team-api.18f.gov",
+      "github.com/18F/writing-lab",
+      "gkey.gsa.gov",
+      "gsa-tts.slack.com",
+      "gsa.my.salesforce.com",
+      "gsaolu.gsa.gov",
+      "hrprod.hr.gsa.gov",
+      "insite.gsa.gov",
+      "mail.gsa.gov",
+      "meet.gsa.gov",
+      "pages-internal.18f.gov",
+      "tock.18f.gov",
+    ],
+  });
+};
+
 document.addEventListener(
   "DOMContentLoaded",
   function () {
-    PrivateEye({
-      defaultMessage: "This link is private to GSA.",
-      ignoreUrls: [
-        "gsa-tts.slack.com",
-        "anywhere.gsa.gov",
-        "bookit.gsa.gov",
-        "calendar.gsa.gov",
-        "connect.gsa.gov",
-        "docs.google.com",
-        "drive.google.com",
-        "ea.gsa.gov",
-        "email.gsa.gov",
-        "gcims.gsa.gov",
-        "github.com/18F/Accessibility_Reviews",
-        "github.com/18F/blog-drafts",
-        "github.com/18F/codereviews",
-        "github.com/18F/DevOps",
-        "github.com/18F/Infrastructure",
-        "github.com/18F/security-incidents",
-        "github.com/18F/staffing-and-resources",
-        "github.com/18F/team-api.18f.gov",
-        "github.com/18F/writing-lab",
-        "gkey.gsa.gov",
-        "gsa-tts.slack.com",
-        "gsa.my.salesforce.com",
-        "gsaolu.gsa.gov",
-        "hrprod.hr.gsa.gov",
-        "insite.gsa.gov",
-        "mail.gsa.gov",
-        "meet.gsa.gov",
-        "pages-internal.18f.gov",
-        "tock.18f.gov",
-      ],
-    });
-
-    const externalLinkIcon = document.createElement("img");
-    externalLinkIcon.setAttribute(
-      "src",
-      `{{ site.baseurl }}/assets/uswds/img/usa-icons/launch.svg`
-    );
-    externalLinkIcon.setAttribute("alt", "(external link)");
-    externalLinkIcon.setAttribute("style", "width: 1rem;");
-
-    Array.from(document.querySelectorAll("a[href]"))
-      .filter((a) => {
-        const href = a.getAttribute("href");
-        return (
-          !href.startsWith(window.location.origin) &&
-          !/^[/#]/.test(a.getAttribute("href"))
-        );
-      })
-      .forEach((a) => a.appendChild(externalLinkIcon.cloneNode()));
+    configurePrivateEye();
+    addHeadingLinks();
+    markExternalLinks();
   },
   false
 );