From 8ba83943ffab4d415a9f4564be7e9eb7a9b602fd Mon Sep 17 00:00:00 2001 From: Bobby Date: Thu, 22 May 2025 18:01:02 +0530 Subject: better posts; translated stuff; lightboxes; just improvements in general --- static/css/blog/weblog.css | 23 ++++++ static/js/blog/post.js | 183 +++++++++++++++++++++++++++++++++++---------- static/js/core/math.js | 26 +++++++ 3 files changed, 193 insertions(+), 39 deletions(-) create mode 100644 static/js/core/math.js (limited to 'static') diff --git a/static/css/blog/weblog.css b/static/css/blog/weblog.css index cfea3eac..ca6fcff7 100644 --- a/static/css/blog/weblog.css +++ b/static/css/blog/weblog.css @@ -141,4 +141,27 @@ .weblog-content code { word-wrap: break-word; white-space: pre-wrap; +} + +/* Blockquote styles - Y2K Japanese inspired */ +.weblog-content blockquote { + margin: 12px 0; + padding: 8px 16px; + border-left: 4px solid #ff6dc6; + background: rgba(49, 27, 79, 0.5); + position: relative; + clear: both; +} + +.weblog-content blockquote p { + margin: 5px 0; +} + +.weblog-content blockquote cite { + display: block; + text-align: right; + margin-top: 8px; + font-size: 12px; + font-style: italic; + color: #777; } \ No newline at end of file diff --git a/static/js/blog/post.js b/static/js/blog/post.js index d53a2d05..1d1a3094 100644 --- a/static/js/blog/post.js +++ b/static/js/blog/post.js @@ -1,55 +1,160 @@ document.addEventListener('DOMContentLoaded', function () { + initializeImageLayout(); + setupLightbox(); + configureMathJax(); +}); + +function initializeImageLayout() { const content = document.getElementById('weblog-body-content'); + if (!content) return; + const images = content.querySelectorAll('img'); - images.forEach((img, index) => { - // Create a wrapper for the image - const imgWrapper = document.createElement('div'); - imgWrapper.style.maxWidth = '100%'; - imgWrapper.className = 'image-wrapper'; - - // Alternate between left and right alignment - if (index % 2 === 0) { - imgWrapper.style.float = 'left'; - imgWrapper.style.marginRight = '20px'; - imgWrapper.style.marginBottom = '15px'; - } else { - imgWrapper.style.float = 'right'; - imgWrapper.style.marginLeft = '20px'; - imgWrapper.style.marginBottom = '15px'; + const filteredImages = Array.from(images).filter(img => !img.classList.contains('block')); + + if (filteredImages.length > 0) { + filteredImages.forEach((img, index) => { + img.setAttribute('data-lightbox', 'content-images'); + img.setAttribute('data-title', img.alt || 'Image ' + (index + 1)); + + const imgLink = document.createElement('a'); + imgLink.href = img.src; + imgLink.className = 'lightbox-image'; + + const imgWrapper = document.createElement('div'); + imgWrapper.style.maxWidth = '100%'; + imgWrapper.className = 'image-wrapper'; + + if (index % 2 === 0) { + imgWrapper.style.float = 'left'; + imgWrapper.style.marginRight = '20px'; + imgWrapper.style.marginBottom = '15px'; + } else { + imgWrapper.style.float = 'right'; + imgWrapper.style.marginLeft = '20px'; + imgWrapper.style.marginBottom = '15px'; + } + + img.parentNode.insertBefore(imgWrapper, img); + imgWrapper.appendChild(imgLink); + imgLink.appendChild(img); + }); + } + + const blockImages = Array.from(images).filter(img => img.classList.contains('block')); + + blockImages.forEach((img) => { + img.setAttribute('data-lightbox', 'content-images'); + img.setAttribute('data-title', img.alt || 'Image'); + + const imgLink = document.createElement('a'); + imgLink.href = img.src; + imgLink.className = 'lightbox-image'; + + img.parentNode.insertBefore(imgLink, img); + imgLink.appendChild(img); + }); +} + +function setupLightbox() { + const lightbox = document.createElement('div'); + lightbox.id = 'lightbox'; + lightbox.className = 'lightbox'; + lightbox.innerHTML = ` +
+
+
+ Lightbox Image +
+
+ + + +
+ `; + document.body.appendChild(lightbox); + + const style = document.createElement('style'); + style.textContent = ` + .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } + .lightbox.active { display: flex; justify-content: center; align-items: center; } + .lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); } + .lightbox-container { position: relative; max-width: 80%; max-height: 80%; z-index: 10000; } + .lightbox-content { position: relative; } + .lightbox-content img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border: 3px solid white; } + .lightbox-caption { color: white; text-align: center; padding: 10px; background: rgba(0,0,0,0.7); } + .lightbox-close { position: absolute; top: -50px; right: -50px; color: white; background: transparent; border: none; font-size: 24px; cursor: pointer; } + .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: white; background: rgba(0,0,0,0.5); border: none; font-size: 18px; padding: 15px; cursor: pointer; } + .lightbox-prev { left: -50px; } + .lightbox-next { right: -50px; } + `; + document.head.appendChild(style); + + let images = []; + let currentIndex = 0; + + document.querySelectorAll('a.lightbox-image').forEach(link => { + link.addEventListener('click', function (e) { + e.preventDefault(); + + images = Array.from(document.querySelectorAll('a.lightbox-image')); + currentIndex = images.indexOf(this); + + openLightbox(this.href, this.querySelector('img').getAttribute('alt')); + }); + }); + + document.querySelector('.lightbox-close').addEventListener('click', closeLightbox); + document.querySelector('.lightbox-overlay').addEventListener('click', closeLightbox); + + document.querySelector('.lightbox-prev').addEventListener('click', () => { + if (currentIndex > 0) { + currentIndex--; + const prevLink = images[currentIndex]; + openLightbox(prevLink.href, prevLink.querySelector('img').getAttribute('alt')); } + }); - // Replace the image with our wrapped version - img.parentNode.insertBefore(imgWrapper, img); - imgWrapper.appendChild(img); + document.querySelector('.lightbox-next').addEventListener('click', () => { + if (currentIndex < images.length - 1) { + currentIndex++; + const nextLink = images[currentIndex]; + openLightbox(nextLink.href, nextLink.querySelector('img').getAttribute('alt')); + } }); - window.MathJax = { - tex: { - inlineMath: [ - ['$', '$'], - ['\\(', '\\)'] - ], - displayMath: [ - ['$$', '$$'], - ['\\[', '\\]'] - ], - processEscapes: true, - processEnvironments: true - }, - options: { - skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], - ignoreHtmlClass: 'tex2jax_ignore', - processHtmlClass: 'tex2jax_process', - enableMenu: false, + document.addEventListener('keydown', (e) => { + if (!document.querySelector('.lightbox.active')) return; + + switch (e.key) { + case 'Escape': closeLightbox(); break; + case 'ArrowLeft': document.querySelector('.lightbox-prev').click(); break; + case 'ArrowRight': document.querySelector('.lightbox-next').click(); break; } + }); + + function openLightbox(src, caption) { + const lightboxImg = document.querySelector('.lightbox img'); + const lightboxCaption = document.querySelector('.lightbox-caption'); + + lightboxImg.src = src; + lightboxCaption.textContent = caption || ''; + lightbox.classList.add('active'); + document.body.style.overflow = 'hidden'; // Prevent scrolling } -}); + + function closeLightbox() { + lightbox.classList.remove('active'); + document.body.style.overflow = ''; // Re-enable scrolling + } +} function showReplyForm(commentId) { - document.getElementById(`reply-form-${commentId}`).style.display = 'block'; + const replyForm = document.getElementById(`reply-form-${commentId}`); + if (replyForm) replyForm.style.display = 'block'; } function hideReplyForm(commentId) { - document.getElementById(`reply-form-${commentId}`).style.display = 'none'; + const replyForm = document.getElementById(`reply-form-${commentId}`); + if (replyForm) replyForm.style.display = 'none'; } \ No newline at end of file diff --git a/static/js/core/math.js b/static/js/core/math.js new file mode 100644 index 00000000..9b6f98fc --- /dev/null +++ b/static/js/core/math.js @@ -0,0 +1,26 @@ +document.addEventListener('DOMContentLoaded', function () { + configureMathJax(); +}); + +function configureMathJax() { + window.MathJax = { + tex: { + inlineMath: [ + ['$', '$'], + ['\\(', '\\)'] + ], + displayMath: [ + ['$$', '$$'], + ['\\[', '\\]'] + ], + processEscapes: true, + processEnvironments: true + }, + options: { + skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], + ignoreHtmlClass: 'tex2jax_ignore', + processHtmlClass: 'tex2jax_process', + enableMenu: false + } + }; +} \ No newline at end of file -- cgit v1.2.3