Create a bookcard based on Frontmatter data (needs Dataview and CustomJS plugins)

2016 - The Daily Stoic.md

tags	asin	title	subtitle	author	date	publisher	pages	language	cover	links
Book	B01KAFIQE6	The Daily Stoic	366 Meditations for Clarity, Effectiveness, and Serenity	[[Ryan Holiday]] [[Stephen Hanselman]]	2016-10-27	Profile Books	417	English	http://bit.ly/3Gxc6La	[Amazon](https://amzn.to/3QGz8E7) [Kindle](https://amzn.to/3XaS7Jm)

const {DataviewUtils} = customJS;

DataviewUtils.createBookCard(this.container, dv, dv.current());

Rest of the note

dataviewUtils.js

class DataviewUtils {
	createBookCard(container, dv, current) {
	    const year = moment(current.date.toString()).format("yyyy");
	    const title = current.title + " (" + year + ")";
	
	    const parentDiv = container
	        .createDiv({ attr: { style: "overflow: auto;" } })
	        .createDiv({ attr: { style: "margin: 1em; box-sizing: border-box; border-radius: 2px; display: flex; flex-flow: row nowrap; justify-content: space-between; border: 2px solid;" } });
	
	    // Create IMG Div
	    parentDiv
	        .createDiv({ attr: { style: "flex-basis: 35%; display: flex; width: 100%; height: 100%; max-height:300px; float: left; background: #c7c7c7; margin: auto 0 auto 0; padding: 0.25em; justify-content: center;" } })
	        .createEl("img", { attr: { style: "object-fit: contain;", alt: title, src: current.cover } });
	
	    const textDiv = parentDiv
	        .createDiv({ attr: { style: "flex-basis: 80%; padding: 1em 10px 1em 20px; box-sizing: border-box; background: rgba(var(--rgb-primary), 0.1)" } })
	
	    textDiv.createEl("h1", { text: title, attr: { style: "margin-bottom: 7px;" } });
	    textDiv.createDiv({ text: current.subtitle, attr: { style: "margin-bottom: 15px; font-style: italic;" } });
	
	    const createTitleAndContent = (parentDiv, title, content) => {
	        const contentDiv = parentDiv.createDiv();
	        contentDiv.append(dv.el("b", title + ": "));
	        contentDiv.append(dv.span(content));
	    };
	
	    createTitleAndContent(textDiv, "Author(s)", current.author.join(", "));
	    createTitleAndContent(textDiv, "ASIN", current.asin);
	    createTitleAndContent(textDiv, "Publisher", current.publisher);
	    createTitleAndContent(textDiv, "Pages", current.pages);
	    createTitleAndContent(textDiv, "Language", current.language);
	    createTitleAndContent(textDiv, "Links", current.links.join(", "));
	};
}