cozy/src/utils/library.ts

66 lines
2 KiB
TypeScript

export function getPostCard(html: HTMLHtmlElement) {
const title =
html
.querySelector('meta[property="cozy:title"]')
?.getAttribute("content") ||
html.querySelector("title")?.innerHTML?.replace("Cozy 🧸 | ", "");
const description = html
.querySelector('meta[property="cozy:description"]')
?.getAttribute("content");
const image = html
.querySelector('meta[property="cozy:image"]')
?.getAttribute("content");
const source = html
.querySelector('meta[property="cozy:source"]')
?.getAttribute("content");
const published = html
.querySelector('meta[property="cozy:published"]')
?.getAttribute("content");
const postCard = `
<div class="post-card">
<div class="post-card__image">
${
image
? `
<img src="${image}" alt="${title} | ${description}" />
`
: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path fill="currentColor" d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'
}
</div>
<div class="post-card__content">
${
source || published
? `
<div class="post-card__meta">
${
source
&& `
<p class="post-card__source">${source}</p>
`
}
${
published
&& `
<p class="post-card__published">${
new Date(published)?.toLocaleDateString() || ""
}</p>
`
}
</div>
`
: ""
}
<h3 class="post-card__title">${title}</h3>
${
description
? `
<p class="post-card__description">${description}</p>`
: ""
}
</div>
</div>
`;
return postCard;
}