publish.js

/*
Since this site is made with Obsidian, we use this publish.js file to customize the site.
https://help.obsidian.md/Obsidian+Publish/Customize+your+site
*/

const site = "https://brain.elkadre.ch";

// Customize navigation order

let navOrderAsc = []; // These go on top
let navOrderDsc = []; // These go at the bottom

// Items not mentioned go in between in alphabetical order

var siteLeft = document.querySelector('.site-body-left-column');
var siteNav = siteLeft.querySelector('.nav-view-outer');
var navContainer = siteNav.querySelector('.tree-item').querySelector('.tree-item-children');

for (const item of navOrderAsc.reverse()) {
    navItem = navContainer.querySelector(`[data-path="${item}.md"]`);
    if (navItem == null) continue;
    moveItem = navItem.parentElement;
    navContainer.prepend(moveItem);
};

for (const item of navOrderDsc.reverse()) {
    navItem = navContainer.querySelector(`[data-path="${item}.md"]`);
    if (navItem == null) continue;
    moveItem = navItem.parentElement;
    navContainer.append(moveItem);
};

/* == Add Buy Me a Coffee to Left Side Menu == */

var buymeacoffee = document.createElement("bmac");

document.querySelector(".site-body-right-column").appendChild(buymeacoffee); 

buymeacoffee.innerHTML = '<div style="text-align: center; display:block; bottom:0; right:10px; position: absolute; margin-bottom:30px; margin-left: "><a href="https://ko-fi.com/lkadre" target="_blank"><img src="https://storage.ko-fi.com/cdn/brandasset/kofi_s_logo_nolabel.png" alt="Buy Me A Coffee" height="60" width="60" style="opacity:0.3;filter:alpha(opacity=30);"></a></div>';


/* == Publish Frontmatter code from tadashi-aikawa 
https://forum.obsidian.md/t/show-properties-of-a-note-in-the-published-pages/68164/5?u=sigrunixia */

let id;

function insertMetaDates() {
  const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
  if (!frontmatter) {
    return;
  }

  const lastupdate = frontmatter["lastupdate"]?.replaceAll("-", "/");
  const fullname = frontmatter["fullname"]?.replaceAll("-", "/");
  const birth = frontmatter["birth"]?.replaceAll("-", "/");
  const death = frontmatter["death"]?.replaceAll("-", "/");
  const type = frontmatter["type"]?.replaceAll("-", "/");
  const jurisdiction = frontmatter["jurisdiction"]?.replaceAll("-", "/");
  const url = frontmatter["url"];
  const tags = frontmatter["tags"]

  const frontmatterEl = document.querySelector(".frontmatter");
  if (!frontmatterEl) {
    return;
  }

  const tagElms = tags
  .map(
    (tag) => `
  <a href="#${tag}" class="tag" target="_blank" rel="noopener">#${tag}</a>
  `
  )
  .join("");



  frontmatterEl.insertAdjacentHTML(
    "afterend",
    `
<div class="propertyitemtable">
    <div id="updatedateproperty" class="propertyitem">Last Update on ${lastupdate}</div>
    <div id="fullnameproperty" class="propertyitem">full name: ${fullname}</div>
    <div id="birthproperty" class="propertyitem">birth: ${birth}</div>
    <div id="deathproperty" class="propertyitem">death: ${death}</div>
    <div id="jurisdictionproperty" class="propertyitem">jurisdiction: ${jurisdiction}</div>
    <div id="typeproperty" class="propertyitem">type: ${type}</div>
    <div id="urlproperty" class="propertyitem"><a href="${url}"> URL </a></div>
</div>
<div class="propertyitemtags">
        ${tagElms}
</div>
`
  );

if (!lastupdate) {
    document.getElementById('updatedateproperty').style.display = "none"
} else {
    document.getElementById('updatedateproperty').style.display = ""
}

if (!fullname) {
    document.getElementById('fullnameproperty').style.display = "none"
} else {
    document.getElementById('fullnameproperty').style.display = ""
}

if (!birth) {
    document.getElementById('birthproperty').style.display = "none"
} else {
    document.getElementById('birthproperty').style.display = ""
}

if (!death) {
    document.getElementById('deathproperty').style.display = "none"
} else {
    document.getElementById('deathproperty').style.display = ""
}

if (!jurisdiction) {
  document.getElementById('jurisdictionproperty').style.display = "none"
} else {
  document.getElementById('jurisdictionproperty').style.display = ""
}

if (!url) {
  document.getElementById('urlproperty').style.display = "none"
} else {
  document.getElementById('urlproperty').style.display = ""
}

if (!type) {
  document.getElementById('typeproperty').style.display = "none"
} else {
  document.getElementById('typeproperty').style.display = ""
}

  clearInterval(id);
}

const onChangeDOM = (mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (
      mutation.type === "childList" &&
      mutation.addedNodes[0]?.className === "page-header"
    ) {
      clearInterval(id);
      id = setInterval(insertMetaDates, 50);
    }
  }
};


const targetNode = document.querySelector(
  ".markdown-preview-sizer.markdown-preview-section"
);
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaDates, 50);