Show properties of a note in the published pages

[elkadre]

Based on @tadashi-aikawa 's solution, I expanded the publish.js code to accommodate more detailed CSS formatting through publish.css and allow more granular selection of properties shown.

In the example below I included Aliases, Tags and one string-property (“Type”) - other properties can be added by copy-pasting the Type sections. The CSS file definitely has to be modified to match each theme but hopefully the code is clear enough.

Note: as far as I can tell, it doesn’t work with sliding panes and I haven’t been able to fix it myself. I don’t actually know Javascript, I just fiddled until something worked lol

/* PUBLISH.JS PROPERTIES */

let id;

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

/* selects the properties to be published */

  const type = frontmatter["type"]?.replaceAll("-", "/");
  const tags = frontmatter["tags"];
  const aliases = frontmatter["aliases"];

/* maps out and formats the tags */

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

/* maps out and formats the aliases */

  const aliasElms = aliases
  .map(
    (alias) => `
  <a class="alias" target="_blank" rel="noopener">${alias}</a>
  `
  )
  .join("");


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

/* inserts the html */

  frontmatterEl.insertAdjacentHTML(
    "afterend",
    `
      <div class="propertyitemtable">
       <div id="typeproperty" class="propertyitem">type: ${type}</div>
      </div>
      <div id="tagsproperty" class="propertyitemtags">
       ${tagElms}
      </div>
      <div id="aliasesproperty" class="propertyitemaliases">
       ${aliasElms}
      </div>
`
  );


  /* makes sure that only existing properties are shown */

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

if (aliases) {
  document.getElementById('aliasesproperty').style.display = ""
} else {
  document.getElementById('aliasesproperty').style.display = "none"
}

if (tags) {
  document.getElementById('tagsproperty').style.display = ""
} else {
  document.getElementById('tagsproperty').style.display = "none"
}

  clearInterval(id);
}

/* put the properties after the note title */

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);

/* PUBLISH.CSS PROPERTIES */

/* formats the overall properties block except aliases and tags */

.propertyitemtable {
    display: block; 
    justify-content: end; 
    gap: 3px; 
    font-family: var(--font-monospace); 
    font-size: var(--font-smaller);
}

/* formats each row of properties */

.propertyitem {
    font-size: var(--font-smallest);
    font-weight: normal;
    z-index: 1;
    cursor: default;
    padding: 5px 20px;
    text-align: justify;
    font-family: var(--font-monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* formats the row of tags */

.propertyitemtags {
    margin:10px;
    font-size: var(--font-smaller);
}

/* formats each tag */

.propertyitemtags a.tag {
	background-color: var(--tag-background);
	border: var(--tag-border-width) solid var(--tag-border-color);
	border-radius: var(--tag-radius);
	color: var(--tag-color);
	font-size: var(--tag-size);
	font-weight: var(--tag-weight);
	text-decoration: var(--tag-decoration);
	padding: var(--tag-padding-y) var(--tag-padding-x);
	line-height: 1;
}

/* formats the row of aliases*/

.propertyitemaliases {
    margin:10px; 
    font-size: var(--font-smaller); 
    text-align: center;    
    cursor: default;
}

/*formats each alias */

.propertyitemaliases a.alias {
	background-color: var(--tag-background);
	border: var(--tag-border-width) solid var(--tag-border-color);
	border-radius: var(--tag-radius);
	color: var(--tag-color);
	font-size: var(--tag-size);
	font-weight: var(--tag-weight);
	text-decoration: var(--tag-decoration);
	padding: var(--tag-padding-y) var(--tag-padding-x);
	line-height: 1;
}