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].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);
    }
  });