Add missing meta charset and remove editors stylesheet at build time (#4513)

kfranqueiro · patrickhlauke · mbgower · web-flow · commit 69088aa426d0 · 2025-08-25T13:30:02.000-07:00
Fixes #4505. This is an alternative to #4506 that resolves the same issues without changing source files, to avoid potential conflicts with other open PRs. I diffed the build before and after this PR, and it results in effectively the same output as #4506, plus also catches a few instances under `understanding`. I did update the technique and understanding template files, to try to avoid the same mistakes happening on future additions. --------- Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk> Co-authored-by: Mike Gower <mikegower@gmail.com>
diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts
@@ -138,9 +138,8 @@ export class CustomLiquid extends Liquid {
 
       // Clean out elements to be removed
       // (e.g. editors.css & sources.css, and leftover template paragraphs)
-      // NOTE: some paragraphs with the "instructions" class actually have custom content,
-      // but for now this remains consistent with the XSLT process by stripping all of them.
-      $(".remove, section#meta, section.meta").remove();
+      // Note: the link selector accounts for ~40 files forgetting class="remove" on editors.css
+      $(".remove, link[href$='editors.css'], section#meta, section.meta").remove();
 
       if ($("p.instructions").length > 0) {
         console.error(`${filepath} contains a <p class="instructions"> element.\n` +
@@ -151,6 +150,9 @@ export class CustomLiquid extends Liquid {
         throw new Error("Instructions paragraph found; please resolve.")
       }
 
+      // Add charset to pages that forgot it
+      if (!$("meta[charset]").length) $('<meta charset="UTF-8">').prependTo("head");
+
       const prependedIncludes = ["header"];
       const appendedIncludes = ["wai-site-footer", "site-footer"];
 
diff --git a/techniques/technique-template.html b/techniques/technique-template.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<meta charset="UTF-8">
 		<title>Technique Title</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css">
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
 	</head>
 	<body>
 		<h1>Technique Title</h1>
diff --git a/understanding/understanding-template.html b/understanding/understanding-template.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<meta charset="UTF-8">
 		<title>WCAG 2 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
+		<link rel="stylesheet" type="text/css" href="sources.css" class="remove">
 	</head>
 	<body>
 		<h1>Understanding SC #.#.#</h1>
