diff --git a/static/js/cours.js b/static/js/cours.js index 32c5984..30ece9a 100644 --- a/static/js/cours.js +++ b/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) - ); diff --git a/static/js/markdown.js b/static/js/markdown.js new file mode 100644 index 0000000..9d9b189 --- /dev/null +++ b/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) + ); diff --git a/templates/blog/post.html b/templates/blog/post.html index bf48205..f3e5e96 100644 --- a/templates/blog/post.html +++ b/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}} + diff --git a/templates/cours.html b/templates/cours.html index d6a24b4..1aadc39 100644 --- a/templates/cours.html +++ b/templates/cours.html @@ -27,5 +27,6 @@ {{#mail_obfsucated}}{{>libs/mail_obfuscater.html}}{{/mail_obfsucated}} {{/metadata}} {{/content}} {{/data}} +