substr/html.ts

94 lines
2.5 KiB
TypeScript

import { localizeDate } from "./dates.ts";
import Article from "./models/article.ts";
import Profile from "./models/profile.ts";
export function htmlLayout(title: string, body: string, profile: Profile) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>${title}</title>
<link rel="alternate" type="application/atom+xml" href="/@${profile.username}/articles.atom" title="Articles by ${profile.name}" />
<link rel="stylesheet" type="text/css" href="/assets/css/layout.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/themes/default-light.css" />
</head>
<body>
${body}
</body>
</html>
`;
}
export function articleHtml(article: Article, profile: Profile) {
const publishedAtFormatted = localizeDate(article.publishedAt);
const body = `
<main>
<header>
<h1>${article.title}</h1>
<p class="meta">
<img class="avatar" src="${profile.picture}" alt="User Avatar" />
<span class="content">
<span class="name"><a href="/@${profile.username}">${profile.name}</a></span>
<span class="date">${publishedAtFormatted}</span>
</span>
</p>
</header>
${article.html}
</main>
`;
return htmlLayout(article.title, body, profile);
}
function articleListItemHtml(article: Article) {
const formattedDate = localizeDate(article.publishedAt);
return `
<div class="item">
<h3><a href="/${article.naddr}">${article.title}</a></h3>
<p>${formattedDate}</p>
</div>
`;
}
export function articleListHtml(articles: Article[]) {
if (articles.length === 0) return "";
let html = "";
for (const article of articles) {
html += articleListItemHtml(article);
}
return `
<h2>Articles</h2>
<div class="article-list">
${html}
</div>
`;
}
export function profilePageHtml(profile: Profile, articles: Article[]) {
const title = `${profile.name} on Nostr`;
const body = `
<main class="profile-page">
<header>
<img class="avatar" src="${profile.picture}" alt="User Avatar" />
<div class="bio">
<h1>${profile.name}</h1>
<p class="about">
${profile.about}
</p>
</div>
</header>
${articleListHtml(articles)}
</main>
`;
return htmlLayout(title, body, profile);
}