Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign wiki — individual cards with topic badge, subtopic headline, teaser, date (yyyy-mm-dd)

Browse Source
This commit is contained in:
Kato
2026-09-05 15:28:39 +00:00
parent 8305f50fe9
commit 7450d010c6
2 changed files with 202 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/main.js
+63 -22
View File
@@ -650,42 +650,56 @@ function renderWikiCards(data) {
return;
}
// Group by topic
const topics = {};
data.forEach(item => {
const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown');
if (!topics[topicKey]) topics[topicKey] = [];
topics[topicKey].push(item);
});
// Sort by updatedAt descending (newest first)
const sorted = [...data].sort((a, b) => new Date(b.updatedAt || b.createdAt) - new Date(a.updatedAt || a.createdAt));
const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow'];
Object.entries(topics).forEach(([topicName, subtopics], idx) => {
sorted.forEach(item => {
const card = document.createElement('div');
card.className = 'wiki-card';
card.dataset.color = colors[idx % colors.length];
card.className = 'wiki-card-new';
card.setAttribute('role', 'button');
card.setAttribute('tabindex', '0');
// Get excerpt from first subtopic
const firstSub = subtopics[0];
const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || '');
const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || '');
const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
// Get date — try updatedAt first, fall back to createdAt
const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
// Teaser: first 150 chars of content
const teaser = content.trim().substring(0, 180);
const teaserEnd = content.trim().length > 180 ? '...' : '';
card.innerHTML = `
<div class="wiki-card-title">${escapeHtml(topicName)}</div>
<div class="wiki-card-excerpt">${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}</div>
<div class="wiki-card-footer">
<span class="wiki-card-subtopic">${escapeHtml(subtopicTitle)}</span>
<span>${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'}</span>
<span class="wiki-topic-badge">${escapeHtml(topic)}</span>
<h3 class="wiki-subtopic-headline">${escapeHtml(subtopic)}</h3>
<p class="wiki-teaser">${escapeHtml(teaser)}${teaserEnd}</p>
<div class="wiki-card-meta">
<span class="wiki-date">${dateStr}</span>
</div>
`;
// Open modal on click
card.addEventListener('click', () => openWikiModal(topicName, subtopics));
card.addEventListener('click', () => openWikiModalSingle(item));
card.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openWikiModalSingle(item);
}
});
grid.appendChild(card);
});
}
function formatDate(date) {
if (!(date instanceof Date) || isNaN(date)) return '';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function openWikiModal(topicName, subtopics) {
// Create modal if not exists
let modalOverlay = document.getElementById('wiki-modal-overlay');
@@ -717,6 +731,33 @@ function closeWikiModal() {
if (overlay) overlay.classList.remove('active');
}
function openWikiModalSingle(item) {
let modalOverlay = document.getElementById('wiki-modal-overlay');
if (!modalOverlay) {
modalOverlay = document.createElement('div');
modalOverlay.id = 'wiki-modal-overlay';
modalOverlay.className = 'modal-overlay';
document.body.appendChild(modalOverlay);
}
const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
// Get date
const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
let html = '<div class="modal wiki-modal"><button class="modal-close" onclick="closeWikiModal()">&times;</button>';
html += '<div class="wiki-modal-content">';
html += `<div class="wiki-modal-topic">${escapeHtml(topic)}</div>`;
html += `<h2 class="wiki-modal-title">${escapeHtml(subtopic)}</h2>`;
if (dateStr) html += `<div class="wiki-modal-date">${dateStr}</div>`;
html += `<div class="wiki-modal-text">${escapeHtml(content)}</div>`;
html += '</div></div>';
modalOverlay.innerHTML = html;
modalOverlay.classList.add('active');
}
function searchWiki(term) {
if (!term.trim()) {
renderWikiCards(wikiData);