script.js

document.addEventListener("DOMContentLoaded", function() {
 // Fetch repositories
 fetchRepositories();
 // Load learning entries
 loadEntries();
 
 // Add modal close handlers
 setupModalHandlers();
});

function setupModalHandlers() {
 const closeButton = document.querySelector('.close-modal');
 const modal = document.getElementById('journal-modal');

 if (closeButton) {
 closeButton.addEventListener('click', () => {
 modal.style.display = 'none';
 });
 }

 // Close when clicking outside the modal
 window.addEventListener('click', (event) => {
 if (event.target === modal) {
 modal.style.display = 'none';
 }
 });
}

// Dark mode styling
document.body.classList.add("dark-mode");

// Fetch GitHub repositories dynamically
async function fetchRepositories() {
 const username = "sameer-at-git";
 const repoList = document.getElementById("repo-list");
 
 try {
 const response = await fetch(`https://api.github.com/users/${username}/repos`);
 const repos = await response.json();
 
 repos.forEach(repo => {
 let listItem = document.createElement("li");
 listItem.innerHTML = `<a href="${repo.html_url}" target="_blank">${repo.name}</a>`;
 repoList.appendChild(listItem);
 });
 } catch (error) {
 console.error("Error fetching repositories: ", error);
 }
}

async function loadEntries() {
 try {
 const response = await fetch('entries.md');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const text = await response.text();
 
 // Split the markdown into individual entries
 const entries = text.split('\n# ').filter(entry => entry.trim());
 
 const entriesHTML = entries.map((entry, index) => {
 const [title, ...content] = (entry.startsWith('#') ? entry.substring(1) : entry).split('\n');
 const [date, topic] = title.split(' - ');
 
 // Get first paragraph for preview
 const previewContent = content.join('\n').split('\n\n')[0];
 
 return `
 <div class="learning-entry" data-entry-id="${index}">
 <div class="entry-header">
 <h3>📅 Date: <span>${date}</span></h3>
 <h4>🔖 Topic: <span>${topic}</span></h4>
 </div>
 <div class="entry-content">
 ${marked.parse(previewContent)}
 <span class="read-more">Read More...</span>
 </div>
 </div>
 `;
 }).join('');
 
 const container = document.getElementById('entries-container');
 if (container) {
 container.innerHTML = entriesHTML;
 
 // Add click handlers to entries
 document.querySelectorAll('.learning-entry').forEach((entry, index) => {
 entry.addEventListener('click', () => {
 const [title, ...content] = entries[index].split('\n');
 const [date, topic] = title.split(' - ');
 
 const modalContent = `
 <h2>${topic}</h2>
 <h3>${date}</h3>
 <div class="full-content">
 ${marked.parse(content.join('\n'))}
 </div>
 `;
 
 document.getElementById('modal-content-container').innerHTML = modalContent;
 document.getElementById('journal-modal').style.display = 'block';
 });
 });
 }
 } catch (error) {
 console.error('Error loading entries:', error);
 document.getElementById('entries-container').innerHTML = 
 '<p style="color: red;">Error loading entries. Please make sure entries.md exists.</p>';
 }
}

// Add marked.js library to your HTML file
// <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>