Coffee

Dose, water, temperature, ratio, time. A coffee note is mostly the handful of numbers I need to make the cup happen twice, and the card sets them out like a spec sheet the bag the beans came in only wishes it could carry.

It reads the note for the tasting line and lifts the rest of the figures straight off the page. Nothing comes from outside.

It is my own brew log, laid out so the next cup can be the same cup, or the one that finally gets it right.

Custom Views Code

<div class="cof" data-name="{{file.name}}">
  <div class="cof-hero">
    <div class="cof-left">
      <p class="cof-eyebrow"></p>
      <h1 class="cof-title" data-raw="{{file.basename}}"></h1>
      <p class="cof-sub"></p>
      <p class="cof-prov"></p>
      <button class="cof-cta cof-toggle" type="button">Double the ratio</button>
    </div>
    <div class="cof-figure"><img class="cof-figure-img" alt="" /></div>
  </div>
  <div class="cof-statbar">
    <span class="cof-batch">Double batch &middot; 2&times;</span>
    <div class="cof-stats"></div>
  </div>
  <div class="cof-notes"><p class="cof-notes-h">Tasting Notes</p><div class="cof-notes-body"></div></div>
</div>

.obsidian-custom-view-editable .obsidian-custom-view-render,
.obsidian-custom-view-render { padding: 0 !important; --line-width: 100%; --max-width: none; }

.cof {
  --cof-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --cof-cream: #f4eee1;
  --cof-muted: #b3a691;
  --cof-gold: #cda24e;
  --cof-line: rgba(244,238,225,.14);
  container-type: inline-size; container-name: cof;
  width: 100%; box-sizing: border-box;
  padding: clamp(24px,3.4vw,46px) clamp(22px,4vw,60px) clamp(26px,4vw,46px);
  color: var(--cof-cream);
  font-family: var(--cof-serif);
  background:
    radial-gradient(58% 48% at 80% 1%, rgba(150,110,66,.12), transparent 60%),
    radial-gradient(46% 56% at 3% 38%, rgba(92,66,42,.10), transparent 64%),
    linear-gradient(165deg, #20140d 0%, #130a06 56%, #090503 100%);
  box-shadow: inset 0 0 240px 50px rgba(0,0,0,.6);
  overflow: hidden;
}

/* ── HERO ────────────────────────────────────────────── */
.cof-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(24px,3.4vw,56px); align-items: stretch; }
.cof.no-fig .cof-hero { grid-template-columns: 1fr; }
.cof-left { min-width: 0; align-self: center; }
.cof-eyebrow { margin: 0 0 14px; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cof-gold); }
.cof-eyebrow:empty { display: none; }
.cof-title { margin: 0; font-weight: 500; line-height: 1.02; letter-spacing: -.01em; font-size: clamp(34px,5.4cqw,64px); color: var(--cof-cream); }
.cof-sub { margin: 18px 0 0; max-width: 38ch; font-family: -apple-system, system-ui, sans-serif; font-size: clamp(13px,1.1vw,15px); line-height: 1.6; color: var(--cof-muted); }
.cof-sub:empty { display: none; }
.cof-prov { margin: 14px 0 0; font-family: -apple-system, system-ui, sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--cof-muted); }
.cof-prov:empty { display: none; }
.cof-prov a { color: var(--cof-cream); text-decoration: none; border-bottom: 1px solid var(--cof-line); }
.cof-prov .cof-sep { opacity: .4; margin: 0 8px; }
.cof .cof-cta { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(22px,2.8vw,32px); font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cof-gold); background: rgba(205,162,78,.07); border: 1px solid color-mix(in srgb, var(--cof-gold) 55%, transparent); border-radius: 999px; padding: 13px 26px 13px 22px; cursor: pointer; box-shadow: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease; }
.cof .cof-cta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.cof .cof-cta:hover { background: var(--cof-gold); color: #160d05; border-color: var(--cof-gold); transform: translateY(-1px); }
.cof.scaled .cof-cta { background: var(--cof-gold); color: #160d05; border-color: var(--cof-gold); box-shadow: 0 8px 24px rgba(205,162,78,.22); }

/* ── FIGURE (fills the right side) ───────────────────── */
.cof-figure { position: relative; min-height: clamp(340px, 42cqw, 560px); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(244,238,225,.06); background: #170d07; }
.cof-figure-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cof-figure.no-img { display: none; }

/* ── STATS ───────────────────────────────────────────── */
.cof-statbar { margin-top: clamp(26px,4vw,52px); }
.cof-batch { display: none; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cof-gold); margin-bottom: 14px; }
.cof.scaled .cof-batch { display: inline-block; }
.cof-stats { display: flex; flex-wrap: wrap; gap: 0; }
.cof-stat { flex: 1 1 0; min-width: 120px; padding: 4px clamp(14px,2vw,28px); position: relative; }
.cof-stat + .cof-stat::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--cof-line); }
.cof-stat-v { font-family: var(--cof-serif); font-weight: 500; line-height: 1; font-size: clamp(28px,3.4cqw,44px); color: var(--cof-gold); white-space: nowrap; }
.cof-stat-u { font-size: .42em; color: var(--cof-muted); margin-left: 4px; letter-spacing: .02em; }
.cof-stat.scalable.on .cof-stat-v { color: #e9ca7c; text-shadow: 0 0 16px rgba(205,162,78,.4); }
.cof-stat-k { margin-top: 8px; font-family: -apple-system, system-ui, sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--cof-muted); }

