diff --git a/_layouts/default.html b/_layouts/default.html index d80e601..3f14761 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -15,11 +15,13 @@ + {% if page.math %} + onload="renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\\\[', right: '\\\\]', display: true}, {left: '\\\\(', right: '\\\\)', display: false}], throwOnError: false});"> + {% endif %} - + diff --git a/index.html b/index.html index de1b8f9..a67d896 100644 --- a/index.html +++ b/index.html @@ -87,27 +87,4 @@

Featured Projects

- diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..738dddc --- /dev/null +++ b/js/main.js @@ -0,0 +1,93 @@ +document.addEventListener('DOMContentLoaded', function() { + // Theme Switcher Logic + const toggleBtn = document.getElementById('theme-toggle'); + const themeIconContainer = document.getElementById('theme-icon-container'); + const themeLabel = document.getElementById('theme-label'); + + const sunSVG = ``; + const moonSVG = ``; + + function updateThemeUI(theme) { + if (!toggleBtn) return; + if (theme === 'dark') { + if (themeIconContainer) themeIconContainer.innerHTML = sunSVG; + if (themeLabel) themeLabel.textContent = 'Light'; + } else { + if (themeIconContainer) themeIconContainer.innerHTML = moonSVG; + if (themeLabel) themeLabel.textContent = 'Dark'; + } + } + + const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; + updateThemeUI(currentTheme); + + if (toggleBtn) { + toggleBtn.addEventListener('click', function() { + const activeTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = activeTheme === 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('42devops-theme', newTheme); + updateThemeUI(newTheme); + }); + } + + // Code Block Enhancement: Wrap with Header & Copy Button + const highlightBlocks = document.querySelectorAll('.highlight, pre:not(.highlight pre)'); + highlightBlocks.forEach(function(block) { + // Avoid double wrapping + if (block.closest('.code-wrapper')) return; + + const wrapper = document.createElement('div'); + wrapper.className = 'code-wrapper'; + + const header = document.createElement('div'); + header.className = 'code-header'; + + const dots = document.createElement('div'); + dots.className = 'code-dots'; + dots.innerHTML = ''; + + const copyBtn = document.createElement('button'); + copyBtn.className = 'copy-btn'; + copyBtn.textContent = 'Copy'; + + copyBtn.addEventListener('click', function() { + const codeText = block.querySelector('code') ? block.querySelector('code').innerText : block.innerText; + navigator.clipboard.writeText(codeText).then(function() { + copyBtn.textContent = 'Copied!'; + setTimeout(function() { copyBtn.textContent = 'Copy'; }, 2000); + }); + }); + + header.appendChild(dots); + header.appendChild(copyBtn); + + block.parentNode.insertBefore(wrapper, block); + wrapper.appendChild(header); + wrapper.appendChild(block); + }); + + // Homepage Filters + const filterPills = document.querySelectorAll('.filter-pill'); + const postCards = document.querySelectorAll('.post-card'); + + if (filterPills.length > 0 && postCards.length > 0) { + filterPills.forEach(pill => { + pill.addEventListener('click', function() { + filterPills.forEach(p => p.classList.remove('active')); + this.classList.add('active'); + + const filter = this.getAttribute('data-filter'); + + postCards.forEach(card => { + const categories = (card.getAttribute('data-categories') || '').split(/\s+/); + if (filter === 'all' || categories.includes(filter)) { + card.style.display = 'block'; + } else { + card.style.display = 'none'; + } + }); + }); + }); + } +}); \ No newline at end of file