79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
const articles = [
|
|
{ title: 'Electron', subtitle: '', path: '/md/rants/electron.md' },
|
|
{ title: 'Discord', subtitle: '', path: '/md/rants/discord.md' },
|
|
{ title: 'Wayland', subtitle: '', path: '/md/rants/wayland.md' },
|
|
];
|
|
|
|
const showdownConverter = new showdown.Converter();
|
|
|
|
function createArticleBox(article) {
|
|
const articleBox = document.createElement('div');
|
|
articleBox.className = 'article-box';
|
|
articleBox.setAttribute('data-path', article.path);
|
|
|
|
const titleElement = document.createElement('h3');
|
|
titleElement.textContent = article.title;
|
|
|
|
const subtitleElement = document.createElement('p');
|
|
subtitleElement.textContent = article.subtitle;
|
|
subtitleElement.className = 'article-subtitle';
|
|
|
|
articleBox.appendChild(titleElement);
|
|
articleBox.appendChild(subtitleElement);
|
|
|
|
articleBox.addEventListener('click', () => {
|
|
loadArticle(article.path);
|
|
updateArticleBoxContent(article.path, article.title, article.subtitle);
|
|
});
|
|
|
|
return articleBox;
|
|
}
|
|
|
|
function createArticleList() {
|
|
const articleListContainer = document.getElementById('article-list');
|
|
articles.forEach(article => {
|
|
const articleBox = createArticleBox(article);
|
|
articleListContainer.appendChild(articleBox);
|
|
});
|
|
}
|
|
|
|
function loadArticle(articlePath) {
|
|
fetch(articlePath)
|
|
.then(response => response.text())
|
|
.then(markdownContent => {
|
|
const { title, subtitle } = extractTitleAndSubtitle(markdownContent);
|
|
const htmlContent = showdownConverter.makeHtml(markdownContent);
|
|
document.getElementById('article-container').innerHTML = htmlContent;
|
|
updateArticleBoxContent(articlePath, title, subtitle);
|
|
})
|
|
.catch(error => console.error('Error fetching article:', error));
|
|
}
|
|
|
|
function extractTitleAndSubtitle(markdownContent) {
|
|
const lines = markdownContent.split('\n');
|
|
const title = lines[0] ? lines[0].replace(/^#+\s*/, '').trim() : 'Untitled';
|
|
const subtitle = lines[3] ? lines[3].replace(/^#+\s*/, '').trim() : '';
|
|
return { title, subtitle };
|
|
}
|
|
|
|
function updateArticleBoxContent(articlePath, title, subtitle) {
|
|
const articleBox = document.querySelector(`.article-box[data-path="${articlePath}"]`);
|
|
if (articleBox) {
|
|
articleBox.innerHTML = '';
|
|
const titleElement = document.createElement('h3');
|
|
titleElement.textContent = title;
|
|
const subtitleElement = document.createElement('p');
|
|
subtitleElement.textContent = subtitle;
|
|
subtitleElement.className = 'article-subtitle';
|
|
articleBox.appendChild(titleElement);
|
|
articleBox.appendChild(subtitleElement);
|
|
}
|
|
}
|
|
|
|
// Load the functions when the DOM is fully loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
createArticleList();
|
|
if (articles.length > 0) {
|
|
loadArticle(articles[0].path);
|
|
}
|
|
});
|