/* ── NOTES ───────────────────────────────────────────── */
.cof-notes { margin-top: clamp(30px,4vw,52px); padding-top: clamp(22px,2.4vw,30px); border-top: 1px solid var(--cof-line); }
.cof-notes-h { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cof-gold); margin: 0 0 20px; display: flex; align-items: center; gap: 16px; }
.cof-notes-h::after { content: ""; flex: 1; height: 1px; background: var(--cof-line); }
.cof-notes-body { font-family: var(--cof-serif); font-size: clamp(15px,1.15vw,17px); line-height: 1.85; color: #d2c9b8; }
.cof-notes-body > :first-child { margin-top: 0; }
.cof-notes-body p { margin: 0 0 1.05em; }
.cof-notes-body > p:first-of-type::first-letter { float: left; font-family: var(--cof-serif); font-weight: 700; color: var(--cof-gold); font-size: 3.2em; line-height: .68; padding: 6px 11px 0 0; }
.cof-notes-body h2, .cof-notes-body h3 { font-family: var(--cof-serif); font-weight: 600; color: var(--cof-cream); letter-spacing: .01em; margin: 1.3em 0 .4em; }
.cof-notes-body a { color: var(--cof-gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cof-gold) 40%, transparent); }
.cof-notes-body blockquote { border-inline-start: 2px solid var(--cof-gold); margin: 1em 0; padding: 2px 0 2px 18px; color: #c2b9a8; font-style: italic; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@container cof (max-width: 900px) {
  .cof-hero { grid-template-columns: 1fr; }
  .cof-figure { order: -1; min-height: clamp(240px, 56cqw, 380px); }
  .cof-sub, .cof-title { max-width: none; }
}
@media (max-width: 900px) {
  .cof-hero { grid-template-columns: 1fr; }
  .cof-figure { order: -1; }
}
@container cof (max-width: 540px) {
  .cof-stat { flex: 1 1 45%; }
  .cof-stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 540px) {
  .cof-stat { flex: 1 1 45%; }
}

