127 lines
3.2 KiB
JavaScript
127 lines
3.2 KiB
JavaScript
function renderBlogEntries(entries) {
|
|
const container = document.querySelector('.blog-feed');
|
|
container.innerHTML = '';
|
|
|
|
if (!entries.length) {
|
|
container.textContent = 'No posts found. Add .txt files to the blog/ folder and enable blog manifest or directory listing.';
|
|
return;
|
|
}
|
|
|
|
entries.forEach((entry) => {
|
|
const article = document.createElement('article');
|
|
article.className = 'blog-post';
|
|
|
|
const title = document.createElement('h3');
|
|
title.className = 'blog-title';
|
|
title.textContent = entry.title;
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = 'blog-meta';
|
|
meta.textContent = entry.date
|
|
? formatDate(entry.date)
|
|
: entry.dateLabel || 'Date not provided';
|
|
|
|
|
|
const createBody = () => {
|
|
const body = document.createElement('div');
|
|
body.className = 'blog-body';
|
|
|
|
const paragraphs = createParagraphs(entry.body);
|
|
|
|
if (!paragraphs.length) {
|
|
const empty = document.createElement('p');
|
|
empty.textContent = 'No content yet.';
|
|
body.appendChild(empty);
|
|
} else {
|
|
paragraphs.forEach((p) => body.appendChild(p));
|
|
}
|
|
|
|
return body;
|
|
};
|
|
|
|
|
|
let bodyContainer;
|
|
|
|
if (entry.body.length > BLOG_COLLAPSE_THRESHOLD) {
|
|
const details = document.createElement('details');
|
|
details.className = 'blog-collapse';
|
|
|
|
const summary = document.createElement('summary');
|
|
|
|
// Create preview
|
|
const preview = document.createElement('div');
|
|
preview.className = 'blog-preview';
|
|
|
|
const previewText = entry.body
|
|
.split('\n')
|
|
.filter(line => line.trim())
|
|
.slice(0, BLOG_PREVIEW_LINES)
|
|
.join('\n');
|
|
|
|
preview.textContent = previewText;
|
|
|
|
|
|
summary.appendChild(preview);
|
|
|
|
const moreText = document.createElement('span');
|
|
moreText.className = 'read-more-text';
|
|
moreText.textContent = 'Read more';
|
|
|
|
summary.appendChild(moreText);
|
|
|
|
|
|
details.appendChild(summary);
|
|
details.appendChild(createBody());
|
|
|
|
|
|
details.addEventListener('toggle', () => {
|
|
moreText.textContent = details.open
|
|
? 'Show less'
|
|
: 'Read more';
|
|
|
|
preview.style.display = details.open
|
|
? 'none'
|
|
: 'block';
|
|
});
|
|
|
|
|
|
bodyContainer = details;
|
|
|
|
} else {
|
|
bodyContainer = createBody();
|
|
}
|
|
|
|
|
|
if (entry.attachments && entry.attachments.length) {
|
|
const attachTitle = document.createElement('div');
|
|
attachTitle.className = 'blog-meta';
|
|
attachTitle.textContent = 'Attachments:';
|
|
|
|
const list = document.createElement('ul');
|
|
list.className = 'blog-attachment-list';
|
|
|
|
entry.attachments.forEach((attachment) => {
|
|
const item = document.createElement('li');
|
|
|
|
const link = document.createElement('a');
|
|
link.href = ATTACHMENT_DIR + encodeURI(attachment);
|
|
link.target = '_blank';
|
|
link.rel = 'noopener noreferrer';
|
|
link.textContent = attachment;
|
|
|
|
item.appendChild(link);
|
|
list.appendChild(item);
|
|
});
|
|
|
|
article.appendChild(attachTitle);
|
|
article.appendChild(list);
|
|
}
|
|
|
|
|
|
article.appendChild(title);
|
|
article.appendChild(meta);
|
|
article.appendChild(bodyContainer);
|
|
|
|
container.appendChild(article);
|
|
});
|
|
} |