max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: dont show image duplicate in beginnign of markdown

Browse Source
This commit is contained in:
max_richter
2025-01-26 02:00:59 +01:00
parent 6a54bdeec6
commit d450f4ed42
8 changed files with 99 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/global.css
View File

@@ -150,4 +150,12 @@ main.loading {
display: inline-flex;
margin-left: -26px;
margin-right: 12px;
opacity: 0;
transition: opacity 0.2s;
}
.markdown-body>h1:hover .anchor,
.markdown-body>h2:hover .anchor,
.markdown-body>h3:hover .anchor {
opacity: 1;
}

69
static/thumbnails.js
View File

@@ -226,39 +226,44 @@ function rgbaToDataURL(w, h, rgba) {
return "data:image/png;base64," + btoa(String.fromCharCode(...bytes));
}
document.querySelectorAll("[data-thumb]").forEach((entry) => {
const hash = entry.getAttribute("data-thumb");
function updateThumbnailImages() {
document.querySelectorAll("[data-thumb]").forEach((entry) => {
const hash = entry.getAttribute("data-thumb");
if (!hash) return;
if (!hash) return;
const decodedString = atob(hash);
const decodedString = atob(hash);
// Create Uint8Array from decoded string
const buffer = new Uint8Array(decodedString.length);
for (let i = 0; i < decodedString.length; i++) {
buffer[i] = decodedString.charCodeAt(i);
}
const image = thumbHashToRGBA(buffer);
const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
entry.style.background = `url(${dataURL})`;
entry.style.backgroundSize = "cover";
const child = entry.querySelector("img[data-thumb-img]");
setTimeout(() => {
const isLoaded = child && child.complete && child.naturalHeight !== 0;
if (child && !isLoaded) {
child.style.opacity = 0;
child.style.filter = "blur(5px)";
child.addEventListener("load", () => {
child.style.transition = "opacity 0.3s ease, filter 0.6s ease";
child.style.opacity = 1;
child.style.filter = "blur(0px)";
setTimeout(() => {
entry.style.background = "";
}, 400);
});
// Create Uint8Array from decoded string
const buffer = new Uint8Array(decodedString.length);
for (let i = 0; i < decodedString.length; i++) {
buffer[i] = decodedString.charCodeAt(i);
}
}, 50);
});
const image = thumbHashToRGBA(buffer);
const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
entry.style.background = `url(${dataURL})`;
entry.style.backgroundSize = "cover";
const child = entry.querySelector("img[data-thumb-img]");
setTimeout(() => {
const isLoaded = child && child.complete && child.naturalHeight !== 0;
if (child && !isLoaded) {
child.style.opacity = 0;
child.style.filter = "blur(5px)";
child.addEventListener("load", () => {
child.style.transition = "opacity 0.3s ease, filter 0.6s ease";
child.style.opacity = 1;
child.style.filter = "blur(0px)";
setTimeout(() => {
entry.style.background = "";
}, 400);
});
}
}, 50);
});
}
globalThis.addEventListener("load", updateThumbnailImages);
globalThis.addEventListener("loading-finished", updateThumbnailImages);