Story Flow Theme: Implementation Plan

Overview

This document tracks remaining implementation tasks for the Story Flow theme on clifford.ressel.fyi.

Target Platform: Docusaurus v3.8.1 with Infima CSS framework

---

Completed Phases

The following phases have been implemented:

• Phase 0: Pre-Implementation Fixes
• Phase 1: Foundation Setup
• Phase 2: Global Layout Updates
• Phase 3: Blog List Page Styling
• Phase 4: Individual Blog Post Styling
• Phase 4.5: Docusaurus Component Styling
• Phase 4.6: Update Swizzled Components
• Phase 5: Theme Toggle Enhancement
• Phase 6: Accessibility & Polish
• Phase 7: Testing (Lighthouse: 96% Accessibility, 75% Performance)

See BLOG_REDESIGN.md for final design specifications.

---

Phase 8: Deployment

8.1 Pre-deployment

1. Create a backup branch of current styles:

   git checkout -b backup/pre-story-flow
   git push origin backup/pre-story-flow

2. Create implementation branch:

   git checkout main
   git checkout -b feature/story-flow-theme

8.2 Staged Rollout

1. Deploy to preview/staging environment first
2. Test all pages and functionality
3. Get feedback from stakeholders
4. Create PR with before/after screenshots
5. Merge to main
6. Monitor for issues post-deployment

8.3 Rollback Plan

If issues are discovered post-deployment:

git revert <merge-commit-hash>
git push origin main

---

Future: Terminal Easter Egg Implementation

The Terminal theme easter egg is scheduled for implementation after the Story Flow theme is stable (target: Q1 2026).

Implementation Tasks

1. Create Terminal CSS module

   • File: src/css/terminal-theme.css
   • Contains all Terminal-specific styles
   • Loaded conditionally via JavaScript

2. Create activation mechanism

   // src/theme/Root.js or custom hook
   const konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
   let konamiIndex = 0;
   
   document.addEventListener('keydown', (e) => {
     if (e.keyCode === konamiCode[konamiIndex]) {
       konamiIndex++;
       if (konamiIndex === konamiCode.length) {
         enableTerminalMode();
         konamiIndex = 0;
       }
     } else {
       konamiIndex = 0;
     }
   });

3. Create Terminal mode toggle function

   function enableTerminalMode() {
     document.documentElement.classList.add('terminal-mode');
     localStorage.setItem('terminalMode', 'enabled');
     // Optional: Show a brief "ACCESS GRANTED" message
   }
   
   function disableTerminalMode() {
     document.documentElement.classList.remove('terminal-mode');
     localStorage.removeItem('terminalMode');
   }

4. Persist on page load

   // Check on page load
   if (localStorage.getItem('terminalMode') === 'enabled') {
     enableTerminalMode();
   }

5. Add exit mechanism

   • Escape key to exit
   • Small "Exit Terminal" button in corner

Terminal Theme Colors

Dark Mode:

--bg: #0c0c0c;
--text: #33ff33;          /* Classic terminal green */
--text-muted: #666;
--accent: #ffff33;        /* Yellow for highlights */

Light Mode:

--bg: #f5f5f0;            /* Paper-like cream */
--text: #1a5f1a;          /* Dark forest green */
--accent: #b38f00;        /* Amber/gold */

---

Document History

Version	Date	Changes
1.0	Dec 2025	Initial implementation plan
1.1	Dec 2025	Added Phase 0, 4.5, 4.6
2.0	Dec 2025	Removed completed phases (0-7)