const _c = this;
(async () => {
  try {
    const root = _c.querySelector(".cof");
    if (!root) return;

    const wantName = root.dataset.name || "";
    let file = app.workspace.getActiveFile();
    if ((!file && wantName) || (file && wantName && file.name !== wantName)) {
      const byName = app.vault.getFiles().find(f => f.name === wantName);
      if (byName) file = byName;
    }
    if (!file) return;
    const fmOf = f => (app.metadataCache.getFileCache(f) || {}).frontmatter || {};
    const fm = fmOf(file);

    const clean = s => String(s == null ? "" : s).replace(/\[\[|\]\]/g, "").trim();
    const label = s => { let v = clean(s); v = v.includes("|") ? v.split("|").pop() : v.replace(/^[^|]+ - /, ""); return v.trim(); };
    const esc = s => String(s).replace(/[&<>"]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
    const present = v => !(v === undefined || v === null || v === "" || (Array.isArray(v) && !v.length));
    const baseNum = v => { const m = String(v).match(/-?\d+(\.\d+)?/); return m ? parseFloat(m[0]) : null; };
    const fmtNum = n => Number.isInteger(n) ? String(n) : String(Math.round(n * 100) / 100);
    const linkify = v => (Array.isArray(v) ? v : [v]).map(x => {
      const m = String(x).match(/\[\[([^\]|#]+)(?:\|([^\]]+))?\]\]/);
      if (m) return `<a href="#" class="cof-lp" data-lp="${esc(m[1].trim())}">${esc((m[2] || m[1]).trim())}</a>`;
      return esc(label(x));
    }).join('<span class="cof-sep">&middot;</span>');

    const resolveImg = (val, srcPath) => {
      if (!val) return "";
      let v = Array.isArray(val) ? val[0] : val; v = String(v).trim();
      if (/^https?:\/\//.test(v)) return v;
      const m = v.match(/\[\[([^\]|#]+)/);
      const lp = m ? m[1].trim() : v.replace(/^!?\[\[|\]\]$/g, "").trim();
      const dest = app.metadataCache.getFirstLinkpathDest(lp, srcPath);
      return dest ? app.vault.getResourcePath(dest) : "";
    };

    /* ── hero image (fills the right side) ── */
    const heroUrl = resolveImg(fm.banner || fm.cover, file.path);
    const figImg = root.querySelector(".cof-figure-img");
    if (heroUrl && figImg) figImg.src = heroUrl;
    else { root.querySelector(".cof-figure").classList.add("no-img"); root.classList.add("no-fig"); }

    /* ── headline / eyebrow ── */
    const titleEl = root.querySelector(".cof-title");
    if (titleEl) titleEl.textContent = (titleEl.getAttribute("data-raw") || "").replace(/^Coffee\s*-\s*/, "");
    const eyebrowEl = root.querySelector(".cof-eyebrow");
    if (eyebrowEl) eyebrowEl.textContent = fm.process ? label(fm.process) : "Single Origin";

    /* ── provenance line ── */
    const prov = [];
    if (fm.country) prov.push(linkify(fm.country));
    if (fm.variety) prov.push(linkify(fm.variety));
    if (fm.producer) prov.push(linkify(fm.producer));
    const provEl = root.querySelector(".cof-prov");
    if (provEl) provEl.innerHTML = prov.join('<span class="cof-sep">&middot;</span>');

    /* ── body → subhead + quote + notes ── */
    let body = "";
    try {
      body = await app.vault.read(file);
      body = body.replace(/^---[\s\S]*?\n---\n?/, "");
      body = body.replace(/^\s*((?:>.*\n?)+)\n?/, m => /dataviewjs|\[!/.test(m) ? "" : m);
      body = body.trim();
    } catch (e) {}
    const firstPara = (() => {
      const out = [];
      for (const raw of body.split(/\n/)) {
        const t = raw.trim();
        const block = !t || /^#{1,6}\s/.test(t) || /^>/.test(t) || /^[-*+]\s/.test(t) || /^\d+\.\s/.test(t) || /^(```|---|\|)/.test(t);
        if (block) { if (out.length) break; else continue; }
        out.push(t);
      }
      return out.join(" ").replace(/\[\[([^\]|#]+)(?:\|([^\]]+))?\]\]/g, (m, a, b) => b || a).replace(/[*_`]/g, "").trim();
    })();
    const subEl = root.querySelector(".cof-sub");
    if (subEl) { let s = firstPara; if (s.length > 170) s = s.slice(0, 167).replace(/\s+\S*$/, "") + "…"; subEl.textContent = s; }

    /* ── stats (with double-batch scaling) ── */
    const STATS = [
      { k: "grams", lab: "Dose", unit: "g", scale: true },
      { k: "ml", lab: "Yield", unit: "ml", scale: true },
      { k: "extraction-ml", lab: "Extraction", unit: "ml", scale: true },
      { k: "temp", lab: "Temp", raw: true },
      { k: "ratio", lab: "Ratio", raw: true },
      { k: "rating", lab: "Rating", suffix: "/10" },
    ];
    const statsEl = root.querySelector(".cof-stats");
    const scalables = [];
    if (statsEl) STATS.forEach(s => {
      const v = fm[s.k]; if (!present(v)) return;
      const el = document.createElement("div"); el.className = "cof-stat" + (s.scale ? " scalable" : "");
      let valHtml;
      if (s.scale) {
        const base = baseNum(v); if (base == null) return;
        el.dataset.base = base; el.dataset.unit = s.unit;
        valHtml = `<span class="cof-stat-num">${fmtNum(base)}</span><span class="cof-stat-u">${s.unit}</span>`;
        scalables.push(el);
      } else if (s.suffix) {
        const n = baseNum(v); if (n == null) return;
        valHtml = `${n}<span class="cof-stat-u">${s.suffix}</span>`;
      } else {
        const str = String(v).replace(/\s+/g, " ").trim();
        const m = str.match(/^(\S+)\s*(.*)$/);
        valHtml = m && m[2] ? `${esc(m[1])}<span class="cof-stat-u">${esc(m[2])}</span>` : esc(str);
      }
      el.innerHTML = `<div class="cof-stat-v">${valHtml}</div><div class="cof-stat-k">${s.lab}</div>`;
      statsEl.appendChild(el);
    });

    /* ── the double-ratio toggle (on the CTA) ── */
    let scale = 1;
    const cta = root.querySelector(".cof-cta");
    const applyScale = () => {
      root.classList.toggle("scaled", scale === 2);
      scalables.forEach(el => {
        const base = parseFloat(el.dataset.base);
        el.classList.toggle("on", scale === 2);
        const num = el.querySelector(".cof-stat-num"); if (num) num.textContent = fmtNum(base * scale);
      });
      if (cta) cta.textContent = scale === 2 ? "Back to single ×1" : "Double the ratio ×2";
    };
    const toggle = () => { scale = scale === 1 ? 2 : 1; applyScale(); };
    root.querySelectorAll(".cof-toggle").forEach(b => b.addEventListener("click", toggle));
    if (!scalables.length && cta) cta.style.display = "none";
    applyScale();

    /* ── notes (full body) ── */
    const notesEl = root.querySelector(".cof-notes");
    const notesBody = root.querySelector(".cof-notes-body");
    const meaningful = body.replace(/^#{1,6}\s.*$/gm, "").replace(/\s+/g, "");
    if (notesBody && meaningful) {
      try {
        notesBody.classList.add("markdown-rendered");
        const obs = require("obsidian"); const comp = new obs.Component();
        if (obs.MarkdownRenderer && obs.MarkdownRenderer.render) await obs.MarkdownRenderer.render(app, body, notesBody, file.path, comp);
        else if (obs.MarkdownRenderer) await obs.MarkdownRenderer.renderMarkdown(body, notesBody, file.path, comp);
      } catch (e) { console.error("[Coffee notes]", e); if (notesEl) notesEl.remove(); }
    } else if (notesEl) { notesEl.remove(); }

    /* ── internal links ── */
    root.querySelectorAll("a.cof-lp[data-lp]").forEach(a => a.addEventListener("click", e => { e.preventDefault(); app.workspace.openLinkText(a.dataset.lp, file.path); }));
  } catch (e) { console.error("[Custom Views: Coffee]", e); }
})();

Templater Template

<%*
const title = await tp.system.prompt("Note title");
if (title) await tp.file.rename(title);
-%>
---
connections:
banner: "[[15.jpg]]"
categories:
  - "[[Coffee]]"
maker: []
producer:
country:
variety:
process:
rating:
last:
grams:
ml:
extraction-ml:
temp:
ratio:
---