Clean working solution - simplified JavaScript

- Simplified JavaScript to only handle year timeline sections
- Fixed overflow-y: auto to enable scrolling
- Remove interference with footer and other content
- Keep all markdown content unchanged
- Create proper story structure without breaking existing elements
- Add quick navigation and interactive year sections
- Clean, maintainable approach
This commit is contained in:
Chad 2026-01-24 14:28:35 -06:00
parent 32264deb5a
commit 45a3c27e45
2 changed files with 26 additions and 23 deletions

View file

@ -3,7 +3,8 @@
background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%); background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%);
background-attachment: fixed; background-attachment: fixed;
position: relative; position: relative;
overflow: hidden; overflow-y: auto;
min-height: 100vh;
} }
/* Logo styling */ /* Logo styling */

View file

@ -1,18 +1,9 @@
// Journey Page JavaScript - Convert markdown to interactive timeline // Simple Journey Page JavaScript - Only handle year timeline
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log('Journey.js loaded - DOM content loaded'); console.log('Journey.js loaded - DOM content loaded');
// Find the container with story content
const container = document.querySelector('.container') || document.querySelector('main');
if (!container) {
console.log('No container found');
return;
}
console.log('Container found, looking for year sections...');
// Find all h2 elements that contain years // Find all h2 elements that contain years
const yearHeaders = Array.from(container.querySelectorAll('h2')).filter(h2 => { const yearHeaders = Array.from(document.querySelectorAll('h2')).filter(h2 => {
const text = h2.textContent; const text = h2.textContent;
return /\d{4}/.test(text); return /\d{4}/.test(text);
}); });
@ -25,6 +16,13 @@ document.addEventListener('DOMContentLoaded', function() {
} }
// Wrap everything in story structure // Wrap everything in story structure
const container = document.querySelector('.container') || document.querySelector('main');
if (!container) {
console.log('No container found');
return;
}
// Create story structure but only wrap year sections
const storyPage = document.createElement('div'); const storyPage = document.createElement('div');
storyPage.className = 'story-page'; storyPage.className = 'story-page';
@ -34,17 +32,13 @@ document.addEventListener('DOMContentLoaded', function() {
const storyThread = document.createElement('div'); const storyThread = document.createElement('div');
storyThread.className = 'story-thread'; storyThread.className = 'story-thread';
// Move all content to new structure // Move all content from original container to new structure
while (container.firstChild) { while (container.firstChild) {
storyContainer.appendChild(container.firstChild); storyThread.appendChild(container.firstChild);
} }
storyThread.appendChild(storyContainer); // Now convert only the h2 year sections
storyPage.appendChild(storyThread); const allH2Elements = storyThread.querySelectorAll('h2');
container.appendChild(storyPage);
// Now convert h2 elements to collapsible sections
const allH2Elements = storyContainer.querySelectorAll('h2');
const sections = []; const sections = [];
allH2Elements.forEach((h2, index) => { allH2Elements.forEach((h2, index) => {
@ -104,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
// Add click handlers // Add click handlers for the year sections
sections.forEach(section => { sections.forEach(section => {
const header = section.querySelector('.year-header'); const header = section.querySelector('.year-header');
const content = section.querySelector('.year-content'); const content = section.querySelector('.year-content');
@ -152,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function() {
</div> </div>
`; `;
storyContainer.insertBefore(quickJump, storyThread); storyThread.insertBefore(quickJump, storyThread);
// Add jump handlers // Add jump handlers
quickJump.querySelectorAll('.jump-to-year').forEach(btn => { quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
@ -169,5 +163,13 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
} }
console.log('Story conversion completed with', sections.length, 'sections'); // Wrap everything in story structure
storyPage.appendChild(storyContainer);
storyPage.appendChild(storyThread);
// Replace the original container content with the new structure
container.innerHTML = '';
container.appendChild(storyPage);
console.log('Story conversion completed with', sections.length, 'year sections');
}); });