diff --git a/js/blog.js b/js/blog.js index cdd50a5..e77e9a3 100644 --- a/js/blog.js +++ b/js/blog.js @@ -148,73 +148,58 @@ function renderBlogEntries(entries) { : entry.dateLabel || 'Date not provided'; - const createBody = () => { - const body = document.createElement('div'); - body.className = 'blog-body'; + const body = document.createElement('div'); + body.className = 'blog-body'; - const paragraphs = createParagraphs(entry.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; - }; + if (!paragraphs.length) { + const empty = document.createElement('p'); + empty.textContent = 'No content yet.'; + body.appendChild(empty); + } else { + paragraphs.forEach((p) => body.appendChild(p)); + } - let bodyContainer; + let content = body; + // Collapse long posts if (entry.body.length > BLOG_COLLAPSE_THRESHOLD) { - const details = document.createElement('details'); - details.className = 'blog-collapse'; + const wrapper = document.createElement('div'); + wrapper.className = 'blog-collapse'; - const summary = document.createElement('summary'); - - // Create preview - const preview = document.createElement('div'); + const preview = document.createElement('p'); preview.className = 'blog-preview'; - const previewText = entry.body + preview.textContent = entry.body .split('\n') .filter(line => line.trim()) .slice(0, BLOG_PREVIEW_LINES) .join('\n'); - preview.textContent = previewText; + + const button = document.createElement('button'); + button.className = 'blog-expand-button'; + button.textContent = 'Read more'; - summary.appendChild(preview); + body.style.display = 'none'; - const moreText = document.createElement('span'); - moreText.className = 'read-more-text'; - moreText.textContent = 'Read more'; + button.addEventListener('click', () => { + const expanded = body.style.display !== 'none'; - 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'; + body.style.display = expanded ? 'none' : 'block'; + preview.style.display = expanded ? 'block' : 'none'; + button.textContent = expanded ? 'Read more' : 'Show less'; }); - bodyContainer = details; + wrapper.appendChild(preview); + wrapper.appendChild(button); + wrapper.appendChild(body); - } else { - bodyContainer = createBody(); + content = wrapper; } @@ -228,8 +213,8 @@ function renderBlogEntries(entries) { 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'; @@ -246,7 +231,7 @@ function renderBlogEntries(entries) { article.appendChild(title); article.appendChild(meta); - article.appendChild(bodyContainer); + article.appendChild(content); container.appendChild(article); });