PersonCard Dataview view

view.css

.hasPersonCard h2[data-heading="Notes"] {
  clear: both;
}

.k-PersonCard {
  border-radius: var(--radius-l);
  background-color: var(--background-modifier-hover);
  border: var(--prompt-border-width) solid var(--prompt-border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-4-6);
  margin: 0 0 var(--size-4-3) var(--size-4-3);
  gap: var(--size-4-3);
  float: right;
  width: calc(var(--file-line-width) / 3);
}

.k-PersonCard ul {
  flex: 1;
  width: 100%;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-4-3);
  padding: 0;
  margin: 0;
}

.k-PersonCard ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
}

.k-PersonCard_label {
  font-size: var(--font-small);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--size-2-2);
}

.k-PersonCard_picture img {
  max-width: 100%;
  border-radius: 100%;
  border: var(--prompt-border-width) solid var(--prompt-border-color);
}

view.js

// Card presenting the common details for a person
const person = dv.current();

function renderLink(link, fallback = "Inconnu") {
  if (typeof link === "string") {
    return link;
  }
  if (!link) {
    return `<span class="k-PersonCard_fallback">${fallback}</span>`;
  }
  const file = app.vault.getAbstractFileByPath(link.path);
  if (!file) {
    return `<span class="k-PersonCard_fallback">${fallback}</span>`;
  }
  return `<a data-href="${file.basename}" href="${file.basename}" class="internal-link" target="_blank" rel="noopener">${file.basename}</a>`;
}

function renderImage(link) {
  if (typeof link === "string") {
    return link;
  }
  if (!link) {
    return "";
  }
  const uri = app.vault.adapter.getResourcePath(link.path);
  if (!uri) {
    return "";
  }
  return `<img alt="${person.file.name}" width="200" src="${uri}" />`;
}

const isYearKnown = person.birthday?.year !== 1;

const html = `
  <div class="k-PersonCard_picture">
    ${renderImage(person.picture)} 
  </div>
  <ul>
    <li>
      <span class="k-PersonCard_label">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cake"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v3"/><path d="M12 8v3"/><path d="M17 8v3"/><path d="M7 4h0.01"/><path d="M12 4h0.01"/><path d="M17 4h0.01"/></svg>
        Anniversaire
      </span>
      <span>${
        person.birthday
          ? moment(person.birthday.toJSDate())
              .locale("fr")
              .format(isYearKnown ? "D MMMM YYYY" : "D MMMM")
          : "Inconnu"
      }</span>
    </li>
    <li>
      <span class="k-PersonCard_label">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-home"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        Lieu de vie
      </span>
      <span>${renderLink(person.livesIn)}</span>
    </li>
    <li>
      <span class="k-PersonCard_label">
        <svg xmlns="http://www.w3.org/200e/svg" width="16" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        Emploi
      </span>
      <span>${renderLink(person.company)}</span>
      <span>${person.job ? renderLink(person.job) : ""}</span>
    </li>
  </ul>
`;

const card = dv.container.createEl("div", { cls: "k-PersonCard" });
card.insertAdjacentHTML("afterbegin", html);