Add blog site links to homepage
Some checks are pending
Build / build (push) Waiting to run

This commit is contained in:
Neeldhara Misra 2026-06-13 22:33:00 +02:00
parent 4d9bf43f75
commit a927c5c8d9

View file

@ -100,7 +100,7 @@ function renderPost(post) {
function renderRssIcon(blog) {
const href = `https://${blog.slug}.${publicHostSuffix}/rss.xml`;
return `<a class="rss-link" href="${escapeHtml(href)}" aria-label="${escapeHtml(blog.label)} RSS">
return `<a class="icon-link" href="${escapeHtml(href)}" aria-label="${escapeHtml(blog.label)} RSS">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="6.25" cy="17.75" r="1.8"></circle>
<path d="M4.5 5.5c7.7 0 14 6.3 14 14"></path>
@ -109,11 +109,27 @@ function renderRssIcon(blog) {
</a>`;
}
function renderSiteIcon(blog) {
const href = `https://${blog.slug}.${publicHostSuffix}/`;
return `<a class="icon-link" href="${escapeHtml(href)}" aria-label="${escapeHtml(blog.label)} site">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="8.25"></circle>
<path d="M3.75 12h16.5"></path>
<path d="M12 3.75c2.2 2.25 3.3 5 3.3 8.25s-1.1 6-3.3 8.25"></path>
<path d="M12 3.75c-2.2 2.25-3.3 5-3.3 8.25s1.1 6 3.3 8.25"></path>
</svg>
</a>`;
}
function renderBlog(blog, posts) {
return `<details class="blog" open>
<summary>
<span>${escapeHtml(blog.label)}</span>
<span class="blog-actions">
${renderSiteIcon(blog)}
${renderRssIcon(blog)}
</span>
</summary>
<p>${escapeHtml(blog.summary)}</p>
<ul>
@ -231,7 +247,12 @@ const html = `<!doctype html>
summary > span {
flex: 0 1 auto;
}
.rss-link {
.blog-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
@ -239,7 +260,7 @@ const html = `<!doctype html>
height: 22px;
color: #111;
}
.rss-link svg {
.icon-link svg {
width: 16px;
height: 16px;
fill: none;
@ -247,7 +268,10 @@ const html = `<!doctype html>
stroke-width: 1.9;
stroke-linecap: round;
}
.rss-link circle {
.icon-link circle {
fill: none;
}
.icon-link[aria-label$="RSS"] circle {
fill: currentColor;
stroke: none;
}