split svg color fix into own file, add it to blog posts
This commit is contained in:
parent
1bc845b398
commit
8750d52a4d
GPG key ID:
A82D63DFF8D1317F
4 changed files with 86 additions and 83 deletions
|
|
@ -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)
|
||||
);
|
||||
|
|
|
|||
84
static/js/markdown.js
Normal file
84
static/js/markdown.js
Normal file
|
|
@ -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)
|
||||
);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue