docs: detect and fix broken links

.github/workflows/ci.yml

@@ -25,3 +25,5 @@ jobs:
         run: npm run lint
       - name: Run build
         run: npm run build
+      - name: Validate Internal Links
+        run: npm run validate:links

package.json

@@ -29,6 +29,7 @@
         "start": "npm-run-all build:sass --parallel watch:*",
         "build": "npm-run-all install:playground build:sass build:eleventy build:webpack images",
         "minify:svg": "svgo -r -f ./",
+        "validate:links": "cross-env NODE_OPTIONS=--max-old-space-size=4096 node tools/validate-links.js",
         "lint:js": "eslint --ext=.js,.jsx .",
         "lint:md": "markdownlint \"**/*.md\" ",
         "lint:scss": "stylelint \"**/*.scss\"",
@@ -56,6 +57,7 @@
         "@babel/core": "^7.17.5",
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-react": "^7.16.7",
+        "@munter/tap-render": "^0.2.0",
         "@octokit/graphql": "^4.8.0",
         "@octokit/rest": "^18.12.0",
         "babel-loader": "^8.2.3",
@@ -75,6 +77,7 @@
         "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-react-hooks": "^4.5.0",
         "gray-matter": "^4.0.3",
+        "hyperlink": "^5.0.4",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",
         "js-yaml": "^3.14.1",
@@ -92,6 +95,7 @@
         "style-loader": "^3.3.1",
         "stylelint": "^14.13.0",
         "stylelint-config-standard-scss": "^5.0.0",
+        "tap-spot": "^1.1.2",
         "undici": "^4.13.0",
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2",

src/_includes/components/testimonials-slider.html

@@ -9,7 +9,7 @@
                     </div>
                     <footer class="c-slider__testimonial__footer">
                         <cite class="profile contributor">
-                            <img class="profile__photo profile__photo--small" src="../../assets/images/people/testimonials/small/{{ item.image }}" width="48" height="48" alt="{{ item.name }}" loading="lazy">
+                            <img class="profile__photo profile__photo--small" src="/assets/images/people/testimonials/small/{{ item.image }}" width="48" height="48" alt="{{ item.name }}" loading="lazy">
                             <div class="profile__details">
                                 <span class="c-slider__testimonial__author profile__name">{{ item.name }}</span>
                                 <span class="c-slider__testimonial__author-role profile__title">{{ item.title }}</span>

src/_includes/layouts/base.html

@@ -161,7 +161,7 @@
     {%- if site.homepage.animation.enabled and hook == "homepage" -%}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js" ></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/Flip.min.js"></script>
-    <script src="../../assets/js/animation.js"></script>
+    <script src="{{ 'assets/js/animation.js' | url }}"></script>
     {%- endif -%}
 
     {%- if (hook == "homepage") or (hook == "component_library") -%}

src/content/pages/donate.html

@@ -54,7 +54,7 @@ <h2 class="section-title h3">{{ site.donate_page.donation_options.title }}</h2>
         <div class="donation-plans grid">
             <article class="donation-plan span-1-6">
                 <header class="donation-plan__header divider">
-                    <img src="../../assets/images/icons/opencollective-img.svg" width="64" height="64" alt="Open Collective" loading="lazy"/>
+                    <img src="/assets/images/icons/opencollective-img.svg" width="64" height="64" alt="Open Collective" loading="lazy"/>
                     <div class="donation-plan__platform">
                         <h3 class="donation-plan__platform-name">
                             {{ site.donate_page.donation_options.open_collective.title }}
@@ -86,7 +86,7 @@ <h3 class="donation-plan__platform-name">
             </article>
             <article class="donation-plan span-7-12">
                 <header class="donation-plan__header divider">
-                    <img src="../../assets/images/icons/github-img.svg" width="64" height="64" alt="GitHub Sponsors" class="donation-plan__github-logo" loading="lazy"/>
+                    <img src="/assets/images/icons/github-img.svg" width="64" height="64" alt="GitHub Sponsors" class="donation-plan__github-logo" loading="lazy"/>
                     <div class="donation-plan__platform">
                         <h3 class="donation-plan__platform-name">
                             {{ site.donate_page.donation_options.github_sponsors.title }}
@@ -212,7 +212,7 @@ <h2 class="section-title h3" hidden>{{ site.donate_page.testimonials.title }}</h
                             </div>
                             <footer class="c-slider__testimonial__footer">
                                 <cite class="profile contributor">
-                                    <img class="profile__photo profile__photo--small" src="../../assets/images/people/testimonials/small/{{ item.image }}" width="48" height="48" alt="{{ item.name }}" loading="lazy">
+                                    <img class="profile__photo profile__photo--small" src="/assets/images/people/testimonials/small/{{ item.image }}" width="48" height="48" alt="{{ item.name }}" loading="lazy">
                                     <div class="profile__details">
                                         <span class="c-slider__testimonial__author profile__name">{{ item.name }}</span>
                                         <span class="c-slider__testimonial__author-role profile__title">{{ item.title }}</span>

tools/validate-links.js

@@ -0,0 +1,44 @@
+const path = require("path");
+const TapRender = require("@munter/tap-render");
+const spot = require("tap-spot");
+const hyperlink = require("hyperlink");
+
+const tapRenderInstance = new TapRender();
+
+tapRenderInstance.pipe(spot()).pipe(process.stdout);
+
+const skipPatterns = [
+    "https://",
+    "fragment-redirect",
+    path.normalize("_site/sponsors"),
+    "/docs"
+];
+
+const skipFilter = (report) =>
+    Object.values(report).some((value) =>
+        skipPatterns.some((pattern) => String(value).includes(pattern))
+    );
+
+(async () => {
+    try {
+        await hyperlink(
+            {
+                inputUrls: ["../_site/index.html"],
+                root: path.resolve(__dirname, "../_site"),
+                canonicalRoot: "https://eslint.org/",
+                recursive: true,
+                internalOnly: true,
+                pretty: true,
+                concurrency: 25,
+                skipFilter,
+            },
+            tapRenderInstance
+        );
+    } catch (err) {
+        console.log(err.stack);
+        process.exit(1);
+    }
+    const results = tapRenderInstance.close();
+
+    process.exit(results.fail ? 1 : 0);
+})();