From 1bc40d48fec9ab496584d36263bbdb45cc4e8193 Mon Sep 17 00:00:00 2001 From: "Paul Gauthier (aider)" Date: Fri, 14 Mar 2025 08:22:32 -0700 Subject: [PATCH] refactor: Move CSS and JS to separate files and include them using Jekyll --- aider/website/_includes/recording.css | 114 +++++++++++++ aider/website/_includes/recording.js | 109 +++++++++++++ aider/website/examples/recording.md | 226 +------------------------- 3 files changed, 226 insertions(+), 223 deletions(-) diff --git a/aider/website/_includes/recording.css b/aider/website/_includes/recording.css index e69de29bb..afab7a042 100644 --- a/aider/website/_includes/recording.css +++ b/aider/website/_includes/recording.css @@ -0,0 +1,114 @@ +/* Terminal header styling */ +.terminal-header { + background-color: #e0e0e0; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + padding: 4px 10px; + display: flex; + align-items: center; + border-bottom: 1px solid #c0c0c0; +} + +.terminal-buttons { + display: flex; + gap: 4px; + margin-right: 10px; +} + +.terminal-button { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.terminal-close { + background-color: #ff5f56; + border: 1px solid #e0443e; +} + +.terminal-minimize { + background-color: #ffbd2e; + border: 1px solid #dea123; +} + +.terminal-expand { + background-color: #27c93f; + border: 1px solid #1aab29; +} + +.terminal-title { + flex-grow: 1; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 11px; + color: #666; +} + +/* Toast notification styling */ +.toast-container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9999; + pointer-events: none; +} + +.toast-notification { + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 12px 25px; + border-radius: 8px; + margin-bottom: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + opacity: 0; + transition: opacity 0.3s ease-in-out; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 18px; + text-align: center; + display: inline-block; + min-width: 200px; + max-width: 90%; +} + +/* Page container styling */ +.page-container { + max-height: 80vh; + max-width: 900px; + margin-left: auto; + margin-right: auto; + position: relative; +} + +.terminal-container { + border-radius: 6px; + overflow: hidden; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + position: relative; +} +.asciinema-player-theme-aider { + /* Foreground (default text) color */ + --term-color-foreground: #444444; /* colour238 */ + + /* Background color */ + --term-color-background: #dadada; /* colour253 */ + + /* Palette of 16 standard ANSI colors */ + --term-color-0: #21222c; + --term-color-1: #ff5555; + --term-color-2: #50fa7b; + --term-color-3: #f1fa8c; + --term-color-4: #bd93f9; + --term-color-5: #ff79c6; + --term-color-6: #8be9fd; + --term-color-7: #f8f8f2; + --term-color-8: #6272a4; + --term-color-9: #ff6e6e; + --term-color-10: #69ff94; + --term-color-11: #ffffa5; + --term-color-12: #d6acff; + --term-color-13: #ff92df; + --term-color-14: #a4ffff; + --term-color-15: #ffffff; +} diff --git a/aider/website/_includes/recording.js b/aider/website/_includes/recording.js index e69de29bb..b749a3351 100644 --- a/aider/website/_includes/recording.js +++ b/aider/website/_includes/recording.js @@ -0,0 +1,109 @@ +document.addEventListener('DOMContentLoaded', function() { + const url = "https://gist.githubusercontent.com/paul-gauthier/3011ab9455c2d28c0e5a60947202752f/raw/5a5b3dbf68a9c2b22b4954af287efedecdf79d52/tmp.redacted.cast"; + + // Create player with a single call + const player = AsciinemaPlayer.create( + url, + document.getElementById('demo'), + { + speed: 1.25, + idleTimeLimit: 1, + theme: "aider", + poster: "npt:0:01", + markers: [ + [1.0, "Hello!"], + [5.0, "Hello, this is a test. This is only a test."], + ], + } + ); + + // Function to display toast notification + function showToast(text) { + // Get the appropriate container based on fullscreen state + let container = document.getElementById('toast-container'); + const isFullscreen = document.fullscreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement; + + // If in fullscreen, check if we need to create a fullscreen toast container + if (isFullscreen) { + // Target the fullscreen element as the container parent + const fullscreenElement = document.fullscreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement; + + // Look for an existing fullscreen toast container + let fsContainer = fullscreenElement.querySelector('.fs-toast-container'); + + if (!fsContainer) { + // Create a new container for fullscreen mode + fsContainer = document.createElement('div'); + fsContainer.className = 'toast-container fs-toast-container'; + fsContainer.id = 'fs-toast-container'; + fullscreenElement.appendChild(fsContainer); + } + + container = fsContainer; + } + + // Create toast element + const toast = document.createElement('div'); + toast.className = 'toast-notification'; + toast.textContent = text; + + // Add to container + container.appendChild(toast); + + // Trigger animation + setTimeout(() => { + toast.style.opacity = '1'; + }, 10); + + // Remove after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + if (container && container.contains(toast)) { + container.removeChild(toast); + } + }, 300); // Wait for fade out animation + }, 3000); + } + + // Function to speak text using the Web Speech API + function speakText(text) { + // Check if speech synthesis is supported + if ('speechSynthesis' in window) { + // Create a new speech synthesis utterance + const utterance = new SpeechSynthesisUtterance(text); + + // Optional: Configure voice properties + utterance.rate = 1.0; // Speech rate (0.1 to 10) + utterance.pitch = 1.0; // Speech pitch (0 to 2) + utterance.volume = 1.0; // Speech volume (0 to 1) + + // Speak the text + window.speechSynthesis.speak(utterance); + } else { + console.warn('Speech synthesis not supported in this browser'); + } + } + + // Add event listener with safety checks + if (player && typeof player.addEventListener === 'function') { + player.addEventListener('marker', function(event) { + try { + const { index, time, label } = event; + console.log(`marker! ${index} - ${time} - ${label}`); + + // Speak the marker label and show toast + speakText(label); + showToast(label); + } catch (error) { + console.error('Error in marker event handler:', error); + } + }); + } +}); diff --git a/aider/website/examples/recording.md b/aider/website/examples/recording.md index 1198b3051..246fba7b5 100644 --- a/aider/website/examples/recording.md +++ b/aider/website/examples/recording.md @@ -9,120 +9,7 @@ layout: minimal
@@ -140,116 +27,9 @@ layout: minimal
+