Verify hash links

Author: fildon

.eleventy.js

@@ -59,6 +59,45 @@ module.exports = function (eleventyConfig) {
 		return dirName.replace(/^\d{4}-\d{2}-\d{2}-/, "");
 	});
 
+	// Transform relative image paths to root-absolute paths
+	eleventyConfig.addTransform("absoluteImagePaths", function (content, outputPath) {
+		if (outputPath && outputPath.endsWith(".html")) {
+			// Get the directory of the output file relative to _site
+			// e.g., "_site/blog/my-post/index.html" -> "blog/my-post"
+			// or "/full/path/_site/blog/my-post/index.html" -> "blog/my-post"
+			let outputDir = outputPath;
+			
+			// Handle both absolute and relative paths
+			const siteIndex = outputDir.indexOf("_site/");
+			if (siteIndex !== -1) {
+				outputDir = outputDir.substring(siteIndex + 6); // Remove everything up to and including "_site/"
+			}
+			
+			// Remove the filename (e.g., "index.html")
+			// If there's a slash, extract directory path. If no slash (root level), use empty string
+			if (outputDir.includes("/")) {
+				outputDir = outputDir.replace(/\/[^\/]*$/, "");
+			} else {
+				outputDir = ""; // Root level file
+			}
+			
+			// Replace relative image paths with absolute paths
+			// Match src="./filename.ext"
+			content = content.replace(/(<img[^>]+src=["'])\.\/([^"']+)(["'])/g, (match, prefix, path, suffix) => {
+				// Convert ./file.png to /blog/my-post/file.png or /file.png (for root)
+				const absolutePath = outputDir ? `/${outputDir}/${path}` : `/${path}`;
+				return `${prefix}${absolutePath}${suffix}`;
+			});
+			
+			// Also handle relative paths in link hrefs for images
+			content = content.replace(/(<a[^>]+href=["'])\.\/([^"']+\.(gif|png|jpg|jpeg|svg))(["'])/gi, (match, prefix, path, ext, suffix) => {
+				const absolutePath = outputDir ? `/${outputDir}/${path}` : `/${path}`;
+				return `${prefix}${absolutePath}${suffix}`;
+			});
+		}
+		return content;
+	});
+
 	// Watch for changes in CSS files for hot reload during development
 	eleventyConfig.addWatchTarget("./static/**/*.css");
 

.github/workflows/link-check.yml

@@ -34,7 +34,7 @@ jobs:
         uses: lycheeverse/lychee-action@v1
         with:
           # Check all HTML files in the built site
-          args: --verbose --no-progress './_site/**/*.html'
+          args: --verbose --no-progress --include-fragments --base 'https://rupertmckay.com' './_site/**/*.html'
           # Fail the workflow if broken links are found
           fail: true
         env:

lychee.toml

@@ -4,8 +4,8 @@
 # Maximum number of concurrent network requests
 max_concurrency = 8
 
-# Check links in HTML
-include = ["./**/*.html"]
+# Check that fragment identifiers (hash links) exist on the target page
+include_fragments = true
 
 # Exclude patterns (regex)
 exclude = [
@@ -20,6 +20,9 @@ exclude = [
 
   # Exclude mailto links (they often fail checks)
   "mailto:",
+  
+  # Exclude npmjs.com (blocks automated requests with 403)
+  "https://www.npmjs.com",
 ]
 
 # Accepted status codes for valid links

src/blog/2021-07-10-handling-optional-values-in-typescript/index.md

@@ -4,6 +4,7 @@ description: What are all these question marks in my code?
 date: 2021-07-10
 layout: layouts/post.njk
 ---
+
 Key takeaways:
 
 - Prefer `??` to `||`
@@ -24,14 +25,14 @@ TypeScript supports optional properties via the following syntax:
 ```ts
 // Works with 'interface'
 interface User {
-  name: string;
-  age?: number;
+	name: string;
+	age?: number;
 }
 
 // and also with 'type'
 type User = {
-  name: string;
-  age?: number;
+	name: string;
+	age?: number;
 };
 ```
 
@@ -49,14 +50,14 @@ When defining a function that accepts the `User` type, the `age` type will be `n
 ```ts
 // Lets find out if this user is old enough to drive
 function isOldEnoughToDrive(user: User) {
-  // initially user.age is number | undefined
-  if (user.age === undefined) {
-    // But after an if check the type will be narrowed
-    // In this example we return 'false' if 'age' isn't available.
-    return false;
-  }
-  // But if age is available, then it is narrowed to a 'number' type.
-  return user.age >= DRIVING_AGE;
+	// initially user.age is number | undefined
+	if (user.age === undefined) {
+		// But after an if check the type will be narrowed
+		// In this example we return 'false' if 'age' isn't available.
+		return false;
+	}
+	// But if age is available, then it is narrowed to a 'number' type.
+	return user.age >= DRIVING_AGE;
 }
 
 isOldEnoughToDrive({ name: "Ash Ketchum", age: 10 }); // returns false
@@ -68,17 +69,17 @@ This behavior is _nearly_ equivalent to if we had:
 
 ```ts
 interface User {
-  name: string;
-  age: number | undefined;
+	name: string;
+	age: number | undefined;
 }
 ```
 
 The difference is whether the key must be explicitly provided by objects wanting to satisfy this interface:
 
 ```ts
 interface User {
-  name: string;
-  age: number | undefined;
+	name: string;
+	age: number | undefined;
 }
 
 // Type error! "age" is a required property of "User"
@@ -106,7 +107,7 @@ The only difference is that `||` will fall back if the lefthand value is _anythi
 
 I highly recommend forgetting about `||` for default fallbacks and using `??` instead.
 
-You can enforce this with [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint)'s own [prefer-nullish-coalescing](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/prefer-nullish-coalescing.md) rule
+You can enforce this with [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint)'s own [prefer-nullish-coalescing](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-nullish-coalescing.mdx) rule
 
 ## Optional Chaining (?.)
 
@@ -116,15 +117,15 @@ What if this time we have a `Session` object, which has a `User` only if the cur
 
 ```ts
 interface Session {
-  user?: User;
+	user?: User;
 }
 
 function getWelcomeMessage(session: Session) {
-  const userName = session.user?.name;
-  if (userName === undefined) {
-    return "Hello Guest!";
-  }
-  return `Hello ${userName}!`;
+	const userName = session.user?.name;
+	if (userName === undefined) {
+		return "Hello Guest!";
+	}
+	return `Hello ${userName}!`;
 }
 ```
 
@@ -142,12 +143,12 @@ We can use all these concepts together:
 
 ```ts
 interface Session {
-  user?: User;
+	user?: User;
 }
 
 function getWelcomeMessage(session: Session) {
-  const userName = session.user?.name ?? "GUEST";
-  return `Hello ${userName}!`;
+	const userName = session.user?.name ?? "GUEST";
+	return `Hello ${userName}!`;
 }
 ```