Hello! For my workflow, I sometimes need to reference blocks located on other pages from a “calling page”, like in the picture.
As you can see, some references come from journal pages and others come from regular pages. Would it be possible to change the pencil on the right to indicate which kind of page the referenced block belongs to?
Maybe adding another symbol next to it?
I suppose this can be done with CSS, but I’m lost. Any ideas would be appreciated.
Many thanks in advance!
custom.css :.ls-block:has(.block-ref[data-reficon="journal"]) .items-center > a:has(> svg):before {
content: "\1F4F0";
}
custom.js :const blockrefs = document.getElementsByClassName("block-ref");
const blockrefObserver = new MutationObserver(function onMutated(){
Array.prototype.map.call(blockrefs, (span)=>{
const data = span.dataset
const reficon = data.reficon
if (reficon) return
const parent = span.closest(".ls-block")
const icon = parent.querySelector(".items-center > a > svg")
if (!icon) {
data.reficon = "none"
return
}
const uuid = span.querySelector(".block-content").getAttribute("blockid")
const block = logseq.api.get_block(uuid)
const isJournal = logseq.api.get_page(block.page.id)["journal?"]
data.reficon = (isJournal) ? "journal" : "non-journal"
})
});
blockrefObserver.observe(document.getElementById("app-container"), {
attributes: true,
subtree: true,
attributeFilter: ["class"]
});
