Multiple source notices.

script/build-site.ts

@@ -1,3 +1,4 @@
+import assert from "node:assert";
 import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { JSDOM } from "jsdom";
@@ -64,6 +65,7 @@ for (const className of Object.values(CubingIcons).sort()) {
 }
 
 const allIconsElem = mustExist(document.querySelector("#all-icons"));
+allIconsElem.textContent = "";
 for (const className of classNamesOrdered) {
   const a = allIconsElem.appendChild(document.createElement("a"));
   a.href = `#${className}`;
@@ -72,7 +74,11 @@ for (const className of classNamesOrdered) {
   span.classList.add(className);
 }
 
-mustExist(document.querySelector("#source-notice")).remove();
+const notices = document.querySelectorAll(".source-notice");
+assert.equal(notices.length, 2);
+for (const notice of notices) {
+  notice.remove();
+}
 
 for (const prefix of ["event", "unofficial", "penalty"]) {
   const [elem, ...extra] = document.getElementsByClassName(`group-${prefix}`);

src/web/icons.cubing.net/index.html

@@ -27,6 +27,12 @@
     <h1><span class="cubing-icon event-clock"></span> It's time for cubing icons!</h1>
 
     <div id="all-icons">
+      <a href="#event-333"><span class="cubing-icon event-333"></span></a><a href="#event-222"><span
+          class="cubing-icon event-222"></span></a><a href="#event-444"><span class="cubing-icon event-333"></span></a>
+    </div>
+    <div class="source-notice"
+      style="color: yellow; background: color-mix(in oklab, yellow 25%, transparent); padding: 2em 1em;">
+      Note: Only three icons are included in the source HTML in the repo. All icons are included in the compiled HTML.
     </div>
     <p>
       Cubing icons can be used for any cubing project under a <a
@@ -139,9 +145,10 @@ <h2>Icon catalog</h2>
         Icons are listed here with their CSS <code>class</code> names.
       </p>
 
-      <div id="source-notice"
-        style="color: red; background: color-mix(in oklab, red 25%, transparent); padding: 2em 1em;">
-        Note: Only three icons from each group are included in the source HTML in the repo.
+      <div class="source-notice"
+        style="color: yellow; background: color-mix(in oklab, yellow 25%, transparent); padding: 2em 1em;">
+        Note: Only three icons from each group are included in the source HTML in the repo. All icons are included in
+        the compiled HTML.
       </div>
 
       <section id="wca-events" class="group-event">