split svg color fix into own file, add it to blog posts

static/js/cours.js

@@ -80,76 +80,6 @@ const deepestNodeOpened = (path, options) => {
   }
 };
 
-const Mode = {
-  Light: 1,
-  Dark: 2,
-};
-
-const svgChangeTheme = (mode) => {
-  for (const item of document.getElementsByTagName("img")) {
-    if (!item.src.startsWith("data:image/svg+xml;base64,")) {
-      // Exclude image who aren't SVG and base64 encoded
-      continue;
-    }
-
-    /** Convert to grayscale */
-    const colorToGrayscale = (color) => {
-      return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
-    };
-
-    /** Extract color using canvas2d */
-    const extractColors = (image) => {
-      const canvas = document.createElement("canvas");
-      canvas.width = image.width;
-      canvas.height = image.height;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(image, 0, 0);
-      const imageData = ctx.getImageData(
-        0,
-        0,
-        Math.max(1, canvas.width),
-        Math.max(1, canvas.height)
-      );
-      const pixelData = imageData.data;
-
-      const colors = [];
-      for (let i = 0; i < pixelData.length; i += 4) {
-        if (pixelData[i + 3] > 0) {
-          colors.push({
-            r: pixelData[i],
-            g: pixelData[i + 1],
-            b: pixelData[i + 2],
-          });
-        }
-      }
-
-      return colors;
-    };
-
-    // Extract colors
-    const colors = extractColors(item);
-
-    // Calculate the average grayscale value
-    const grayscaleValues = colors.map(colorToGrayscale);
-    const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
-    const averageGrayscale = totalGrayscale / grayscaleValues.length;
-
-    const treshold = 128;
-
-    if (averageGrayscale < treshold && mode === Mode.Dark) {
-      item.style = "filter: invert(1);";
-      continue;
-    }
-
-    if (averageGrayscale > treshold && mode === Mode.Light) {
-      item.style = "filter: invert(1);";
-      continue;
-    }
-
-    item.style = "";
-  }
-};
-
 window.addEventListener("load", () => {
   // Build the filetree
   const fileTreeElement = document.getElementsByTagName("aside")[0];
@@ -174,17 +104,4 @@ window.addEventListener("load", () => {
 
     uncollapse(last_openeded);
   }
-
-  // Fix SVG images
-  svgChangeTheme(
-    window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? Mode.Dark
-      : Mode.Light
-  );
 });
-
-window
-  .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (event) =>
-    svgChangeTheme(event.matches ? Mode.Dark : Mode.Light)
-  );

static/js/markdown.js

@@ -0,0 +1,84 @@
+const Mode = {
+  Light: 1,
+  Dark: 2,
+};
+
+const svgChangeTheme = (mode) => {
+  for (const item of document.getElementsByTagName("img")) {
+    if (!item.src.startsWith("data:image/svg+xml;base64,")) {
+      // Exclude image who aren't SVG and base64 encoded
+      continue;
+    }
+
+    /** Convert to grayscale */
+    const colorToGrayscale = (color) => {
+      return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
+    };
+
+    /** Extract color using canvas2d */
+    const extractColors = (image) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(image, 0, 0);
+      const imageData = ctx.getImageData(
+        0,
+        0,
+        Math.max(1, canvas.width),
+        Math.max(1, canvas.height)
+      );
+      const pixelData = imageData.data;
+
+      const colors = [];
+      for (let i = 0; i < pixelData.length; i += 4) {
+        if (pixelData[i + 3] > 0) {
+          colors.push({
+            r: pixelData[i],
+            g: pixelData[i + 1],
+            b: pixelData[i + 2],
+          });
+        }
+      }
+
+      return colors;
+    };
+
+    // Extract colors
+    const colors = extractColors(item);
+
+    // Calculate the average grayscale value
+    const grayscaleValues = colors.map(colorToGrayscale);
+    const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
+    const averageGrayscale = totalGrayscale / grayscaleValues.length;
+
+    const treshold = 128;
+
+    if (averageGrayscale < treshold && mode === Mode.Dark) {
+      item.style = "filter: invert(1);";
+      continue;
+    }
+
+    if (averageGrayscale > treshold && mode === Mode.Light) {
+      item.style = "filter: invert(1);";
+      continue;
+    }
+
+    item.style = "";
+  }
+};
+
+window.addEventListener("load", () => {
+  // Fix SVG images
+  svgChangeTheme(
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? Mode.Dark
+      : Mode.Light
+  );
+});
+
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (event) =>
+    svgChangeTheme(event.matches ? Mode.Dark : Mode.Light)
+  );

templates/blog/post.html

@@ -38,5 +38,6 @@
     {{#syntax_highlight}}{{>libs/hljs_footer.html}}{{/syntax_highlight}}
     {{#mail_obfsucated}}{{>libs/mail_obfuscater.html}}{{/mail_obfsucated}}
     {{/metadata}} {{/post}} {{/data}}
+    <script src="/js/markdown.js"></script>
   </body>
 </html>

templates/cours.html

@@ -27,5 +27,6 @@
     {{#mail_obfsucated}}{{>libs/mail_obfuscater.html}}{{/mail_obfsucated}}
     {{/metadata}} {{/content}} {{/data}}
     <script src="/js/cours.js"></script>
+    <script src="/js/markdown.js"></script>
   </body>
 </html>