Obsidian card view template using dataview and folder-notes by Lost Paul

datviewjs

```dataviewjs
const root = dv.current().file.folder;  
const currentFile = dv.current().file.path;  
const pages = dv.pages(`"${root}"`).where(p => p.file.path !== currentFile);
  
function getImageUrl(match, file) {  
	// handle ![[image.png]]  
	if (match.startsWith("![[")) {  
		const name = match.slice(3, -2);  
		const img = app.metadataCache.getFirstLinkpathDest(name, file.path);  
		if (img) return app.vault.getResourcePath(img);  
	}  
	  
	// handle ![](url)  
	const urlMatch = match.match(/\((.*?)\)/);  
	if (urlMatch) return urlMatch[1];  
	  
	return null;  
}
  
function cleanExcerpt(raw, file) {  
	let text = raw.replace(/^---[\s\S]*?---\n?/m, '');  
	const lines = text.split('\n');  
	let out = [];  
	for (let line of lines) {  
		line = line.trim();  
		if (!line) continue;  
		  
		// skip headings / quotes / code  
		if (  
			line.startsWith('#') ||  
			line.startsWith('>') ||  
			line.startsWith('```')  
		) continue;  
		  
		// handle images  
		if (line.startsWith('![')) {  
			const url = getImageUrl(line, file);  
			if (url) {  
				out.push(`<img src="${url}" style="max-width:100%;border-radius:8px;margin:4px 0;">`);  
			}  
		continue;  
		} 
		out.push(line);
	}  
	// preserve line breaks  
	return out.slice(0, 7).join('<br>');  
}  

const rows = [];
const container = dv.container;  
const wrapper = container.createDiv({ cls: "masonry" });  
  
for (const p of pages) {  
	const file = app.vault.getAbstractFileByPath(p.file.path);  
	const content = await app.vault.cachedRead(file);  
	const excerpt = cleanExcerpt(content, file);

	let card = wrapper.createDiv({ cls: "masonry-card" });  

	let titleLink = card.createEl("a", {  
		text: p.file.name,  
		href: p.file.path,
		cls: "card-title"
	});  
	
	card.addEventListener("click", (e) => {  
		e.preventDefault();  
		app.workspace.openLinkText(p.file.path, "", true);  
	});
	    
	const body = card.createDiv({ cls: "card-body" });

	await obsidian.MarkdownRenderer.renderMarkdown(
	    excerpt,
	    body,
	    p.file.path,
	    null
	);
}

```

masonry.css

.masonry {
    column-count: 3;
    column-gap: 1rem;
}

@media (max-width: 1200px) {
    .masonry { column-count: 2; }
}

@media (max-width: 700px) {
    .masonry { column-count: 1; }
}

.masonry-card {
    break-inside: avoid;
    margin-bottom: 1rem;

    background: var(--color-base-20);
    border: 1px solid var(--background-modifier-border);
    /*border-radius: 6px;*/
    border-radius: 0 10px 10px 10px;
    padding: 0.2rem 0.7rem 0.2rem 0.7rem;
    padding: 0px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-wrap: break-word;
    cursor: pointer;
}

.card-title {
    font-weight: 600;
    font-size: 1.07em;
    margin-bottom: 0.3rem;
    text-decoration: none;
    border-left: 5px solid var(--color-base-60);
    padding-left: 5px;
    display: block;
    text-align: left;
    width: 100%;
    background-color: var(--color-base-30);
}

.card-body {
    color: var(--text-muted);
    font-size: 0.8em;
    padding: 0 0.5rem;  
}

.card-body p {
  margin: 0 0 0.5rem 0;
}
.card-body img {
  max-width: 90%;
  height: auto;
  display: block;
}